• ベストアンサー

googlemapsについて初歩的な質問です。

googlemapsについて初歩的な質問です。 webサイトを制作しているのですが、会社の地図ページがありまして 地図はphotoshopで作った簡易なもので、そこからリンクを張りgooglemapsに _blankで飛ばしたいのですが、その際下記のようにマーカーや吹き出しを出したいと思っています。 どういったやり方をすればいいのでしょうか？ HTMLにmapsを埋め込む方法は幾つかリファレンスを見かけたのですが こういった簡易な方法が書かれたものを見つけれなかったモノで。。。 ご存知の方いらっしゃったら教えて下さい。 よろしくお願いします。

noname#181670
noname#181670

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

  • ベストアンサー
回答No.1

ログインしてマイマップを作成 　↓ アカウントのプロフィール画面に入り、「マップ」のタブを開く 　↓ 作成したマイマップへのリンクを右クリック、「ショートカットのコピー」 （後半に msid=～ と入ったリンクがコピーされるはずです） 　↓ <a href="コピーしたURL" target="_blank">

noname#181670
質問者

お礼

現在サポートで確認中のため、質問者本人のみ投稿内容をご覧いただけます。ご迷惑おかけいたしますが、しばらくお待ちください。
  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • googlemapsとjavascriptの勉強のため、google地

    googlemapsとjavascriptの勉強のため、google地図を表示させてマウスで地図をクリックすると、クリック位置にマーカーを表示するだけのプログラムを作っています。 この際、地図の上にマウスが乗っていると、マーカーがドラッグされている状態に見えると見た目が判りやすいと思ったのですが（googlemapsのマイマップで新規マーカーを置く時にそんなことやってたと思うんですけど）、どうもその方法がわかりません。 マウスカーソルの移動イベントを取って、マウスカーソルの位置に延々とマーカーを表示し続ければそれっぽく見えるかとも思いましたが、Firefoxだとそれっぽく見えますがIEだと処理に負担がかかるのか、動作がイマイチです。 なんとか解決方法が無いものでしょうか。 参考程度ですが、↓のような物です。 <div id="maps" style="width: 500px; height: 500px"></div> ～～～～～～～～～～～～～～～～～～～～ var maps = new GMap2(document.getElementById("maps")); var ev1 = GEvent.addListener(maps,"click",function(overlay,latlng){ maps.addOverlay(new GMarker(new GLatLng(latlng.lat(),latlng.lng()),{draggable:drag})); GEvent.removeListener(ev1); GEvent.removeListener(ev2); } var ev2 = GEvent.addListener(maps, "mousemove",function(latlng){ maps.clearOverlays(); maps.addOverlay(new GMarker(latlng)); }); ちょっと漠然としていますが、よろしくお願いいたします。

  • googlemaps api V2からV3への移行

    googlemaps api V2　を使ったサイトをいくつか公開しています。 つい最近、googlemaps api V2　のサポートが終了し、 V3への移行が求められていることをつい最近知りました。 2013年にはV2サイトは表示されなくなるようで、 かなりあせっています。 複数のマーカーを地図上に表示させるために jsonファイルを読み込む形にしています。 このサイトを作ったとき、 googlemaps　apiの入門サイトなどを参考にして作ったのですが、 V3に移行するために　html　を どのように修正したらよいかがわかりません。 jsonファイルの書き方も修正が必要かもわかりません。 V3説明サイトを見てソースをまねしたりしたのですが、 うまくできませんでした。 どのようにソースを組めばよいのか、 jsonを使ったV3でのソースを教えていただけると助かります。 なお、上記サイトでのjsonファイル　（chikusa.json）　のソースです －－－－ここから－－－－－－ { data: [ {lat:35.1638745,lng:136.9252355,html:"<a href='http://www.rr-watanabe.jp/' target='_blank'>料理旅館わたなべ</a>"}, {lat:35.1713848,lng:136.9287544,html:"<a href='http://www.mielparque.jp/nagoya/' target='_blank'>メルパルク名古屋</a>"} ] } －－－－－ここまで－－－－－ よろしくご教示お願いします。

    • ベストアンサー
    • AJAX
  • WEBページに、Googleマップを貼る方法ですが

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

  • googlemapのマイマップをホームページに表示する方法

    googlemapのマイマップをホームページに表示する方法 googlemapのマイマップで作った地図を自分のホームページに表示したいのですがやりかたがわかりません。 「リンク→HTML を貼り付けてサイトに地図を埋め込みます」で制作されたタグを使うとマイマップを表示することができるのですが最初から吹き出しが開いた状態で表示されてしまいます。 吹き出しを閉じた状態で日本全体を表示するようにしたいのですが…いまいちよくわかりませんorz APIkeyを取得するところまではなんとかできたのですが… よろしくお願いします。

    • ベストアンサー
    • HTML
  • GoogleMapsAPIの表示のカスタマイズ

    食べログの地図を見ていると、GoogleMapsAPI を使っているのに、 例えば高速道路のジャンクションやパーキングエリアは表示されていません。 正確にいうと、クリックしても吹き出しが出ないようになっています。 このように特定の要素でクリックしても吹き出しが出ないようにしたいのですが… https://developers.google.com/maps/documentation/javascript/styling?hl=ja#map_features https://developers.google.com/maps/documentation/javascript/reference?hl=ja#MapTypeStyleFeatureType この辺りがヒントのように思うのですが、力尽きてしまいました。 わかる方がおられましたらよろしくお願いします。

    • ベストアンサー
    • HTML
  • Google Maps API のマーカー表示について

    Google Maps API のマーカー表示について → http://www.smatch.jp/A030990066308854/map/ のような地図でマーカーが表示されていますが 、地図を移動させても新たにマーカーが表示されます。 これは、移動する毎に座標などをもとにマーカーの情報を読み込ませているのでしょうか？ それとも、初回表示時に全て(全国)のマーカーの情報を読み込ませているのでしょうか？ どちらの方法で実現できているのでしょうか？

    • ベストアンサー
    • AJAX
  • GoogleMapsで<UL>タグとの連携

    http://bit.ly/7Gt3Cp のサンプルのように，キャンバスの右側（デモは左側になっておりますが）に＜UL＞タグのリストを配置して，それぞれのリンクをクリックすると，該当するマーカーがマップの中央にくるようにPantoで移動するようにしたいと思います． サンプルのコードは，ランダムマーカーだったのと，コードの書き方がすこし特殊な感じで（最初にvar Demoを宣言し，その中にすべての処理を書き込んでいく方法？）あまり参考にできなかったので，別のサンプルを参考にして，JSON形式のデータを取り込むコードを書きました． <html lang="ja"> <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ // JSON読み込み $.ajax({ url:"students.js", cache:false, dataType:"json", success:function(json){ var data=jsonRequest(json); initialize(data); } }); }); function jsonRequest(json){ var data=[]; //データ全体のラベルはstudentsで，各データは”branch","name","age","lat","lng"などのラベルを持っています if(json.students){ var n=json.students.length; for(var i=0;i<n;i++){ data.push(json.students[i]); } } return data; } function initialize( data ){ var op={ zoom:12, center:new google.maps.LatLng(34.7417512 , 135.3269878 ), mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("map_canvas"),op); var i=data.length; while(i-- >0){ var dat=data[i]; var obj={ position:new google.maps.LatLng(dat.lat,dat.lng), map:map, title:dat.name }; var marker=new google.maps.Marker(obj); } } </script> </head> <body> <div id="map_canvas" style="width:100%;height:100%"></div> </body> </html> このコードをベースにしていきたいのですが，どこをどうすれば良いのか見当がつきません． // Generate list elements for each marker. var li = document.createElement('li'); var aSel = document.createElement('a'); aSel.href = 'javascript:void(0);'; aSel.innerHTML = 'Open Marker #' + n; aSel.onclick = Demo.generateTriggerCallback(marker, 'click'); li.appendChild(aSel); ul.appendChild(li); 上記はリンク先145行目～152行目です．この部分が当該の機能であることは何となく分かるのですが，必要なオブジェクトの生成や，コールバックの意味あいといったところが分からなくて，どのように書いていけばいいのか分からないで困っています． なにかアドバイスをいただけたらと思いますので，よろしくお願いいたします。

  • google maps で、javscriptを使わずに、複数のマーカを表示したい。

    Google maps で、一つの地図に複数のマーカを、簡単に表示する方法を教えて下さい。 下記URLの地図に、３つのマーカを表示させたいと思っています。 http://maps.google.com/maps?hl=ja&q=%E5%85%83%E7%B4%8B%E5%88%A5&ie=UTF8&ll=44.325199,143.377376&spn=0.010837,0.028367&z=15 google maps api で、javascriptを使えばできるということは知っているのですが、 特に動的に表示させたいわけでもないので、手軽にできないかと思っています。 （プログラミングは経験していますが、javascriptは慣れていないので、極力避けたいという気持もあります） どなたか教えて頂けないでしょうか。

  • HPデザイン制作は「Photoshop CS3」か「Fireworks CS3」か？

    個人でWEB制作の仕事をしております。 WEB制作は大きく分けると、 「デザイン制作」と「HTMLコーティング」　に分かれる思いますが、 私は、Photoshop CS3、Fireworks CS3も持っておりますが、 「HTMLコーティング」はDreamweaver CS3で制作しますが、 ★「デザイン制作」に関しては、 Photoshop CS3か、Fireworks CS3の、 どちらを勉強した方が宜しいでしょうか？ 以前までは、古いIllustratorと古いPhotoshopで作ってましたが、 現代のデザイン制作の主流は、Photoshopか、Fireworksと聞き、 ソフトの買い替えを機会に、 どちらかを本格的に勉強しようと思ってます。 WEB制作のお仕事をされている方、 どうかご教授アドバイスよろしくお願い致します。

  • Google Maps API で 住所データを渡してその場所の地図を表示させたい

    Google マップでは検索ボックスに住所を入れ「検索」ボタンをクリックするとその場所が表示されます。 http://www.google.co.jp/maphp?hl=ja&tab=wl&q= このようなことを、Google Maps APIを用いて自分のサイトで行いたいと思っています。 いろいろなサイトを調べているのですが、マーカーや吹き出しをつけることはできても、入力された住所で地図の表示位置を変えることがわかりません。 はてなマップはGoogle Maps APIを使用しているとのこと、こちらのサイトでも検索ボックスに住所を入力したら地図の表示が変わるので、APIを用いてもできるのかと予想はしているのですが、実際の方法がわかりません。 http://map.hatena.ne.jp/ クラス名やヒントとなるキーワードだけでも結構ですので教えて頂ければと思います。 宜しくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する