1

我想在一个网页中放置多个谷歌地图我正在使用 google map api v3 加载谷歌地图，我在网页中制作了单个地图，但我想在不同位置放置多个谷歌地图

这是代码：

<html> 
 <head> 
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
 <title>Google Maps JavaScript API v3 Example: Dynamic Loading</title> 
 <script type="text/javascript"> 
   function handleApiReady() { 
     var myLatlng = new google.maps.LatLng(23.038587, 72.478253); 
     var myOptions = { 
       zoom: 8, 
       center: myLatlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map1 = new google.maps.Map(document.getElementById("map_canvas1"),
myOptions); 

     var map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions); 
   } 
 </script> 
 </head> 
 <body style="margin:0px; padding:0px;"> 
   <div id="map_canvas1" style="width:400px; height:400px"></div>
   <div id="map_canvas2" style="width:400px; height:400px"></div> 
   <script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&callback=handleApiReady
"></script> 
 </body> 
 </html>

谷歌地图 1

谷歌地图 2

4

1 回答 1

1

是什么阻止你尝试。这是一个小提琴，演示了两张不同位置的地图-

演示

JS-

var moptions1 = {
    center: new google.maps.LatLng(22.669, 77.709),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var moptions2 = {
    center: new google.maps.LatLng(22.669, 77.709),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

map1 = new google.maps.Map(document.getElementById("map1"), moptions1);

map2 = new google.maps.Map(document.getElementById("map2"), moptions2);
于 2013-01-03T11:14:27.487 回答