Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Maffue Gersitz
Maffue Gersitz
Courses Plus Student 1,141 Points

How can I get locations from a database and display them on a Google Map showing a marker on the map?

I have a custom Google map that currently gets the locations from an array or javascript variable named locations. I want the data to no longer be enter manually, but be inserted dynamically from a database. How can I go about achieving this? I am using the Google map Api.

Paul Yorde
Paul Yorde
10,497 Points

Hey Maffue,

Marcus provided an exceptional solution and if you still need assistance could you please provide some code to see where you are with the scenario?

Maffue Gersitz
Maffue Gersitz
Courses Plus Student 1,141 Points

I just uploaded the code, on treehouse form.

Maffue Gersitz
Maffue Gersitz
Courses Plus Student 1,141 Points

Here is where the code is!! https://teamtreehouse.com/forum/google-map-with-an-mysql-database-error

1 Answer

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Hey Maffue,

You can get JSON data back from Google Maps about a specific location. To get a good look at all of that data, I'd recommend going to a JSON retrieval URL in your browser such as: http://maps.googleapis.com/maps/api/geocode/json?address=25801&sensor=false. This will give you a feel for how the data is laid out. All you need to do is set up a text box, get the value from that text box, feed it into a variable that you concatenate with the Google Maps JSON retrieval URL, and then use a little bit of AJAX to retrieve the data you need. Here is a snippet from my Weather App: http://marcusparsons.com/projects/weatherapp

//If user presses a key inside the location box
$('#location').keypress (function (e) {
    //And that key is enter
    if (e.which === 13) {
        //Get the zipcode/location
        loc = $('#location').val();
        //Feed that information to the getGeoLatLng function
        getGeoLatLng(loc);
    }
});

    function getGeoLatLng (loc) {
        var url = "http://maps.googleapis.com/maps/api/geocode/json?address=" + loc + "&sensor=false";
        //Make AJAX request to googleapis server
        $.ajax(url, {
            type : "GET",
            crossDomain : true,
            success : function (response) {
                //Throw the status to console if connection not successful
                if (response.status !== "OK") {
                    console.log(response.status);
                } else {
                    //Get city and state information from the Google Maps API because we're awesome like that!
                    //If a zipcode was used, use the appropriate key to get the right data
                    if (loc.search(/[0-9]/) > -1) {
                        var city = response.results[0].address_components[1].long_name;
                        var state = response.results[0].address_components[2].short_name;
                        citystate = city + "," + state;
                    } 
                    else {
                        //And if fed a location, use the appropriate data
                        var city = response.results[0].address_components[0].long_name;
                        var state = response.results[0].address_components[2].short_name;
                        citystate = city + "," + state;                        
                    }
                    //Compile latitude and longitude
                    latlng = response.results[0].geometry.location.lat + "," + response.results[0].geometry.location.lng; 
                    //Feed the latlng var into the forecast function
                    forecast(latlng);            
                } 
            },
            //If an error is thrown, log the status and error to the console
            error : function (jqXHR, textStatus, errorThrown) {
                console.log(textStatus, errorThrown);
            }
        });
    }