谷歌地图地方 Javascript API

Question

I am working on a project that i need to display 2 Google maps places on the same page.我正在做一个项目，我需要在同一页面上显示 2 个 Google 地图位置。 Everything works fine when i display only 1 place, as soon as i add the second one, the first stops showing, It will show only 1 at a time, if i disable the first one, it will show the second one.当我只显示 1 个位置时一切正常，只要我添加第二个，第一个停止显示，它一次只显示 1 个，如果我禁用第一个，它将显示第二个。 I am a beginner in Javascript, if someone can help me out.如果有人可以帮助我，我是 Javascript 的初学者。 Note this has my API key only once, when i had it twice i got an error from google maps.请注意，这只有一次我的 API 密钥，当我拥有两次时，我从谷歌地图中收到错误消息。

<HTML>
  <div id="map1" style="height:500px;">
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places&callback=initMap"></script>
    <script>
      function initMap() {
        var map1 = new google.maps.Map(document.getElementById('map1'), {
          center: {
            lat: 40.0527839,
            lng: -74.163964
          },
          zoom: 15
        });

        var infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map1);

        service.getDetails({
          placeId: 'ChIJ-Wn_paSDwYkREENXsJ--cng'
        }, function(place, status) {
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            var marker = new google.maps.Marker({
              map: map1,
              position: place.geometry.location
            });
            map1.setCenter(place.geometry.location);
            map1.addListener('tilesloaded', function() {

              infowindow.setContent('<div> <strong>' + place.name + ' ' +
                place.formatted_address + '</strong></div>' +
                place.opening_hours.weekday_text[6] + '<BR>' +
                place.opening_hours.weekday_text[0] + '<BR>' +
                place.opening_hours.weekday_text[1] + '<BR>' +
                place.opening_hours.weekday_text[2] + '<BR>' +
                place.opening_hours.weekday_text[3] + '<BR>' +
                place.opening_hours.weekday_text[4] + '<BR>' +
                place.opening_hours.weekday_text[5]);
            });
            infowindow.open(map1, marker);
          }
        });
      }
    </script>
  </div>
  <div id="map" style="height:500px;">

    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {
            lat: -33.866,
            lng: 151.196
          },
          zoom: 15
        });

        var infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);

        service.getDetails({
          placeId: 'ChIJ5zCkBzpFwokRlW13makMfEM'
        }, function(place, status) {
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            var marker = new google.maps.Marker({
              map: map,
              position: place.geometry.location
            });
            map.setCenter(place.geometry.location);
            map.addListener('tilesloaded', function() {

              infowindow.setContent('<div><strong>' + place.name + ' ' +
                place.formatted_address + '</strong></div>' +
                place.opening_hours.weekday_text[6] + '<BR>' +
                place.opening_hours.weekday_text[0] + '<BR>' +
                place.opening_hours.weekday_text[1] + '<BR>' +
                place.opening_hours.weekday_text[2] + '<BR>' +
                place.opening_hours.weekday_text[3] + '<BR>' +
                place.opening_hours.weekday_text[4] + '<BR>' +
                place.opening_hours.weekday_text[5]);
            });
            infowindow.open(map, marker);
          }
        });
      }
    </script>
  </div>
</html>

Answer 1

To help you understand how to implement xomena's advice please check out this working jsfiddle .为了帮助您了解如何实施 xomena 的建议，请查看此有效的 jsfiddle 。

Full code below:完整代码如下：

<div id="map1" style="height:500px;"></div>
<div id="map2" style="height:500px;"></div>
<script>
  function initMap() {
    var map1 = new google.maps.Map(document.getElementById('map1'), {
      center: {
        lat: 40.0527839,
        lng: -74.163964
      },
      zoom: 15
    });

    var infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map1);

    service.getDetails({
      placeId: 'ChIJ-Wn_paSDwYkREENXsJ--cng'
    }, function(place, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        var marker = new google.maps.Marker({
          map: map1,
          position: place.geometry.location
        });
        map1.setCenter(place.geometry.location);
        map1.addListener('tilesloaded', function() {

          infowindow.setContent('<div> <strong>' + place.name + ' ' +
            place.formatted_address + '</strong></div>' +
            place.opening_hours.weekday_text[6] + '<BR>' +
            place.opening_hours.weekday_text[0] + '<BR>' +
            place.opening_hours.weekday_text[1] + '<BR>' +
            place.opening_hours.weekday_text[2] + '<BR>' +
            place.opening_hours.weekday_text[3] + '<BR>' +
            place.opening_hours.weekday_text[4] + '<BR>' +
            place.opening_hours.weekday_text[5]);
        });
        infowindow.open(map1, marker);
      }
    });

    var map2 = new google.maps.Map(document.getElementById('map2'), {
      center: {
        lat: -33.866,
        lng: 151.196
      },
      zoom: 15
    });

    var infowindow2 = new google.maps.InfoWindow();
    var service2 = new google.maps.places.PlacesService(map2);

    service2.getDetails({
      placeId: 'ChIJ5zCkBzpFwokRlW13makMfEM'
    }, function(place, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        var marker2 = new google.maps.Marker({
          map: map2,
          position: place.geometry.location
        });
        map2.setCenter(place.geometry.location);
        map2.addListener('tilesloaded', function() {

          infowindow2.setContent('<div><strong>' + place.name + ' ' +
            place.formatted_address + '</strong></div>' +
            place.opening_hours.weekday_text[6] + '<BR>' +
            place.opening_hours.weekday_text[0] + '<BR>' +
            place.opening_hours.weekday_text[1] + '<BR>' +
            place.opening_hours.weekday_text[2] + '<BR>' +
            place.opening_hours.weekday_text[3] + '<BR>' +
            place.opening_hours.weekday_text[4] + '<BR>' +
            place.opening_hours.weekday_text[5]);
        });
        infowindow2.open(map2, marker2);
      }
    });

  }

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

Hope this helps!希望这可以帮助！

谷歌地图地方 Javascript API

问题描述

1 个解决方案

解决方案1
0 2020-01-28 11:59:54

谷歌地图地方 Javascript API

问题描述

1 个解决方案

解决方案1 0 2020-01-28 11:59:54

解决方案1
0 2020-01-28 11:59:54