GMap Api V3で中心マーカーを表示させる方法

前へ 次へ
このQ&Aのポイント
  • GMap Api V3を使用して地図を表示している際、中心に十字マーカーを表示させたい場合、どのようにすればよいのかわかりません。
  • マーカーは表示できるものの、地図をドラッグするとマーカーも一緒に移動してしまい、再描画の方法が分かりません。
  • V3で中心マーカーを表示する方法に関して、オンラインの情報は主にV2に関するものばかりであり、具体的な実装方法が分かりません。
回答を見る
  • ベストアンサー

GMap Api V3で中心マーカーを表示させたい

Google Maps Api V3で地図を作っています。 描画した地図の中心に十字マーカーを表示させたいのですが、どのようにすればいいのでしょうか？ マーカー表示はできたのですが、地図をドラッグすると、地図と一緒に移動してしまいます。 dragイベント中に再描画すればいい・・・と考えましたが、具体的にどのようなソースを書けばいいのかわかりません。 ネットで探しているのですが、V2ばかりで、それをV3に応用することができませんでした。 下記URLのようなものをV3で実現したいと考えています。 http://googlemaps.googlermania.com/google_maps_api_v2/map_4-2.html V3で紹介してあるサイトをご存知の方は教えていただけないでしょうか。 ソースを直接ご指導いただける方でも大歓迎です。 宜しくお願いいたします。

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

  • ベストアンサー
  • my--
  • ベストアンサー率89% (91/102)
回答No.2

質問者のいうAPI。No.1にあるDOM。2パターン書いてみました。 API 版 http://library.nukimi.com/googlemaps/api-source.html マップセンターの移動に合わせ地理的座標を取得。それをピクセル座標に変換、再描画 とマーカー位置を維持するための負荷がかかります。 マップドラッグなど、ただでさえマップセンター移動は高負荷の状況ですから 古いIEなどマーカー静止は厳しいかも。 DOM 版 http://library.nukimi.com/googlemaps/dom-source.html No.1にありますから詳細は略。「ブラウザによってはズレる可能性がある」とのことですが そこあたりは良く分かりませんでした。 APIの扱いに慣れると地図制作の幅が広がりますし、そういう意味でAPIはありですが No.1にある通り、私もAPI利用はここじゃない、とやってみて思いました。

ka-kichi
質問者

お礼

ご回答ありがとうございます。 また、２通りものソースをご提示いただき、ありがとうございます。 オーバーレイではなく、単純にマップ上にマーカーを表示させ、それを中心に固定できれば負荷も減ると思ったのですが、それは素人考えなのかもしれませんね。 ご提示いただいたソースを拝見し、勉強させていただきます。

その他の回答 (2)

  • my--
  • ベストアンサー率89% (91/102)
回答No.3

>> No.2 お礼 OverlayViewクラスがベストってわけじゃないかも知れませんが。。。 はじめにMarkerクラス .setPosition() で単純にやってみましたが、ダメでした。 Google Chromeは流石というか、相性が良いのかそれなりに動きましたけど。 API-Marker 版 http://library.nukimi.com/googlemaps/marker-source.html 実際に確認した方が早い。

ka-kichi
質問者

お礼

