我有以下脚本。而且我想使两个地图都显示在页面上,但是无论我怎样尝试,我都只能使第一个地图显示initialize(),而第二个地图则没有。有什么建议么?(而且,我无法在代码中添加它,但是在“ <div id="map_canvas"></div><div id="route"></div> 感谢” 中显示了第一张地图!
<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>
这就是我使用能够在同一页面上生成多个地图的方式Google Map API V3。请注意,这是解决上述问题的现成代码。
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>