人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【最高300ポイント】再質問させて頂きます。Google Mapに自前の画像を表示させて、縮尺ボタンと連動させて拡大・縮小したいと考えています。JavaScriptのサンプルを教えていただけますか。宜しくお願いいたします。

●質問者: er7
●カテゴリ:コンピュータ インターネット
✍キーワード:Google JavaScript MAP ボタン ポイント
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● talepanda
●300ポイント ベストアンサー
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>Google Maps JavaScript API Example</title>
 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key="
 type="text/javascript"></script>
 <script type="text/javascript">
 function TestOvy(){ // location and size, src
 this._x=139.7454;
 this._y=35.65872;
 this._w=0.001;
 this._h=0.001;
 this._src="tmp.jpg";
 }
 TestOvy.prototype = new GOverlay();
 TestOvy.prototype.initialize = function(map) {
 var div = document.createElement("img");div.style.backgroundColor = "pink";div.style.position = "absolute";div.src=this._src;
 map.getPane(G_MAP_MARKER_PANE).appendChild(div);this._div = div;this._map=map;
 }
 TestOvy.prototype.redraw = function(force){
 if (!force) return;
 var m=this._map,z=m.getSize(),s=m.getBounds().toSpan(),p=m.fromLatLngToDivPixel(new GLatLng(this._y,this._x));
 this._div.style.width=z.width*(this._w/s.lng())+"px";
 this._div.style.height=z.height*(this._h/s.lat())+"px";
 this._div.style.left=p.x+"px";
 this._div.style.top=p.y+"px";
 }
 function load() {
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map"));
 map.setCenter(new GLatLng(35.65872,139.7454), 16);
 map.addControl(new GLargeMapControl());
 map.addOverlay(new TestOvy());
 map.addOverlay(new GMarker(new GLatLng(35.65872,139.7454)));
 }
 }
 </script>
 </head>
 <body onload="load()" onunload="GUnload()"><div id="map" style="width: 500px; height: 300px"></div></body>
</html>

みたいな。

マーカーは確認のためにおいてるだけなので、外してもらってもおk

http://www.google.com

◎質問者からの返答

ズバリですね。

回答が来ないと推測したので、自分で調べて強引に実装してみました。talepandaさんの実装のほうが良い気がします。ありがとうございます。

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.addControl(new GLargeMapControl());

map.addControl(new GScaleControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(35.05424, 137.161152), 14);

map.setMapType(G_NORMAL_MAP);

icon = new GIcon();

icon.image = "./tmp.jpg";;

icon.iconSize = new GSize(108 / (18 - 14), 142 / (18 - 14));

icon.iconAnchor = new GPoint(0, 0);

map.addOverlay(new GMarker(new GLatLng(35.05424, 137.161152), icon));

}

GEvent.addListener(map, 'zoomend',

function(oldZoomLevel, newZoomLevel) {

icon.iconSize = new GSize(108 / (18 - newZoomLevel), 142 / (18 - newZoomLevel));

map.clearOverlays();

map.addOverlay(new GMarker(new GLatLng(35.05424, 137.161152), icon));

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