会社案内やショップ案内のページで、グーグルマップを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を設置する！
