Creating a marker for each lat,lng in the list Google Maps

Question

I'm having an issue creating a markers in Google Maps.

I have a function in JS that getting a long string

locationlist look like that: "[{"Lat":"34.163291","Lng":"-118.685123"},{"Lat":"38.91992","Lng":"-76.992757"},{"Lat":"39.309265","Lng":"-76.749287"},{"Lat":"40.658113","Lng":"-74.005874"},{"Lat":"33.837814","Lng":"-117.886568"}]" ...... (Long String)

For each Lat,Lng in this string I want to create a marker and display it on the map Hope that someone can help me with that.

Also does it going to effect the speed that the map will load?? when loading bunch of markers at once!

JS Funcation:

            var locationObj;
    var historyObj;



    function setMap(locationList) {
      // List of Lat,Lng
        locationObj = $.parseJSON(locationList);
        //Looping through the Object 
      for (i in locationObj) {
          var LatLngPair = new google.maps.LatLng(locationObj[i]["Lat"], locationObj[i]["Lng"]);

          // Getting the Lat,Lng frmo the object
          var hItem = locationObj[i];
          var qLat = parseFloat(hItem["Lat"]);
          var qLong = parseFloat(hItem["Lng"]);


          var qMapTypeId = google.maps.MapTypeId.SATELLITE


          var myLatlng;
          if (qLat != 0 && qLong != 0) {
             myLatlng = new google.maps.LatLng(qLat, qLong);
              mapOptions = {
                  zoom: 1,
                  center: myLatlng,
                  mapTypeControl: true,
                  mapTypeControlOptions: {
                      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                  }
              }


              map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);



              map.setTilt(45);
              map.setHeading(0);
              map.setMapTypeId(qMapTypeId);

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

              });

                google.maps.event.addListener(marker, "click", function (event) {

                });
              }

        }
        $("#map-canvas").show();
        $("#divLoadingMessageMap").css("display", "none");
  }

Answer 1

Your problem is you're looping over your list of locations, creating a new map for each one. 200 markers is no problem, but 200 maps isn't very good. Move the code creating the map outside of the loop:

function setMap(locationList) {
    locationObj = $.parseJSON(locationList);
    var qMapTypeId = google.maps.MapTypeId.SATELLITE

    mapOptions = {
        zoom: 1,
        center: myLatlng,  // this line won't work yet
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }
    }


    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    map.setTilt(45);
    map.setHeading(0);
    map.setMapTypeId(qMapTypeId);

    for (i in locationObj) {
        var LatLngPair = new google.maps.LatLng(locationObj[i]["Lat"], locationObj[i]["Lng"]);

        var hItem = locationObj[i];
        var qLat = parseFloat(hItem["Lat"]);
        var qLong = parseFloat(hItem["Lng"]);

        var myLatlng;
        if (qLat != 0 && qLong != 0) {
            myLatlng = new google.maps.LatLng(qLat, qLong);


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

            google.maps.event.addListener(marker, "click", function(event) {

            });
        }

    }
    $("#map-canvas").show();
    $("#divLoadingMessageMap").css("display", "none");
}

The only problem here is you're going to have to give a lat/lng to your map options, which you don't have yet. There's various clever ways you can do this after you've added the markers, or you may already know a lat/lng you can use.

Answer 2

From the Google Maps docs

The following fields are particularly important and commonly set when constructing a marker:

1. position (required) specifies a LatLng identifying the initial location of the marker.
2. map (optional) specifies the Map on which to place the marker. If you do not specify the map on construction of the marker, the marker is created but is not attached to (or displayed on) the map. You may add the marker later by calling the marker's setMap() method.

So you should set your map variable before creating your marker then upon creating your marker instead of

 marker = new google.maps.Marker({
             position: myLatlng
          });

do

 marker = new google.maps.Marker({
             position: myLatlng
             map: map
          });

Answer 3

I have a answer.. on this question: Multiple markers and infowindows on Google Maps (using MySQL)

  var lis_marker = new Array();
  for (i = 0; i < locationObj.length; i++) {
        var hItem = locationObj[i];

       lis_marker[i] = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(hItem["Lat"],hItem["Lng"]),
              title: 'Marker';  
       });
    }

In this code you can see var data = markers[i]; ...

so markers[i] in your data is array of json

var hItem = locationObj[i];
var marker = new google.maps.Marker({
      title: 'marker ',
      animation: google.maps.Animation.DROP,
      position: new google.maps.LatLng(hItem["Lat"],hItem["Lng"])
});

try this I hope it help

Or If you don't want use array to save array marker... you can try this code

  for (i = 0; i < locationObj.length; i++) {
       var hItem = locationObj[i];
       (function(hItem){
       lis_marker = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(hItem["Lat"],hItem["Lng"]),
              title: 'Marker';  
       });
       })(hItem);
    }

jQuery allowed thread..