情報ウィンドウ内にここにズーム

takeshi k

未読、

2009/11/26 10:28:292009/11/26

To: Google-Maps-API-Japan

はじめまして。
カスタマイズしていて、完全にはまってしまいました。
ご存知の方、お教えいただけませんでしょうか。

このような感じのものを作っています。
最初に日本地図がでて、マーカーがいくつかでます。

そのマーカーをクリックしてでる情報ウィンドウ内に、（通常マップのように）
「ここにズーム」（英語だとZoom Here）をつけ、
ズームレベルをかえて（寄って）いくと、
その範囲の詳細なマーカーがでてくる、といったものです。

ここではまっています。
＊情報ウィンドウに「ここにズーム」というリンクをつけ、
　クリックごとに（そのマーカーを中心として）
　ズームレベルが１つずつあがっていく、
　ということはできるのでしょうか？

なるべくAPIを活用したシンプルなものにしたいと思っています。
現状のソースは下記です。
（まだズームレベルが上がった先の追加マーカーまでいっていない）

ご教示よろしくお願いいたします。

<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.setCenter(new GLatLng(35,135), 4);
map.enableDoubleClickZoom();
map.enableScrollWheelZoom();
map.setMapType(G_HYBRID_MAP);

var gpObj01 = new GPoint(138, 36);
var marker01 = new GMarker(gpObj01);
var html01 = '<a href=”">Zoom Here</a>'
map.addOverlay(marker01);
GEvent.addListener(marker01, "click", function()
{marker01.openInfoWindowHtml(html01);} );

var gpObj02 = new GPoint(138, 34);
var marker02 = new GMarker(gpObj02);
var html02 = 'sample0333 '
map.addOverlay(marker02);
GEvent.addListener(marker02, "click", function()
{marker02.openInfoWindowHtml(html02);} );

}
}

<body onload="initialize()" onunload="GUnload()">

<div id="map_canvas"></div>

Masashi.K

未読、

2009/11/26 12:50:032009/11/26

To: Google-Maps-API-Japan

takeshi k さん

はじめまして。
"ここにズーム"のリンクでズームインしたいときは、こんな感じでできると思います。

var html = "<a href='javascript:void(0);' " +
"onclick='javascript:zoomIn(12.345, 67.890);'>" +
"ここにズーム</a>";
marker.openInfoWindowHtml(html);

function zoomIn(lat, lng) {
lat = Math.parseFloat(lat);
lng = Math.parseFloat(lng);
map.zoomIn(new GLatLng(lat, lng));
}

試してみてください

takeshi k

未読、

2009/11/26 19:27:182009/11/26

To: Google-Maps-API-Japan

Masashi Kさま

ありがとうございます！
解決でけました！！！

全員に返信

投稿者に返信

転送