CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-maps-markers
user2504436
user2504436

Reputation: 1

Google Map not showing all markers from retrieved addresses

Good Day,

I am trying to add markers on my google map but not all the markers show. Only the first address marker shows. Please see below code:

//Search Button Event Handler
function getAccounts() {

    //Search where City contains data
    var Search = SearchText.value;
    //alert("You have inserted: " + Search + " as a city");
    if (Search != "") {
        retrieveMultiple("AccountSet", "substringof('" + Search + "',Address1_City)", SearchCompleted, null);
    }

    //Retrieve all Accounts
    else {
        retrieveMultiple("AccountSet", null, SearchCompleted, null);
    }
}

//Callback - Search Success
function SearchCompleted(data, textStatus, XmlHttpRequest) {

    if (data && data.length > 0) {  
        for (var i=0; i < data.length; i++) {                
            var result = data[i];
            var address = (data[i].Address1_Line1 + ", " + data[i].Address1_City + ", " + data[i].Address1_StateOrProvince + ", " + data[i].Address1_Country);

            showAddress(address);

            alert(result.Address1_Line1 + ", " +result.Address1_City + ", " + result.Address1_StateOrProvince + ", " + result.Address1_Country);
        }
    }
    else {
        alert('No records!');
    }
}


function showAddress(address) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': address}, function (result, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            var myOptions = {
                zoom: 3,
                center: result[0].geometry.location,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"), myOptions);
            //map.setCenter(result[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: result[0].geometry.location
            });
        } else {
            Alert("Geocode was not successful for the following reason: "+ Status); // address not found
        }
    });

}

// ]]>

I know the information is retrieved properly because the alert() shows all the retrieved information

Upvotes: 0

Views: 940

Answers (1)

geocodezip
geocodezip

Reputation: 161334

Your showAddress function creates a new map for each marker. If you want to show more than one, you need to create one map and add all the markers to it. Change this:

function showAddress(address) {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({ 'address': address}, function (result, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      // creates a new map object
      var myOptions = {
        zoom: 3,
        center: result[0].geometry.location,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map"), myOptions);
      //map.setCenter(result[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: result[0].geometry.location
      });
    } else {
      Alert("Geocode was not successful for the following reason: "+ Status); // address not found
    }
  });
}

To this:

function showAddress(address, map) {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({ 'address': address}, function (result, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var marker = new google.maps.Marker({
        map: map,
        position: result[0].geometry.location
      });
    } else {
      Alert("Geocode was not successful for the following reason: "+ Status); // address not found
    }
  });
}

And create the map before you call it (somewhere outside of the code you have posted).

Upvotes: 1

Related Questions