カスタムオーバーレイでpng画像をかぶせた時のメモ | 電網覚書

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から3年以上経過しています。

先日、自称イケてる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>

Google Maps JavaScript API V3 オーバーレイ

とりあえずこれで実現できました。なんとなくわかったけど説明はできないです...。
あとかぶせる画像の緯度経度をあらかじめ指定しおかないと、あとで悲しいことになります。簡単にできる方法ないかしら･‥？

おすすめ情報