如何在單個網頁中放置多個Google地圖的地點

我想在一個網頁中放置多個Google地圖我正在使用谷歌地圖API v3加載谷歌地圖，我做了單曲圖在網頁中，但我希望把不同的位置如何在單個網頁中放置多個Google地圖的地點

這裏的一個以上的谷歌地圖是代碼：

<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

來源

2013-01-03 chandru

什麼阻止你嘗試。下面是一個說明兩個地圖不同locations-小提琴

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

來源

2013-01-03 11:14:27 Cdeez

如何在單個網頁中放置多個Google地圖的地點

回答

相關問題