Question

我目前正在创建一个餐馆（地点）html文件的草稿页面。

我希望每个目的地都有一个谷歌地图窗口，但是当试图加载超过2个时，其中一些拒绝显示，而其他人只在刷新页面几次后才起作用，而且看起来很不稳定。 / p>

每个代码：

HTML

<!-----------------MAP FOR ST.KILDA ------------------>
                                <div id="map"></div>
                                    <script>
                                      function initMap() {
                                        var stkilda = {lat: -37.866868, lng: 144.9753293};
                                        var map = new google.maps.Map(document.getElementById('map'), {
                                          zoom: 15,
                                          center: stkilda
                                        });
                                        var marker = new google.maps.Marker({
                                          position: stkilda,
                                          map: map
                                        });
                                      }
                                    </script>
                                    <script async defer
                                    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZNx6dX2APjYUz5jzCXzsFuqS4O7s-v38&callback=initMap">
                                    </script>
                                <!----------------- END OF MAPS --------------------->
<!-----------------MAP FOR collingwood ------------------>
                                <div id="mapp"></div>
                                    <script>
                                      function initMap() {
                                        var collingwood = {lat: -37.8179145, lng: 104.9973313};
                                        var mapp = new google.maps.Map(document.getElementById('mapp'), {
                                          zoom: 15,
                                          center: collingwood
                                        });
                                        var markerr = new google.maps.Marker({
                                          position: collingwood,
                                          map: mapp
                                        });
                                      }
                                    </script>
                                    <script async defer
                                    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZNx6dX2APjYUz5jzCXzsFuqS4O7s-v38&callback=initMap">
                                    </script>
                                <!----------------- END OF MAPS --------------------->

<!-----------------MAP FOR MELBOURNE ------------------>
                                <div id="mappp"></div>
                                    <script>
                                      function initMap() {
                                        var melbourne = {lat: -37.8179145, lng: 144.9973313};
                                        var mappp = new google.maps.Map(document.getElementById('mappp'), {
                                          zoom: 15,
                                          center: melbourne
                                        });
                                        var markerrr = new google.maps.Marker({
                                          position: melbourne,
                                          map: mappp
                                        });
                                      }
                                    </script>
                                    <script async defer
                                    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZNx6dX2APjYUz5jzCXzsFuqS4O7s-v38&callback=initMap">
                                    </script>
                                <!----------------- END OF MAPS --------------------->

Answer 1

以下是我用于在单个页面上生成3个地图的示例

格式化道歉。

({
loadMap: function() {
var styles;
  styles = [
    {
      featureType: "all",
      stylers: [
        {
          saturation: -92
        }, {
          hue: "#2A00FF"
        }, {
          visibility: "simplified"
        }, {
          gamma: 2
        }
      ]
    }
  ];
  return $.getScript("https://maps.googleapis.com/maps/api/js?key=APIKEY", function() {
    var mapCanvas1, mapCanvas2, mapCanvas3, mapOptions1, mapOptions2, mapOptions3;
    mapCanvas1 = document.getElementById('map1');
    mapCanvas2 = document.getElementById('map2');
    mapCanvas3 = document.getElementById('map3');
    mapOptions1 = {
      center: new google.maps.LatLng(x, y),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false,
      mapTypeControl: false,
      streetViewControl: false,
      styles: styles,
      draggable: isDraggable
    };
    mapOptions2 = {
      center: new google.maps.LatLng(x, y),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false,
      mapTypeControl: false,
      streetViewControl: false,
      styles: styles,
      draggable: isDraggable
    };
    mapOptions3 = {
      center: new google.maps.LatLng(x, y),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false,
      mapTypeControl: false,
      streetViewControl: false,
      styles: styles,
      draggable: isDraggable
    };
    this.map1 = new google.maps.Map(mapCanvas1, mapOptions1);
    this.map2 = new google.maps.Map(mapCanvas2, mapOptions2);
    this.map3 = new google.maps.Map(mapCanvas3, mapOptions3);
    googleMap.map1 = this.map1;
    googleMap.map2 = this.map2;
    return googleMap.map3 = this.map3;
  });}});

为什么我的网站上不能有超过1-2张谷歌地图？

1 个答案: