Meine Google-Karte laden nicht alle Standorte

Question

Ich habe diese Google-Karte, die Standorte laden und sie zu meiner Google-Karte hinzufügen soll.

Sie sollten sie auch zu einem Cluster hinzufügen, wenn sie abhängig von der Zoomstufe nahe beieinander liegen.

Mein propblem ist, dass es scheint nicht alle zu laden. Es scheint keinen Fehler zu geben.

Kann jemand helfen?

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

Ihr Problem ist, aufgrund dem die asynchrone Natur der Ajax-Aufrufe (in codeAddress) die Koordinaten des Markers zu erhalten. Die vollständige Liste der Markierungen ist möglicherweise nicht vollständig, wenn Sie die new MarkerClusterer(map, markers, {...}) erstellen.

Da es nicht ratsam ist synchrone Aufrufe durchzuführen, müssen Sie sicherstellen, dass Sie den Marker-Cluster erstellen (oder aktualisieren), sobald alle codeAddress Ajax-Aufrufe abgeschlossen sind. Eine Lösung wäre, die Anzahl der abgeschlossenen Ajax-Anfragen in einer Variablen ajax_completed zu verfolgen und sie mit der Gesamtzahl der Markierungen zu vergleichen.

ich Ihren Code ein wenig geändert zu zeigen, wie es ich war in der Lage zu reproduzieren Ihre Fehler

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 tun ein paar neue Adressen durch Hinzufügen und erneut Ausführen des Skripts

Answer 2

Geo-Coder Antwort alle Ihre Lage und machen Markierung auf machen. Dieser Code kann maximal mehrere Marker mit Cluster rendern. und gebundene Karte ist eine Option, die Sie nicht kommentieren wollen.

$('#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>