Question

我想在一个网页中放置多个谷歌地图我使用谷歌地图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>

google map 1

Google map 2

Answer 1

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

DEMO

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

如何在一个网页中放置多个谷歌地图的地方

1 个答案: