如何使用 API V3 每页显示多个 Google 地图 [英] How to Display Multiple Google Maps per page with API V3
问题描述
我有以下脚本.我想让两个地图都出现在页面上,但无论我尝试什么,我都只能显示第一个地图 initialize() ……第二个没有.有什么建议?(另外,我无法在代码中添加它,但是第一张地图显示在 <div id="map_canvas"></div><div id="route"><;/div>
谢谢!
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>
推荐答案
以下是我如何使用 Google Map API V3
在同一页面上生成多个地图.请注意,这是解决上述问题的现成代码.
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.
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
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屋!