asked on

google maps multiple markers issue

Hi
i have an ajax call that gring the lat and lng from a database, and it is passed ok. my issue is that i only get the last marker and not all. this is the code i have:

      function initialize() {
        var mapCanvas = document.getElementById('map');

        /*ajax*/

        $.ajax({
            url: 'get-locations.php',
            success:function(data){
                //Loop through each location.
                $.each(data, function(){

                    //Plot the location as a marker
                    var theposition = new google.maps.LatLng(this.lat, this.lng); 

                    var mapOptions = {
                      center: theposition,
                      zoom: 16,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                  }
                  var map = new google.maps.Map(mapCanvas, mapOptions);

                  var marker = new google.maps.Marker({
                    position: theposition,
                    map: map
                });



              });

            }
        });

        /*ajax*/

    }
    google.maps.event.addDomListener(window, 'load', initialize);

Open in new window

the map is showing and also the last mark. i do build it inside of the loop so i don't see what i am missing.

best regards

Rainer Jeschor

Hi,
because you create the map in the $.each loop.

Please try this:

      function initialize() {
        var mapCanvas = document.getElementById('map');
		var mapOptions = {
			center: theposition,
			zoom: 16,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(mapCanvas, mapOptions);

        /*ajax*/

        $.ajax({
            url: 'get-locations.php',
            success:function(data){
                //Loop through each location.
                $.each(data, function(){
					//Plot the location as a marker
                    var theposition = new google.maps.LatLng(this.lat, this.lng); 
					var marker = new google.maps.Marker({
						position: theposition,
						map: map
					});
				});
            }
        });

        /*ajax*/

    }
    google.maps.event.addDomListener(window, 'load', initialize);

Open in new window

So moving the map options and map creation outside of the ajax call / each loop.

HTH
Rainer

derrida

ASKER

Hi Rainer
first thanks for answering. i thought and try that, but then, in the mapOptions variable how do i use the "theposition" ?

Rainer Jeschor

Hi,
ah sorry, I did not see this.
The main question would be: where do you want to center if you have multiple locations?

If possible I would remove this configuration from the options and call the explicit "setCenter" function afterwards - if you know where to center.

HTH
Rainer

derrida

ASKER

Hi
how would you use the setCenter? without passing it the position outside of the loop?

ASKER CERTIFIED SOLUTION

Rainer Jeschor

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

derrida

ASKER

hi
i get this error:

InvalidValueError: setCenter: not a LatLng or LatLngLiteral: not an Object

even though when i output the data[0].lat it has a value

derrida

ASKER

this done it:
map.setCenter(new google.maps.LatLng(centerLat,centerLng));