• 締切済み

Google Mapで複数マーカー表示など

GoogleMapで以下サイトのような表現がしたいのですが、どなたか手法を教えてください。 ◆サイト http://www.qlife.jp/ 内の「マップ&駅チカ病院検索」 郵便番号等入力、住所選択で付近の病院を複数表示 マップの下には病院名・住所を表示 マップをドラッグして移動すると、移動先地図上で病院を表示 具体的な手法、もしくは技術的な解説がされているサイトをご存知の方、教えていただければと思います。

  • amoes
  • お礼率33% (1/3)

みんなの回答

回答No.3

このサイトは情報が詳しいです。 http://www.geekpage.jp/web/google-maps-api/ ここもわかりやすいです。 http://takanin.com/web/javascript/javascript002.html

回答No.2

http://sarugooglemaps.blog99.fc2.com/ 参考程度にどうぞ・・・。

回答No.1

http://www.openspc2.org/reibun/Google/Maps/API/ ここのサイトの http://www.openspc2.org/reibun/Google/Maps/API/ouyou/ver2/013/index.html このあたりが参考になるような気がします。

amoes
質問者

お礼

回答ありがとうございます。 教えていただいたサイトは、情報が充実しているようなので、確認させていただきます。

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

関連するQ&A

  • google mapの地図上の緯度、経度を知ることは・・

    google map上で任意の場所の緯度、経度を知ることはできますか？ また、それを知ることができたとして、その値をgooglemapに渡して地図を表示させることができますか？ やりたいことは、住所がまだ暫定処置になっているところは住所指定でｇｏｏｇｌｅｍａｐで引き出せない場合や、引き出せても少しずれている場合があるため緯度、経度を地図から読み出せれば上述のことが可能になるのかなと考えました。宜しくお願いします。

  • グーグルマップのマーカー

    グーグルマップに表示されたマーカーをクリックすると 吹き出しとか関係なくそのマーカーのもっている座標点に 地図の中心が移動するようにしたいのですが どのように記述するのでしょうか？

  • Google Mapへの表示について

    GoogleMapで自宅近辺を拡大表示すると、自宅の上に会社名が表示されます。会社宛の郵便がまれに届くので、郵便受けに会社名を貼っているため、それがもとでGoogleMapに登録されて表示されていると思いますが、この会社は休眠中であることもあり、多くの方が見る地図には表示されたくありません。どのような手続きをとれば会社名表示を削除してもらえるのでしょうか。Googleの連絡先もわかりません。ご存知の方がおられましたらお教えくださいますでしょうか？

  • google mapのマーカーについて

    オブジェクトに関わる質問があります。 今ある地図上に複数のマーカーを表示させて地図をクリックすると、ズームされた子ウィンドウが出てきます。 そして、子ウィンドウではマーカーをドラッグする事が可能になっており、親ウィンドウから子ウィンドウへの情報の受け渡しはできたのですが、移動させたマーカーの新しい緯度、経度の情報を更新させて親ウィンドウに引き渡す作業で手間取っております。 それぞれのマーカーはオブジェクになっており、まだオブジェクトの理解が足りないので、もしわかる方がいましたらお願いします。 以下のコードを使ってます // creating a map var map = new GMap2(document.getElementById("map")); var pointsets = [40.9, -74.2, 41.3, -73.8, 41.1, -74.1, 40.9, -74.18, 41.29, -73.79]; var sets = pointsets.split(","); var markerpoints = new Array(sets.length/2); for(var i=0; i<sets.length/2; i++) { markerpoints[i] = new GLatLng(sets[2*i], sets[2*i+1]); } for(var i=0; i<sets.length/2; i++) { map.addOverlay(makeMarker(markerpoints[i])); } function makeMarker(point){ var marker = new GMarker(point, {draggable:true, autoPan:false, bouncy:true}); return marker; } 以上のコードを使うと、マップ上に複数のマーカーが表示されて、それぞれのマーカーはドラッグ可能になります。 移動させたマーカーの新しい情報を更新させていくには、イベントを使えばと思っているのですが、効率のよいやり方はありますでしょうか？ お手数ですが、よろしくお願いします

  • Googleマップ上で、オリジナルのマーカーを表示したい

    Googleマップ上で、オリジナルのマーカーを表示したい WEBサイトに表示しているミニ写真画像にマウスオーバーしたら、 Googleマップでマーカーを使ってその写真の場所を表示し、拡大写真も表示するようにしたいと思い、 下記のサイトを参考にして、作成しています。 http://ascii.jp/elem/000/000/421/421381/ Googleマップのデフォルトマーカーを使っては、希望通り、 上記のサイトのようなものができました。 ここで、表示する間隔が狭いので、わかりやすく、数字を振った オリジナルマーカーを使って表示したいと思うのですが、 それがうまくできません。 jisファイルは下記のように書いています。 $(function(){ var map = new GMap2(document.getElementById("gmap")); var firstData = $(".map:first").attr("longdesc").split(","); $("#googlemap").html("<img src=" + firstData[0] + ">"); var pos = new GLatLng(parseFloat(最初に表示する緯度),parseFloat(最初に表示する経度)); map.addOverlay(new GMarker(pos)); map.setCenter(new GLatLng(最初に表示する緯度, 最初に表示する経度), 15); map.addControl(new GSmallMapControl()); $(".map").mouseover(function(){ var shopdata = $(this).attr("longdesc").split(","); $("#googlemap").html("<img src=" + shopdata[0] + ">"); var markerIcon1 = new GIcon(); markerIcon1.image = "./img/flg-"+shopdata[3]+".png"; markerIcon1.iconSize = new GSize(20, 34); markerIcon1.iconAnchor = new GPoint(10, 34); var marker1 = new GMarker(new GLatLng(shopdata[1],shopdata[2]), markerIcon1); if($(this).attr("flag")) return; map.panTo(marker1, 9); map.addOverlay(marker1); $(this).attr("flag", true); }); }) HTMLのミニ画像を表示している部分は以下です。 <img src="./img/map-1.jpg" class="sekomap" longdesc="./img/map1-1.jpg,緯度,経度,マーカーに表示したい数字"> プログラムに間違いがあるかもしれませんが、 この状態ですと、エラーになって、オリジナルのマーカーも表示されないし、 ミニ写真の位置にも移動しなくなってしまいます。 どなたかご存じの方いらっしゃいましたら、教えてください。 色々調べましたが、もうお手上げ状態です。。（ToT）

    • ベストアンサー
    • AJAX
  • グーグルマップ（Googlemap）をブログに貼り付けたい

    グーグルマップをブログ（ココログ）に貼り付けたいと思い、現在ぐーぐるマップにHTML を貼り付けてサイトに地図を埋め込みますという機能があり、貼り付けましたがタグだけ表示され、地図は表示されません。どのようにすれば良いかご存知の方教えて下さい。また、グーグルマップのマーカーの位置 が違うのですがブログに貼り付ける際、マーカーを指定の場所までドラッグして移動させる機能や方法をご存知であれば一緒に教えていただくと助かります。

  • 「Google マップ」で地図を大きなサイズで見るには？

    OS：XP PRO SP2　　ブラウザ：IE7 「Google マップ」（http://maps.google.co.jp/）で住所を入力し表示させると、「左側（余白部分）に住所、右側に地図」というふうに表示されますが、左右の画面幅一杯まで地図を表示させることは可能でしょうか？ 余白部分の住所情報は表示されなくなっても構いません。地図を「大きなサイズ」で見たいのです。 但し、 ・マウスホイールでのズームアップ・ダウン ・地図をドラッグした時に移動させることが出来る の機能が制限されてしまうのは困ります。

  • Google Map Api　複数のマーカーをおくと、一部が表示されない

    お疲れ様です。 お世話になっております。 Google Map Apiで複数のマーカーを設置するスクリプトを組みました。 10件程度は問題なく表示されるのですが、10件を境に、表示されたり、されなかったりします。 F5で表示されるもの、されないものとまばらになるので、なんとなく原因は、処理よりも表示のほうが速いからではないか？ということなんですが、JSの処理の流れがイマイチわかっていないので、結論は出せません。 実際20件登録したところ、10件～17件の間で出たり出なかったりします。1～10件までは必ず表示され、その後ろのIDを持つものがランダムになります。 これを確実に全部表示されるようにしたいのですが、表示の前にsleepなどかけるのがよいのか、ajaxにしてみるのがよいのかなど、検討がつきません。 下記が、書いたスクリプトです。 もしよければ、アドバイスお願いします。 var markers = new Object(); var marker = new Object(); marker["name"] = "xxx"; marker["icon"] = "ylw-pushpin"; marker["address"] = "座標変換用の住所"; marker["text"] = "噴出しの中身"; marker["center"] = "中心にするかしないか"; markers[0] = marker; ２０回ループ markers[20] = marker; googlemap(markers) -----------googlemap(markers) function googlemap(markers) { if (GBrowserIsCompatible()) { geocoder = new GClientGeocoder(); map = new GMap2(document.getElementById("map")); map.addControl(new GSmallZoomControl()); map.addControl(new GScaleControl()); for(var i in markers){ showAddress(markers[i]); //ここは20回ちゃんとまわってるようです } } } ------------------showAddress() function showAddress(amarker) { if (geocoder) { geocoder.getLatLng( amarker['address'], function(point) { if(amarker['center'] == 1){ map.setCenter(point, 12); } //アイコンが指定されてたらアイコンを設定 if(amarker['icon']){ var marker = new GMarker(point,micon); //アラートしてみると、ここが10回～17回ぐらいしか回ってない }else{ var marker = new GMarker(point); } map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(ふきだしのなかみ) }); } ); } }

  • Google Mapの表示について

    現在、商用のプログラムを制作しておりそのサイトの中でグーグルマップなどの地図を表示できるようにしようと思っています。 目的地の地図を表示するような商用サイトに表示させる場合の著作権はどうなるんでしょうか？ やはり、著作権違反になるのでしょうか？ グーグルの規約を見ても問題ないように思えますが、規約の内容をどうとらえたら良いか分かりません。 他にも商用サイトでたくさんgoogle Mapを表示されている所を見かけますがライセンスを取得されてるのでしょうか？

    • 締切済み
    • CGI
  • SleipnirでのGoogleマップの表示

    SleipnirでのGoogleマップの表示 現在Speirnir2.94を使っているのですが、Googleマップでのマウス操作がほとんど効かない状態にあります。地図をドラッグして場所を移動することはできるのですが、倍率のつまみを動かしたりマウスのホイールを使ったりしてみても拡大や縮小ができない状態にあります。ページ自体は正常に表示されているので、拡大や縮小の機能が使えないといったバグがある状態です。また、ストリートビューアをドラッグしようとしても、うまく動いてくれません。 使用しているOSはWindows XP Home Edition 2002(SP3)で、IE8を使用しています。 IE8に対応させた以前のSleipnirではGoogleマップも正常に動いていたのですが、対応以来ずっと動かなくなっている状態にあります。 またSreipnir以外のWEBブラウザ（Firefox3.6,IE8)では正常に動作しています。 同様のバグが発生している方、また対処法についてのアドバイスをお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する