会社案内やショップ案内のページで、グーグルマップを2つ設置する時の
備忘録。
Googlemap APIの読み込み
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
bodyに加える
<body onload="initialaze()">
(function(){ var lng =139.576042; var lat =35.700030; var latlng = new google.maps.LatLng(lat, lng); var myOptions = { zoom: 16, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map_lg = new google.maps.Map( document.getElementById("map_canvas_lg"), myOptions ); var myMarker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), map: map_lg }); var myFukidashi = new google.maps.InfoWindow({ content: "井の頭自然文化園" }); myFukidashi.open(map_lg, myMarker); google.maps.event.addListener(myFukidashi, "closeclick", function() { google.maps.event.addListenerOnce(myMarker, "click", function(event) { myFukidashi.open(map_lg, myMarker); }); }); latlng = new google.maps.LatLng(lat, lng); var myOptions = { zoom: 18, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map_sm = new google.maps.Map( document.getElementById("map_canvas_sm"), myOptions ); var myMarker02 = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), map: map_sm }); var myFukidashi02 = new google.maps.InfoWindow({ content: "井の頭自然文化園" }); myFukidashi02.open(map_sm, myMarker02); google.maps.event.addListener(myFukidashi02, "closeclick", function() { google.maps.event.addListenerOnce(myMarker02, "click", function(event) { myFukidashi02.open(map_sm, myMarker02); }); }); }());
HTML
1カ所目
<div class="ggmap"> <div id="map_canvas_lg"></div> </div><!-- /.ggmap -->
2カ所目
<div class="ggmap_sm"> <div id="map_canvas_sm"></div> </div>
CSS
.map_wrapper { max-width: 640px; min-width: 280px; margin: 20px auto; padding: 4px; border: 1px solid #CCC; } .googlemap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .googlemap iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
参考サイトはこちら
[Google Map V3]地図を複数同時に表示する
ページ内に二つのGoogle Mapを設置する!