googleマイマップとのリンクを作成したい

解決済

質問者：syosinsyasan
質問日時：2013/01/24 14:27
回答数：1件

ページ内に埋め込んだgoogleマイマップの下にいくつかのリンクを貼り、クリックで指定した目印（青い丸いやつ）を表示させる方法はありませんか？

例えば東京駅と大阪駅に目印を付けておき、ページ内（マップ上ではない）の東京駅リンクをクリックすると東京駅が中央に表示され、大阪駅をクリックで大阪駅が・・・みたいな感じにしたいのです。

また、その逆はできませんかね？
目印をクリックで特定のページに飛ぶ・・・では無く、埋め込んだマイマップはそのままに、ページ情報だけを変更するということです。

どうしてもやりたいことがあるので、ぜひご教授下さい。

優しく教えていただけると助かります。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2013/01/24 22:27

ごく単純化した雰囲気のみのサンプルです。

きちんとした方法はこちらで御確認ください。
https://developers.google.com/maps/documentation …

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false' …
</head>
<body>

<div id='map' style='width:700px; height:400px;'></div>

<div style="margin:1em;" onclick="moveMap(event)">
<span class="tokyo">東京駅</span>　<span class="osaka">大阪駅</span>
</div>

<script type="text/javascript">
var tokyo = new google.maps.LatLng(35.6805, 139.7677);
var osaka = new google.maps.LatLng(34.7021, 135.4958);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: tokyo,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

function moveMap(evt){
var t = evt.target || evt.srcElement;
if(t.className=="tokyo") map.setCenter(tokyo);
if(t.className=="osaka") map.setCenter(osaka);
}
</script>
</body>
</html>

＞ページ情報だけを変更するということです。
別ページの情報と入替えたいのであれば、ajaxなどでHTMLを取得して入替えるとか…