情報ウィンドウ内にここにズーム
14 views
Skip to first unread message
takeshi k
Nov 26, 2009, 10:28:29 AM11/26/09
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>
カスタマイズしていて、完全にはまってしまいました。
ご存知の方、お教えいただけませんでしょうか。
このような感じのものを作っています。
最初に日本地図がでて、マーカーがいくつかでます。
そのマーカーをクリックしてでる情報ウィンドウ内に、（通常マップのように）
「ここにズーム」（英語だと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
Nov 26, 2009, 12:50:03 PM11/26/09
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));
}
試してみてください
はじめまして。
"ここにズーム"のリンクでズームインしたいときは、こんな感じでできると思います。
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
Nov 26, 2009, 7:27:18 PM11/26/09
to Google-Maps-API-Japan
Masashi Kさま
ありがとうございます！
解決でけました！！！
ありがとうございます！
解決でけました！！！
Reply all
Reply to author
Forward
0 new messages