如何使用API​​ V3在每页上显示多个Google地图 [英] How to Display Multiple Google Maps per page with API V3

问题描述

我有以下脚本。我想让这两个地图都出现在页面上，但无论我尝试什么，我只能得到第一个地图initialize（）来显示......第二个地图不会。有什么建议么？ （另外，我不能将它添加到代码中，但是第一个地图显示在< div id =map_canvas>< / div>< div id =route >< / div>
Thanks！

 < script type = text / javascript> 
 //创建一个方向对象并注册一个地图和DIV来存放
 //得到的计算方向
 
 var map; 
 var directionsPanel; 
 var directions; 
 
函数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：<？php echo $ LastCallGoogleAddress;？>）; 
 
 map.addControl（new GSmallMapControl（））; 
 map.addControl（new GMapTypeControl（））; 
} 
 
< / script> 
 
 
< div id =map_canvas2style =w IDþ：200像素; height：200px;>< / div> 
< div id =route2>< / div> 
 
< script type =text / javascript> ; 
 //创建一个方向对象并注册一个地图和DIV来存放
 //得到的计算方向
 
 var map2; 
 var directionsPanel2; 
 var direction2; 
 
函数initialize2（）{
 map2 = new GMap（document.getElementById（map_canvas2））; 
 map2.setCenter（new GLatLng（41.1255275， - ）; 
 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> 
  

解决方案

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

HTML位

 < div id =map_canvasstyle =width：700px; height：500px; margin-left：80px;>< / div> 
< div id =map_canvas2style =width：700px; height：500px; margin-left：80px;>< / div> 
  

Javascript初始化地图

 < script type =text / javascript> 
 var map，map2; 
 
函数初始化（条件）{
 //创建地图
 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> 
  

I have the following script. And I want to make both maps appear on the page, but no matter what I try I can only get the first map initialize() to display... the second one doesn't. Any suggestions? (also, I can't add it in the code, but the first map is being displayed in <div id="map_canvas"></div><div id="route"></div> Thanks!

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

解决方案

Here is how I have been able to generate multiple maps on the same page using Google Map API V3. Kindly note that this is an off the cuff code that addresses the issue above.

The HTML bit

<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 for map initialization

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

这篇关于如何使用API​​ V3在每页上显示多个Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！