• ベストアンサー

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

ページ内に埋め込んだgoogleマイマップの下にいくつかのリンクを貼り、クリックで指定した目印(青い丸いやつ)を表示させる方法はありませんか? 例えば東京駅と大阪駅に目印を付けておき、ページ内(マップ上ではない)の東京駅リンクをクリックすると東京駅が中央に表示され、大阪駅をクリックで大阪駅が・・・みたいな感じにしたいのです。 また、その逆はできませんかね? 目印をクリックで特定のページに飛ぶ・・・では無く、埋め込んだマイマップはそのままに、ページ情報だけを変更するということです。 どうしてもやりたいことがあるので、ぜひご教授下さい。 優しく教えていただけると助かります。

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ごく単純化した雰囲気のみのサンプルです。 きちんとした方法はこちらで御確認ください。 https://developers.google.com/maps/documentation/javascript/reference <!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'></script> </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を取得して入替えるとか…

syosinsyasan
質問者

お礼

早い回答、本当にありがとうございます。 私のやりたい事が完璧にできています!!! 今の私には少し難しいところですが、わかりやすく作っていただいたので、一所懸命やってみます。 また、わからないことがあったらお願いします。 感謝感謝です。

関連するQ&A

  • Googleマップで目印をつけて住所を表す

    下のURLは大阪府公衆浴場組合のサイトですが、その中に「中央区の浴場を地図から探す」というリンクがあり、これをクリックするとGoogleマップのページに飛び、そのGoogleマップの地図には大阪市中央区の銭湯が、地図上に青い目印をつけて住所が表示されています。 私はこれと同じようにして、Googleマップ上で複数の目印をつけて表示するページを作成したいのですが、このようなやり方はどうやってするのでしょうか? ご存知の方がいらっしゃいましたら、ご教授のほどよろしくお願いします。 http://www.osaka268.com/public_bath/c_tyuuou/

  • googleマイマップをHPに

    googleマップの『マイマップ』を「iframe」を使ってHPに埋め込もうと思っています。 大元の(マイマップを埋め込んである)ページにリンクを設置し、地図中のマーカーを移動させることは可能でしょうか? また、その逆にマーカーにリンクを付けてお大元のページ内容だけを変更させることは出来るでしょうか? 詳しくはこんな感じです http://www.youtube.com/watch?v=5bHSuPOa_Ko&feature=youtu.be ↑動画で説明しています↑ わかりづらいかもですが、よろしくお願いします。

    • ベストアンサー
    • HTML
  • Googlemap マイマップ作成について

    Googlemap のマイマップ作成について質問させていただきます。 Googlemap の検索で、たとえば「東京 小学校」などと検索したばあい、登録されている学校の目印が地図上にたくさん表示されると思います。 この検索結果の目印およびその目印の情報を、一括してマイマップに登録することは可能でしょうか。 作成したいマイマップは東京都内の小学校+αです。 ひとつひとつ保存すればできるのですが、さすがに効率が悪すぎます。 一括登録か、他になにか良い方法をご教授いただけたらと思います。 よろしくお願いいたします。

  • Googleマイマップでアイコンの追加の仕方

    Googleマップでマイマップを作ったのですが、指定場所のアイコンを変えたいと考えています 自分で作ったアイコンを地図上に表記したいのですが、追加の方法がわかりません。

    • 締切済み
    • Mac
  • グーグルマップの「このページのリンク」の場所は?

    グーグルマップのマイマップで作成した地図をブログに張り付けたいのですが、「このページのリンク」というリンクが見つかりません。 貼り付け方をググってみるとその説明のページには、「google earth」、「印刷」、「送る」、「このページのリンク」などのリンクメニュが地図上右側の上にあるのですが、私のページには見つかりません。 これって、私だけ? 環境は、IE9、Windows7 です。 よろしくお願いします。

  • Google マイマップで道案内をしてもらう方法

    よろしくお願いいたします。 Google Mapを使っています。 現在位置から、行き先を指定してナビ開始や経路案内ボタンを押すと、音声で道案内をしてくれます。 Google マイマップでも同じように道案内をしてもらう方法はありますか?

  • GOOGLEマップのマイマップでマーカーを大量に貼り付けているのですが

    GOOGLEマップのマイマップでマーカーを大量に貼り付けているのですが、表示に時間がかかってしまいます。 現在の中心点からある一定距離のマーカーを一定数(50個など)のみ表示させるにはどのような技術を使えばよろしいのでしょうか。 ご存知の方いらっしゃいますか。よろしくお願いします。

  • GoogleMapのマイマップで作成した地図

    こんにちは。 GoogleMapのマイマップで作成した地図をiphoneでマイマップというアプリを使って見ていましたが、 GoogleMapが新しくなってから、リンクできなくなりました。 エラーコード400が表示されます。 Google Fusion Tableのチェックを外しても、読み込もうとすると、エラー表示後にまたチェックが付いてしまってます。 共有で必要な地図のURLをパソコンから送るしかないのでしょうか? 以前のようにiphoneからログインしてマイマップで作った地図全て見られるようにしたいです。 何か方法はあるでしょうか? よろしくお願いします。 iOS6です。

  • google mapのマイマップをメールで送る方法

    google mapで、県内の数ヶ所に目印を付けたマイマップを作りました。 *「限定公開(URLで公開)」を選択しています。 保存までは問題なく出来ます。私のパソコンで見る分には何も問題ありません。 それを友人にメールで送りたいのですが、URLをコピペしても 「開けない。世界地図が出てきて、該当地域周辺に行ってみても 目印が付いていない」との返信。 もしかして他人に送る時使う「URL」というのは、 ブラウザの一番上の窓にある普通のURLではないのでしょうか? それとも別の理由で出来ないのでしょうか? ご存知の方、よろしくお願いします。

  • WEBページに、Googleマップを貼る方法ですが

    HP作成の仕事をしてますが、企業HPなどで自分で作ったWEBページへ、Googleマップを貼る方法なのですが、いろいろ調べたら、Google Maps APIって機能で作成するなどと書いてあるのですが、 例えば、別の方法で、Googleにログインして「マイマップ」で、「新しい地図を作成」で地図上に目印を作って、「限定公開」を押して、それを、地図の画面右上の「リンク」を押して、「3.サイト地図を埋め込む場合はこのHTML~~」って所を押して、出てきたHTMLソースを自分のWEBページに貼ったら、なぜか簡単に設定できたのですが、これで使っていいのでしょうか? この「マイマップ」から作るやり方と、Google Maps APIは、何が違うのでしょうか? ご教授お願いします。

専門家に質問してみよう