谷歌API的地方在地圖上放置多個標記，並放大到最標記是

Question

首先，我想向您展示的解決方案我已經盡力了，所以你們沒有使用這些之一：

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

當我通過地方下面的循環：

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

---

圖1：

---

由於這個循環完成它去的地方放置地圖上的標記。

注：我不想擺脫它再次創造，因爲這對我來說有非常有用的places的，再加上它似乎並不妨礙我做的嘗試之作。

至於砂礦地圖本身上的標記：

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

如果只有1位，則1個標記顯示出來，但是當他們有更多的地方，則有完全沒有標記很奇怪。如..我顯示圖2

---

圖2：

---

如果有人有任何線索可以解決它，請告訴他們。我似乎無法自拔，儘管我一直在尋找一段時間。我試圖做一個的jsfiddle，但可悲的API不能夠在jsfddle運行...

---

編輯：

的多個標記問題是由SeanKendle解決。問題是像我已經懷疑，我不停地創建多個地圖...

我乾脆搬到了maps了我mapinit功能，並在getPlaces功能把它放在我的service上面是這樣的：

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

---

我現在面臨的最後一個問題是我需要放大標記數最多的地方。現在我只是簡單地設置經緯度，因爲這應該開始：

var latlng = new google.maps.LatLng(20.540221, -4.042969); 

在此先感謝！

---

Answer 1

請仔細閱讀我的意見。我可能錯過了一些東西，我很着急在工作中做這件事。我已經簡化了很多代碼，並去掉了一些額外的服務電話，等

編輯：我添加了一個地圖界限變量設置地圖縮放和中心放置標記後

編輯2：我添加了Google Maps回調函數以消除無法訪問google名稱空間的競爭狀況。務必更換YOUR_API_KEY

首先，將實際的地圖初始化圈外：

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