CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
deadsix
deadsix

Reputation: 375

Creating Google Maps LatLng classes dynamically

I'm trying to create markers on a google map using google's own API. My issue is that I'm reading JSON data from a text file then trying to break it down to the latitudes and longitudes so I can place markers on the map. You can see my code below.

var oReq = new XMLHttpRequest(); //New request object
oReq.onload = function() {
//This is where you handle what to do with the response.
//The actual data is found on this.responseText
//alert(this.responseText); //Will alert: the location latitude and longitude in JSON

locations = JSON.parse(this.responseText);
//alert(locations);
for(var i = 0; i < locations.length; i++ ){
    var tempLocation = locations[i];
    //alert(tempLocation);

    var tempLat = tempLocation.latitude;
    var tempLong = tempLocation.longitude;
    tempLat = tempLat.toString();
    tempLong = tempLong.toString();

    pictureLocations[i] = new google.maps.LatLng(tempLat + ", " + tempLong);  
}
    var tempPictureLocation = pictureLocations.toString();
    alert(tempPictureLocation);

};

My issue is that the variable pictureLocations returns NaN. I believe that their is something wrong with my constructing statement but not sure exactly what's wrong. If I hardcode in some coordinates it also doesn't work. Thanks for the help!

Upvotes: 0

Views: 1312

Answers (3)

geocodezip
geocodezip

Reputation: 161384

a google.maps.LatLng object takes two numbers as its arguments. This is not correct:

pictureLocations[i] = new google.maps.LatLng(tempLat + ", " + tempLong);

should be

pictureLocations[i] = new google.maps.LatLng(tempLat,tempLong);

and safer to be:

pictureLocations[i] = new google.maps.LatLng(
                            parseFloat(tempLocation.latitude),
                            parseFloat(tempLocation.longitude));

as coming from JSON, they are both strings. You could even verify they are valid numbers, by testing "isNaN" before using them to construct the google.maps.LatLng.

Upvotes: 3

deadsix
deadsix

Reputation: 375

Google Maps LatLng constructor is designed for the arguement to have a comma between the numbers so it looks like this: pictureLocations[i] = new google.maps.LatLng(tempLat, tempLong);

Upvotes: 0

rfornal
rfornal

Reputation: 5122

pictureLocations, the way you are using it is an array ... to output as a string, try ...

var tempPictureLocation = pictureLocations.join(" ");

Although, this may not work as I am not sure what ...

pictureLocations[i] = new google.maps.LatLng(tempLat + ", " + tempLong);

... is dropped into the array with this code.

Upvotes: 0

Related Questions