2017-05-02 6 views
0

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

  1. placing multiple markers on google map from array.
  2. placing multiple markers on a google map.

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); 
     } 
    } 
}); 

Abbildung 1: Figure 1


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


Abbildung 2: Figure 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!


+0

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

+0

traurig, ja, ich dachte schon, das wäre das Problem, aber weiß nicht, wie man das löst –

+0

Bewegen Sie das aus der Schleife? – SeanKendle

Antwort

2

Bitte lesen Sie meine Kommentare sorgfältig. Ich habe vielleicht ein paar Dinge verpasst, ich bin in Eile, dies bei der Arbeit zu tun. Ich habe eine Menge von Code vereinfacht und zusätzliche Service-Anrufe entfernt usw.

Edit: Ich habe hinzugefügt, eine Karte Variable die Karte zoomen und in der Mitte nach der Platzierung Markierungen

bearbeiten setzen begrenze 2: Ich habe eine Google Maps-Rückruffunktion hinzugefügt, um die Race-Bedingung zu beseitigen, die Sie ohne Zugriff auf den Namespace google verlassen hat. Seien Sie sicher, YOUR_API_KEY

Zuerst bewegen, um die tatsächliche Karte Initialisierung aus der Schleife zu ersetzen:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" 
    async defer></script> 

<script> 
    var startLatLng, //change this to some value near to where the map will end up 
     allMarkers = [], //keep a global copy of your markers 
     mapPointsBounds = [], //map bounds of all markers 
     map; //copy of the map 

    //Google will call this when it's ready, it's a query string in the script tag above `&callback=initMap`: 
    function initMap() { 
     startLatLng = new google.maps.LatLng([0, 0]); 
     mapPointsBounds = new google.maps.LatLngBounds(); 

     map = new google.maps.Map(document.getElementById('map'), { 
      center: startLatLng, 
      zoom: 13 
     }); 

     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); 

        //let's just send the object, this is unnecessary: 
        //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(); 

        //Change this function name to "addMapMarker", send in the results object 
        addMapMarker(results[i], i); 
       } 

       //finally, fitBounds on map to set zoom and center: 
       map.fitBounds(mapPointsBounds); 
      } 
     }); 
    } 

    //I would change the name of this function to "addMapMarker" or something similar 
    function addMapMarker(markerInfo, i) { 
     //why are you initializing "i" again if you're passing it in? 
     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 - why? Why not send the info into the function? 
     /* Is this really necessary again? 
     service.getDetails({ 
      placeId: markerInfo.place_id 
     }, 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: markerInfo.geometry.location, 
      map: map, 
      markerInfo: markerInfo //you can store anything in the map point 
     }); 

     allMarkers.push(marker); //keeping all markers in an array 
     mapPointsBounds.extend(markerInfo.geometry.location); //extend bounds to contain this marker 


     //this is the info if you click the marker 
     //you're running a function, then returning a function... just put a simple function here: 
     google.maps.event.addListener(marker, 'click', function (marker, i) { 
      //return function() { 
      infowindow.setContent('<div><strong>' + marker.markerInfo.name + '</strong><br>' + 'Place ID: ' + marker.markerInfo.place_id + '<br>' + marker.markerInfo.formatted_address + '</div>'); 
      infowindow.open(map, marker); 
      //} 
     }); 
    } 
</script> 
+0

ja, das funktioniert, aber es ist nicht die volle Funktionalität von dem, was ich mir wünsche, da ich immer noch in der Lage sein möchte, in die zu zoomen Stelle wo die meisten Marker sind! aber ich habe dir eine Stimme gegeben, da du mir schon sehr geholfen hast! –

+0

Gib es ein anderes Aussehen, fügte hinzu, dass – SeanKendle

+0

Ich versuche es, aber ich bekomme einige Fehler: 'setMap: keine Instanz von Map;' –

Verwandte Themen