如何使用 API V3 在每页显示多个 Google 地图

Posted

技术标签:

【中文标题】如何使用 API V3 在每页显示多个 Google 地图【英文标题】：How to Display Multiple Google Maps per page with API V3 【发布时间】：2011-05-03 17:41:00 【问题描述】：

我有以下脚本。而且我想让两个地图都出现在页面上，但无论我尝试什么，我只能让第一个地图 initialize() 显示......第二个地图没有。有什么建议？ （另外，我无法在代码中添加它，但第一张地图显示在<div id="map_canvas"></div><div id="route"></div> 谢谢！

<script type="text/javascript"> 
// Create a directions object and register a map and DIV to hold the 
// resulting computed directions

var map;
var directionsPanel;
var directions;

function initialize() 
  map = new GMap(document.getElementById("map_canvas"));
  map.setCenter(new GLatLng(41.1255275,-73.6964801), 15);
  directionsPanel = document.getElementById("route");
  directions = new GDirections(map, directionsPanel);
  directions.load("from: Armonk Fire Department, Armonk NY to: <?php echo $LastCallGoogleAddress;?> ");

  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());


</script> 


<div id="map_canvas2" style="width:200px; height:200px;"></div>
<div id="route2"></div>

<script type="text/javascript"> 
// Create a directions object and register a map and DIV to hold the 
// resulting computed directions

var map2;
var directionsPanel2;
var directions2;

function initialize2() 
  map2 = new GMap(document.getElementById("map_canvas2"));
  map2.setCenter(new GLatLng(41.1255275,-73.6964801), 15);
  directionsPanel2 = document.getElementById("route2");
  directions2 = new GDirections(map2, directionsPanel2);
  directions2.load("from: ADDRESS1 to: ADDRESS2 ");

  map2.addControl(new GSmallMapControl());
  map2.addControl(new GMapTypeControl());


</script> 

<script type="text/javascript">
function loadmaps()
    initialize();
    initialize2();  

</script>

【问题讨论】：

【参考方案1】：

以下是我使用Google Map API V3 在同一页面上生成多个地图的方法。请注意，这是解决上述问题的即兴代码。

html 位

<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;"></div>
<div id="map_canvas2" style="width:700px; height:500px; margin-left:80px;"></div>

用于地图初始化的Javascript

<script type="text/javascript">
var map, map2;

function initialize(condition) 
    // create the maps
    var myOptions = 
        zoom: 14,
        center: new google.maps.LatLng(0.0, 0.0),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);

</script>

【讨论】：

我尝试了您的代码，但仍然无法加载其中一张地图。 Philar 的回答有效。请记住，还要使用第二张地图将 css 高度和宽度应用于新 div！我刚刚浪费了半个小时，想知道为什么第二张地图不会出现并且没有错误，而且我的潜水高度和宽度都为 zer0 ：|【参考方案2】：

我刚刚将 Google 地图添加到我公司的 CMS 产品中。我的代码允许在一个页面中使用多个地图。

注意事项：

我使用 jQuery 我把地址放在内容里，然后解析出来动态生成地图 我在我的地图中包含一个标记和一个信息窗口

HTML：

<div class="block maps first">
    <div class="content">
        <div class="map_canvas">
            <div class="infotext">
                <div class="location">Middle East Bakery & Grocery</div>
                <div class="address">327 5th St</div>
                <div class="city">West Palm Beach</div>
                <div class="state">FL</div>
                <div class="zip">33401-3995</div>
                <div class="country">USA</div>
                <div class="phone">(561) 659-4050</div>
                <div class="zoom">14</div>
            </div>
        </div>
    </div>
</div>
<div class="block maps last">
    <div class="content">
        <div class="map_canvas">
            <div class="infotext">
                <div class="location">Global Design, Inc</div>
                <div class="address">3434 SW Ash Pl</div>
                <div class="city">Palm City</div>
                <div class="state">FL</div>
                <div class="zip">34990</div>
                <div class="country">USA</div>
                <div class="phone"></div>
                <div class="zoom">17</div>
            </div>
        </div>
    </div>
</div>

代码：

$(document).ready(function() 
    $maps = $('.block.maps .content .map_canvas');
    $maps.each(function(index, Element) 
        $infotext = $(Element).children('.infotext');

        var myOptions = 
            'zoom': parseInt($infotext.children('.zoom').text()),
            'mapTypeId': google.maps.MapTypeId.ROADMAP
        ;
        var map;
        var geocoder;
        var marker;
        var infowindow;
        var address = $infotext.children('.address').text() + ', '
                + $infotext.children('.city').text() + ', '
                + $infotext.children('.state').text() + ' '
                + $infotext.children('.zip').text() + ', '
                + $infotext.children('.country').text()
        ;
        var content = '<strong>' + $infotext.children('.location').text() + '</strong><br />'
                + $infotext.children('.address').text() + '<br />'
                + $infotext.children('.city').text() + ', '
                + $infotext.children('.state').text() + ' '
                + $infotext.children('.zip').text()
        ;
        if (0 < $infotext.children('.phone').text().length) 
            content += '<br />' + $infotext.children('.phone').text();
        

        geocoder = new google.maps.Geocoder();
        geocoder.geocode('address': address, function(results, status) 
            if (status == google.maps.GeocoderStatus.OK) 
                myOptions.center = results[0].geometry.location;
                map = new google.maps.Map(Element, myOptions);
                marker = new google.maps.Marker(
                    map: map,
                    position: results[0].geometry.location,
                    title: $infotext.children('.location').text()
                );
                infowindow = new google.maps.InfoWindow('content': content);
                google.maps.event.addListener(map, 'tilesloaded', function(event) 
                    infowindow.open(map, marker);
                );
                google.maps.event.addListener(marker, 'click', function() 
                    infowindow.open(map, marker);
                );
             else 
                alert('The address could not be found for the following reason: ' + status);
            
        );
    );
);

【讨论】：

出于某种原因，每次我使用它时，它只会让 2 div 消失。我正在使用与上面完全相同的代码。我如何使它成为jQuery.noConflict() 函数？ @Jared - 在调用本地 JavaScript 代码之前，您是否链接到 Google Maps API JavaScript？ - maps.google.com/maps/api/js?sensor=false @Mike - 你的意思是一个使用代码的示例网站？这是一个：habitatmartin.org/p/89/contact-us @Jared - 我不熟悉使用jQuery.noConflict() 还要确保从指向 Google 脚本的链接中删除“异步延迟”。否则你会得到类似“谷歌未定义”的信息。【参考方案3】：

OP 想要两张特定的地图，但如果您想在一个页面上显示动态数量的地图（例如零售商位置列表），则需要采用另一条路线。 Google 地图 API 的标准实现将地图定义为全局变量，这不适用于动态数量的地图。这是我在没有全局变量的情况下解决此问题的代码：

function mapAddress(mapElement, address) 
var geocoder = new google.maps.Geocoder();

geocoder.geocode( 'address': address , function (results, status) 
    if (status == google.maps.GeocoderStatus.OK) 
        var mapOptions = 
            zoom: 14,
            center: results[0].geometry.location,
            disableDefaultUI: true
        ;
        var map = new google.maps.Map(document.getElementById(mapElement), mapOptions);
        var marker = new google.maps.Marker(
            map: map,
            position: results[0].geometry.location
        );
     else 
        alert("Geocode was not successful for the following reason: " + status);
    
);

只需将每张地图的ID和地址传递给绘制地图并标记地址的函数即可。

【讨论】：

好答案，这比其他解决方案硬编码要好得多，而且非常可重用，谢谢 Daniel Hedenström 简洁、清晰且可重复使用。谢谢 - 这对我有很大帮助。【参考方案4】：

这是另一个例子，如果你有 long 和 lat，在我的例子中，使用 Umbraco Google Map Datatype 包并输出带有“map”类的 div 列表，例如。

<div class="map" id="UK">52.21454000000001,0.14044490000003407,13</div>

我的 JavaScript 使用基于 Cultiv Razor examples 的 Google Maps API v3

$('.map').each(function (index, Element) 
    var coords = $(Element).text().split(",");
    if (coords.length != 3) 
        $(this).display = "none";
        return;
    
    var latlng = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1]));
    var myOptions = 
        zoom: parseFloat(coords[2]),
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: false,
        mapTypeControl: true,
        zoomControl: true,
        zoomControlOptions: 
            style: google.maps.ZoomControlStyle.SMALL
        
    ;
    var map = new google.maps.Map(Element, myOptions);

    var marker = new google.maps.Marker(
        position: latlng,
        map: map
    );
);

【讨论】：

一直在胡闹，把它推迟了，这个答案解决了我的问题！【参考方案5】：

我需要使用动态位置加载动态数量的谷歌地图。所以我最终得到了这样的东西。希望能帮助到你。我将 LatLng 添加为地图 div 上的数据属性。

所以，只需使用“地图”类创建 div。每个地图画布都可以像这样具有各种 ID 和 LatLng。当然你可以为缩放等设置各种数据属性...

也许代码可能更简洁，但对我来说效果很好。

<div id="map123" class="maps" data-gps="46.1461154,17.1580882"></div>
<div id="map456" class="maps" data-gps="45.1461154,13.1080882"></div>

  <script>
      var map;
      function initialize() 
        // Get all map canvas with ".maps" and store them to a variable.
        var maps = document.getElementsByClassName("maps");

        var ids, gps, mapId = '';

        // Loop: Explore all elements with ".maps" and create a new Google Map object for them
        for(var i=0; i<maps.length; i++) 

          // Get ID of single div
          mapId = document.getElementById(maps[i].id);

          // Get LatLng stored in data attribute. 
          // !!! Make sure there is no space in data-attribute !!!
          // !!! and the values are separated with comma !!!
          gps = mapId.getAttribute('data-gps');

          // Convert LatLng to an array
          gps = gps.split(",");

          // Create new Google Map object for single canvas 
          map = new google.maps.Map(mapId, 
            zoom: 15,
            // Use our LatLng array bellow
            center: new google.maps.LatLng(parseFloat(gps[0]), parseFloat(gps[1])),
            mapTypeId: 'roadmap',
            mapTypeControl: true,
            zoomControlOptions: 
                position: google.maps.ControlPosition.RIGHT_TOP
            
          );

          // Create new Google Marker object for new map
          var marker = new google.maps.Marker(
            // Use our LatLng array bellow
            position: new google.maps.LatLng(parseFloat(gps[0]), parseFloat(gps[1])),
            map: map
          );
        
      
  </script>

【讨论】：

【参考方案6】：

取自这些示例 - guide，implementation。

    使用适当的id 设置您的&lt;div&gt; 在调用foundation 时包含 Google 地图选项。 包括foundation 和rem js 库。

示例 -

index.html -

<div class="row">
   <div class="large-6 medium-6 ">
      <div id="map_canvas" class="google-maps">
      </div>
   </div>
   <br>
   <div class="large-6 medium-6 ">
      <div id="map_canvas_2" class="google-maps"></div>
   </div>
</div>
<script src="/js/foundation.js"></script>
<script src="/js/google_maps_options.js"></script>
<script src="/js/rem.js"></script>
<script>
   jQuery(function()
       setTimeout(initializeGoogleMap,700);
   );
</script>

google_maps_options.js -

function initializeGoogleMap()

    $(document).foundation();
    var latlng = new google.maps.LatLng(28.561287,-81.444465);
    var latlng2 = new google.maps.LatLng(28.507561,-81.482359);

    var myOptions =
    
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    ;

    var myOptions2 =
    
        zoom: 13,
        center: latlng2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    ;


    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2);


    var myMarker = new google.maps.Marker(
    
        position: latlng,
        map: map,
        title:"Barnett Park"
   );

    var myMarker2 = new google.maps.Marker(
    
        position: latlng2,
        map: map2,
        title:"Bill Fredrick Park at Turkey Lake"
    );

【讨论】：

我认为您可能错过了 myOptions 的第一个声明（以防有人试图复制/粘贴此解决方案，因为它看起来不错）【参考方案7】：

你还没有定义一个 id="map_canvas" 的 div，你只有 id="map_canvas2" 和 id="route2"。 div id 需要与 GMap() 构造函数中的参数匹配。

【讨论】：

我有 map_canvas。出于某种原因，它没有让我将它放在问题中的代码中，但我确实在页面中有它，所以这不是问题...... map_canvas 中的地图是显示的地图，但不是地图map_canvas2【参考方案8】：

你可以试试nex方法 

 .map 
            height: 300px;
            width: 100%;

HTML

@foreach(var map in maps)

  <div id="map-@map.Id" lat="@map.Latitude" lng="@map.Longitude" class="map">
  </div>

JavaScript

 <script>
    var maps = [];
    var markers = [];
    function initMap() 
        var $maps = $('.map');
        $.each($maps, function (i, value) 
            var uluru =  lat: parseFloat($(value).attr('lat')), lng: parseFloat($(value).attr('lng')) ;

            var mapDivId = $(value).attr('id');

            maps[mapDivId] = new google.maps.Map(document.getElementById(mapDivId), 
                zoom: 17,
                center: uluru
            );

            markers[mapDivId] = new google.maps.Marker(
                position: uluru,
                map: maps[mapDivId]
            );
        )
    
</script>

<script async defer
        src="https://maps.googleapis.com/maps/api/js?language=ru-Ru&key=YOUR_KEY&callback=initMap">
</script>

【讨论】：

【参考方案9】：

我有一个特定的问题，我有一个单页应用程序，需要在不同的 div 中显示不同的地图，每次一个。我不是以一种非常漂亮的方式解决了它，而是以一种功能性的方式解决了它。我没有使用 display 属性隐藏 DOM 元素，而是使用 visibility 属性来做到这一点。使用这种方法，Google Maps API 可以毫不费力地知道我实例化地图的 div 的尺寸。

【讨论】：

【参考方案10】： 
var maps_qty;
for (var i = 1; i <= maps_qty; i++)
    
        $(".append_container").append('<div class="col-lg-10 grid_container_'+ (i) +'" >' + '<div id="googleMap'+ i +'" style="height:300px;"></div>'+'</div>');
        map = document.getElementById('googleMap' + i);
        initialize(map,i);
    

// Intialize Google Map with Polyline Feature in it.

function initialize(map,i)
    
        map_index = i-1;
        path_lat_long = [];
        var mapOptions = 
            zoom: 2,
            center: new google.maps.LatLng(51.508742,-0.120850)
        ;

        var polyOptions = 
            strokeColor: '#000000',
            strokeOpacity: 1.0,
            strokeWeight: 3
        ;

        //Push element(google map) in an array of google maps
        map_array.push(new google.maps.Map(map, mapOptions));
        //For Mapping polylines to MUltiple Google Maps
        polyline_array.push(new google.maps.Polyline(polyOptions));
        polyline_array[map_index].setMap(map_array[map_index]);
    

// For Resizing Maps Multiple Maps.

google.maps.event.addListener(map, "idle", function()
    
      google.maps.event.trigger(map, 'resize');
    );

map.setZoom( map.getZoom() - 1 );
map.setZoom( map.getZoom() + 1 );

【讨论】：

.append_container 是我们要在其中显示多张地图的容器的类。【参考方案11】：

看看我最近为 Laravel 制作的这个捆绑包！

https://github.com/Maghrooni/googlemap
它可以帮助您在页面中创建一个或多个地图！ 你可以找到课程 
src/googlemap.php

请先阅读自述文件，如果您想在一页中有多个地图，请不要忘记传递不同的 ID

【讨论】：

你为什么要保留鼓励随机字词？ @MattFletcher，这是一个坏习惯，谢谢你的提及。刚刚完成编辑。

以上是关于如何使用 API V3 在每页显示多个 Google 地图的主要内容，如果未能解决你的问题，请参考以下文章

Angular2，Typescript：如何在每页显示一个元素的数组中检查单选按钮？

为啥latex 中表格一直在每页的开始显示？如何让他出现在我想要的位置？

为啥单页应用程序通常必须在每页发出更多请求时更快？

打印时使用 css 在每页上重复标题

在强制 s-s-rS 显示每页中的限制记录数后，将在每页而不是整个组上计算聚合

使用Drupal测验每页多个问题