Zuerst möchte ich Ihnen zeigen, welche Lösungen ich habe bereits versucht, so euch sie auch nicht verwenden:Google Places API Ort mehrere Markierungen auf der Karte und zoomen, wo die meisten Marker sind
Wie ich die folgende Schleife durch die Orte:
service.textSearch({query:query}, function(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
//for each result in results.length ++
for (var i = 0; i < results.length; i++) {
//here I'm just setting the names from the variables into a list, to display the names as I show in (Figure 1).
var item = document.createElement('li');
item.appendChild(document.createTextNode(results[i].name));
document.getElementById('results').appendChild(item);
//here I set my variables that are necessary for the markers to work
p_id[i] = results[i].place_id;
lat[i] = results[i].geometry.location.lat();
lng[i] = results[i].geometry.location.lng();
//here I initialize the map with the given values.
initMap(p_id, lat, lng, i);
}
}
});
Da diese Schleife vervollständigt es geht, wo es platziert die Markierungen auf der Karte.
Hinweis: Ich will nicht von den places
loszuwerden, die es wieder schafft, wie es ist sehr nützlich für mich zu haben, und es scheint nicht zu behindern, was ich versuche zu machen.
Wie für den Marker Bestücker auf der Karte selbst:
function initMap(p_id, lat, lng, i) {
//this creates the position of the map
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: lat[i], lng: lng[i]},
zoom: 13
});
var infowindow = new google.maps.InfoWindow(), marker, i;
var service = new google.maps.places.PlacesService(map);
var marker;
//gets the details of the placeid over again
service.getDetails({
placeId: p_id[i]
}, function(place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
//this is where the marker is created with position and animation
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(lat[i], lng[i]),
map: map
});
//this is the info if you click the marker
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + 'Place ID: ' + place.place_id + '<br>' + place.formatted_address + '</div>');
infowindow.open(map, marker);
}
})(marker, i));
}
});
}
Merkwürdigerweise, wenn es nur ein Ort ist, dann 1 Marker zeigt, aber wenn sie mehr Plätze haben, dann gibt es keine Markierungen überhaupt. .. wie ich zeigen in Abbildung 2
Wenn jemand irgendwelche Hinweise hat, um es zu lösen, bitte sagen Sie ihnen. Ich kann es leider nicht selbst herausfinden, obwohl ich schon seit einiger Zeit suche. Ich versuchte, ein Jsfiddle zu machen, aber leider die API ist nicht in der Lage auf jsfddle läuft ...
EDIT:
Der multiple Marker Problem durch SeanKendle gelöst wurde. Das Problem war, wie ich vermutete schon, dass ich mehrere Karten gehalten ... und
ich einfach die maps
aus meiner mapinit
Funktion bewegt und legte sie über meinem service
in der getPlaces
Funktion wie folgt aus:
var map = new google.maps.Map(document.getElementById('map'), {
center: latlng,
zoom: 5
});
service = new google.maps.places.PlacesService(
document.getElementById('attributions') //attributions-container
);
//send a query
service.textSearch({query:query}, function(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var item = document.createElement('li');
item.appendChild(document.createTextNode(results[i].name));
document.getElementById('results').appendChild(item);
p_id[i] = results[i].place_id;
lat[i] = results[i].geometry.location.lat();
lng[i] = results[i].geometry.location.lng();
initMap(p_id, lat, lng, i, map);
}
}
});
Jetzt ist das letzte Problem, das ich gegenüberstelle, dass ich an der Stelle mit den meisten Markern hineinzoomen muss. Jetzt stelle ich einfach nur den lat und lange, wo es als dies beginnen sollte:
var latlng = new google.maps.LatLng(20.540221, -4.042969);
Bereits Dank im Voraus!
Sind Sie die Initialisierung der Karte immer und immer wieder in der 'for' Schleife? Initialisiert das die Karte wirklich? 'initMap (p_id, lat, lng, i);' – SeanKendle
traurig, ja, ich dachte schon, das wäre das Problem, aber weiß nicht, wie man das löst –
Bewegen Sie das aus der Schleife? – SeanKendle