classequalsarthur classequalsarthur - 1 year ago 114
Ajax Question

Loop for new Google Map Marker for every JSON object in database

I'm working with a friend to create a Google Map marker for every entry in a table - I have a loop but I'm not sure I've got it right. The map works fine, I can add normal markers and can loop through the entries and

them to a
but when I try to use the marker code in the loop I get the following errors for every entry in the console:

InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama

Does this mean that the database isn't saving the lat/long as a number? Here is a shorter version of the code I'm using:

type: 'POST',
url: 'getAllJson.php',
success: function(jsonData) {
var obj = (jsonData);
$.each(obj, function(key,value) {
//console.log(key, first, value[1], value[2]);
var user = {
id: value["id"],
firstName: value["first_name"],
lastName: value["last_name"],
email: value["email"],
lat: value["latitude"],
long: value["longitude"]

var firstName = user.firstName,
lastName = user.lastName,
email =,
userLat =,
userLong = user.long;

// marker
var markerLatLng = {lat: userLat, lng: userLong};

var marker = new google.maps.Marker({
position: markerLatLng,
map: map



Am I on the right track or is there a better/easier way to loop through all the entries and create a marker based on the lat/long? Thanks!

Answer Source

You have to solve two problems here.

The first is to parse userLat/ userLong to floats. This can be done as mentioned above in my comment:

var markerLatLng = {lat: parseFloat(userLat), lng: parseFloat(userLong)};

The other Problem you are facing is, that you map instance insĀ“t reachable, because you have defined it locally in initMap. To fix this, you simply make

var map;

function mapInit(){
  map = new google.maps.Map('');

This should do it.