My google Map don't load all locations

Question

I've this google map that "should" load locations and add them to my google map.

It should also add them to a cluster if they are close to each other depending on the zoom level.

My propblem is that it dont seem to load them all. there dont seem to be any error.

Can someone help?

var locations = [{
    lat: 55.674971,
    lng: 12.580891
  },
  {
    lat: 55.674971,
    lng: 12.4
  },
]
$(document).ready(function() {
  codeAddress('Odense');
  codeAddress('Viborg');
  codeAddress('Copenhagen');
  codeAddress('Herningvej9, 8330 Brande');
  codeAddress('Vestergade 24, 9510 Arden');
  codeAddress('Horsens')
  codeAddress('Ove Jensens Alle')
})

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    minZoom: 5,
    center: {
      lat: 56.26392,
      lng: 9.501785
    }
  });

  // Create an array of alphabetical characters used to label the markers.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });
}

function codeAddress(address) {
  $.ajax({
    url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&key=AIzaSyC6B-a580ktINp36CTzg6x_btYI8e_44r8",
    success: function(data) {
      //console.log("lat:" + data.results[0].geometry.location.lat + " lng:" + data.results[0].geometry.location.lng + " Adresse = " + address);
      locations.push({
        "lat": data.results[0].geometry.location.lat,
        "lng": data.results[0].geometry.location.lng
      })
    },
    error: function(data) {

    }
  })
}

$(document).ready(function() {
  function reloadMarkers() {

    // Loop through markers and set map to null for each
    for (var i = 0; i < markers.length; i++) {

      markers[i].setMap(null);
    }
  }
});

#map {
  height: 300px;
  width: 300px;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6B-a580ktINp36CTzg6x_btYI8e_44r8&callback=initMap">
</script>
<div id="map"></div>

Answer 1

geo coder response your all location and render marker on make. this code have maximum capability to render multiple marker with cluster. and bound map is an option is you don't want it make it comment.

$('#map').height(window.innerHeight);
 
var map = [];
map.Init = null;
map.map = null;
map.MapObj = null;
map.MarkerLoad = [];
map.Markers = null;
map.location = null;
map.locationData = [];
map.Request = null;
map.cluster = null;
map.bound = null;
map.boundObj = null;
map.geocoder = new google.maps.Geocoder();
map.locationData = [
   'Odense',
   'Viborg',
   'Copenhagen',
   'Herningvej9, 8330 Brande',
   'Vestergade 24, 9510 Arden',
   'Horsens',
   'Ove Jensens Alle'

];

map.Init = function () {
    map.map();
    map.location();

     // Option method to bound google map to show all markers 
}
map.map = function () {

    map.MapObj = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(30.3753, 69.3451),
        zoom: 10
    });

}
map.bound = function () {
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < map.MarkerLoad.length; i++) {
        bounds.extend(map.MarkerLoad[i].position);
    }
    map.MapObj.fitBounds(bounds);

}
map.location = function () {

    for (var i = 0; i < map.locationData.length; i++) {
        map.Request(map.locationData[i]);
    }

}
map.Markers = function (position) {
    var Marker = new google.maps.Marker({
        position: position,
        map:map.MapObj
    })
    map.MarkerLoad.push(Marker);
     
}
map.Request = function (location) {
    map.geocoder.geocode({'address': location}, function(results, status) {
        if (status === 'OK') {
            map.MapObj.setCenter(results[0].geometry.location);

            map.Markers(results[0].geometry.location);

            if (map.locationData.length == map.MarkerLoad.length) {
                map.bound();
                map.cluster(map.MarkerLoad);
            }
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
       
    })
}
map.cluster = function (markers) {
    var markerCluster = new MarkerClusterer(map.MapObj, markers, {
        imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    });
}

map.Init();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        html body{
            margin:0px;
            padding:0px;
        }
        #map{
            width:100%;
        }
    </style>
</head>
<body>
    <div id="map">

    </div>
    <script src="Scripts/jquery-3.1.1.js"></script>
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6B-a580ktINp36CTzg6x_btYI8e_44r8"></script>

    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script src="Scripts/map.js"></script>
</body>
</html>

Answer 2

Your issue is due to the the asyncronous nature of the Ajax calls (in codeAddress) to get the coordinates of the markers. The full list of markers might not be complete when you create the new MarkerClusterer(map, markers, {...}).

Since it's not advisable to do syncronous calls, you need to make sure that you create (or update) the markers cluster once all codeAddress ajax calls are completed. One solutions would be to keep track of the number of completed ajax requests in a variable ajax_completed and compare it to the total number of markers.

I modified your code a bit to show how to do it

var locations = [{
    lat: 55.674971,
    lng: 12.580891
  },
  {
    lat: 55.674971,
    lng: 12.4
  },
];
var ajax_completed = 0;
var ajax_reqs_len = 12;
var markers;
var markerCluster;
var map;
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

$(document).ready(function() {
  codeAddress('Odense');
  codeAddress('Viborg');
  codeAddress('Copenhagen');
  codeAddress('Herningvej9, 8330 Brande');
  codeAddress('Vestergade 24, 9510 Arden');
  codeAddress('Horsens');
  codeAddress('Ove Jensens Alle');
  codeAddress('Aarhus');
  codeAddress('Hamburg');
  codeAddress('Aalborg');
  codeAddress('Skive');
  codeAddress('Herning');
})

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    minZoom: 5,
    center: {
      lat: 56.26392,
      lng: 9.501785
    }
  });
 
  // it wouldn't make sense to add the markers cluster now because ajax requests are not all complete yet
  console.log("Number of completed requests: ", ajax_completed);

}

function codeAddress(address) {
  $.ajax({
    url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&key=AIzaSyC6B-a580ktINp36CTzg6x_btYI8e_44r8",
    success: function(data) {
      locations.push({
        "lat": data.results[0].geometry.location.lat,
        "lng": data.results[0].geometry.location.lng
      })
    },
    error: function(data) {},
    complete: function() {
      ajax_completed++;
      if (ajax_completed == ajax_reqs_len) {
        // if all ajax requests are complete
        console.log("All requests completed: ", ajax_completed);
        markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });
        markerCluster = new MarkerClusterer(map, markers, {
          imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
        });
      }
    }
  })
}

#map {
  height: 300px;
  width: 300px;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6B-a580ktINp36CTzg6x_btYI8e_44r8&callback=initMap">
</script>
<div id="map"></div>

PS I was able to reproduce your error by adding a couple of new addresses and re-running the script