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

IT技术 javascript google-maps google-maps-api-3
2021-02-04 10:58:16

我有以下脚本。我想让两个地图都出现在页面上,但无论我尝试什么,我都只能显示第一个地图 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>
6个回答

这是我如何使用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> 
我尝试了您的代码,但仍然无法加载其中一张地图。
2021-03-17 10:58:16
Philar的回答有效。请记住还要将 css 高度和宽度应用到带有第二张地图的新 div 中!!我只是浪费了半个小时想知道为什么第二张地图不会出现并且没有错误并且我的潜水高度和宽度为 zer0 :|
2021-03-24 10:58:16

我刚刚将 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);
            }
        });
    });
});
还要确保从指向 Google 脚本的链接中删除“async defer”。否则你会得到类似“谷歌未定义”的信息。
2021-03-17 10:58:16
@Jared - 我不熟悉使用 jQuery.noConflict()
2021-03-26 10:58:16
@Jared - 在调用本地 JavaScript 代码之前,您是否链接到 Google Maps API JavaScript?- maps.google.com/maps/api/js?sensor=false
2021-04-04 10:58:16
出于某种原因,每次我使用它时,它只会使 2 div 消失。我正在使用与上面完全相同的代码。我如何使它成为一个jQuery.noConflict()功能?
2021-04-08 10:58:16
@Mike - 你的意思是一个使用代码的示例网站?这是一个:habitatmartin.org/p/89/contact-us
2021-04-11 10:58:16

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 和地址传递给函数即可绘制地图并标记地址。

简洁、清晰且可重复使用。谢谢 - 这对我帮助很大。
2021-03-18 10:58:16
很好的答案,这更好,不像其他解决方案那样硬编码,而且非常可重用,谢谢 Daniel Hedenström
2021-03-24 10:58:16

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

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

我的 JavaScript 使用基于Cultiv Razor 示例的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
    });
});
多年来一直在捣乱并推迟这个,这个答案解决了我的问题!
2021-04-03 10:58:16

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

因此,只需创建带有“地图”类的 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>