1

1 つの Web ページに複数の Google マップを配置したい Google マップを読み込むために Google マップ API v3 を使用しています。Web ページに 1 つのマップを作成しましたが、異なる場所の複数の 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>

グーグルマップ 1

グーグルマップ2

4

1 に答える 1