先日、自称イケてるgoogleMapをAPIを使って実装しました。カスタム オーバーレイ用のpng画像が出来上がったの報告を受けたので早速カスタムオーバーレイでpng画像をかぶせた時てしました。 以下その時のメモ。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(35.689901, 139.6982);
var myOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var m_latlng = new google.maps.LatLng(35.689901, 139.6982);
var marker = new google.maps.Marker({
position: m_latlng,
map: map
});
var styleOptions = [{
featureType:"transit.station",stylers:[{visibility: "off"}]
}, {
//省略
}, {
featureType: "poi",stylers: [{ visibility: "off" }]
}
];
var lopanType = new google.maps.StyledMapType(styleOptions);
map.mapTypes.set('noText', lopanType);
map.setMapTypeId('noText');
}
var neBound = new google.maps.LatLng(35.******, 139.******); // 北東(上, 右)
var swBound = new google.maps.LatLng(35.******, 139.******); // 南西(下, 左)
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var srcImage = './img/map_ce.png';
overlay = new USGSOverlay(bounds, srcImage, map);
}
/* カスタム オーバーレイ */
function USGSOverlay(bounds, image, map) {
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.div_ = null;
this.setMap(map);
}
USGSOverlay.prototype = new google.maps.OverlayView();
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.border = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
div.appendChild(img);
this.div_ = div;
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
}
USGSOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
}
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
とりあえずこれで実現できました。なんとなくわかったけど説明はできないです...。
あとかぶせる画像の緯度経度をあらかじめ指定しおかないと、あとで悲しいことになります。簡単にできる方法ないかしら･‥？