再度ご回答いただきありがとうございます。 なるほど、奇妙な動きですね。 勉強になりました。(^^ゞ ありがとうございます。

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

マップの表示対象要素とそのサイズはわかっているのでしょうから、位置固定のカーソルを表示したいのであれば、googleAPIを利用する必要がないのではないでしょうか？ マップ上に表示するから、移動したときに再度表示し直す必要が出てしまうので、対象要素の中心に固定で表示するようにしておけば、表示するだけですみそうに思えます。 具体的には、カーソル用のアイコン（又はdivによるヘアカーソルなど）をposition:absoluteでマップ表示用の要素の中央に来るように表示しておくだけ。 そうすれば、スクリプトも不要になりませんか？

ka-kichi
質問者

お礼

ご回答ありがとうございます。 なるほど、地図とマーカーをHTML上で重ねる発想ですね。 ただし、これだとブラウザによってはズレる可能性があるので、やはりAPI上で描画したいと思います。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Google Maps API のマーカー表示について

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

    • ベストアンサー
    • AJAX
  • Google Maps API V3

    Google Maps API V3 でXMLのデータがかなり多いので XMLから取り出すデータをgoogleマップで表示するデータのみ 取り出してマーカを表示したい場合どのようにすればいいのでしょうか

    • ベストアンサー
    • AJAX
  • Google Mapのマーカー非表示

    JavaScriptは初心者ですが、質問させてください。 Google Mapでルート表示をし、かつマーカー（おたまじゃくし）を非表示にしたいのですがGoogle Maps APIで可能でしょうか？またソースの例も教えていただけると嬉しいのですが。 よろしくお願いいたします。

  • Googlemapb api　複数のマーカー表示に

    基礎的なことかもしれませんが、結構調べたりしても分からなかったので、教えてほしいです。 Googlemap api を使った複数のマーカー表示を$getJSON（jQuery)を使用しようして表示させたいのですが、表示できません。 どこがおかしいか教えてください。 【HTML】 1.<!DOCTYPE html> 2.<html> 3.<head> 4.<meta charset="UTF-8"> 5.<title>map</title> 6.<style type="text/css"> 7.html,body,#map { 8.height: 100%; 9.} 10.</style> 11.</head> 12.<body> 13.<div id="map"></div> 14.<script type="text/javascript" src="map.js"></script> 15.<script type="text/javascript" src="jquery-3.6.0.min.js"></script> 16.<script async defer 17.src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap"> 18.</script> 19.</body> 20.</html> 【JavaScript】 1.var map; 2.var marker = []; 3.var data = []; 4.var center = {lat: 36.72073,lng: 137.27112}; 5.function initMap() {//地図の作成 6.map = new google.maps.Map(document.getElementById('map'), { // #mapに地図を埋め込む 7. center: center,// 地図の中心を指定 8. zoom: 15 // 地図のズームを指定 9. }); 10. $.getJSON("aaaaa.json", function(json){ 11. for (var i = 0; i <= json.length-1; i++) { 12. data.push( 13. { 14. 'name': json[i].name, 15. 'lat': json[i].lat, 16. 'lng': json[i].lng 17 }); 18 }; 19. for (var i = 0; i < data.length; i++) { 20. markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']}; 21. marker[i] = new google.maps.Marker({　//マーカーの追加 22. position: markerLatLng,//マーカーを立てる位置を指定 23. map: map//マーカーをたてる地図を指定 24. }); 25. } 26 });//jsonの閉じ 27.} 【JSON】 [ { "name": "名古屋駅", "lat": 35.170897, "lng": 136.881558 }, { "name": "大名古屋ビルヂング", "lat": 35.172311, "lng": 136.884568 }, { "name": "国際センター駅", "lat": 35.172038, "lng": 136.887701 } ]

  • google map api v3の表示の不具合について教えてください

    google map api v3の表示の不具合について教えてください。 google map api v3を実装してマーカーをつけたのですが、あれこれ直していたら表示されない箇所ができてしまいました。（下記画像参照） ソースは下記です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>××</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/page.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> google.maps.event.addDomListener(window, 'load', function() { var mapdiv = document.getElementById("map"); var myOptions = { zoom: ズーム, center: new google.maps.LatLng(緯度, 経度), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; var map = new google.maps.Map(mapdiv, myOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(緯度, 経度), map: map, title: '名称' }); }); </script> </head> <div id="map"></div> お手数かけて申し訳ありませんが、ホームページ初心者なのでご指導いただければ助かります。 なにとぞよろしくお願い致します。

  • GoogleMapsのマーカーが表示されません

    Google MapsのAPIについて質問させてください。 地図を表示させ、マーカーも出るようにと思い自分は以下のようにしました。 http://ideone.com/Kb2gWi しかし、地図は表示されるのですが、マーカーが表示されません。 どこをどのように変えればいいのでしょうか？ アドバイス頂けましたらと思います。 宜しくお願い致します。

  • 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/ クラス名やヒントとなるキーワードだけでも結構ですので教えて頂ければと思います。 宜しくお願いします。

  • Google Maps API

    Google Maps APIについてよくわからないのですが 自分のサイトに地図を埋め込むことを言うのですよね？ でもグーグルマップを開いて 「リンクを共有/地図を埋め込む」 のURLを自分のサイトに張り付ければ Google Maps APIを使わなくてもできると言う事ですか？ それとも、Google Maps APIと 地図の埋め込みは、違うものなのでしょうか？

  • google maps api v3のルート検索

    google maps api v3のルート検索でA,Bマーカーでなく、 オリジナルのマーカーにてドラッグ＆ドロップマウスで移動可能なルート検索を javascriptで作るやり方が知りたいです。

    • ベストアンサー
    • AJAX
  • 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は慣れていないので、極力避けたいという気持もあります） どなたか教えて頂けないでしょうか。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する