GoogleApiについての質問

前へ 次へ
このQ&Aのポイント
  • GoogleApiを使用して自作のウェブサイトに地図を表示したいが、マーカーをクリックすると自作の吹き出しが表示されるかどうか知りたい。
  • 自作の吹き出しを使うと、GoogleMapの吹き出しを表示するのは大変なので、GoogleApiで実現できるか確認したい。
  • 自作のウェブサイトにGoogleMapを組み込み、特定の場所を検索してマーカーを表示する際、マーカーをクリックすると自作の吹き出しを表示する方法を知りたい。
回答を見る
  • ベストアンサー

GoogleApiについて質問です。

GoogleApiについて質問です。 【例】 (1)GoogleMapで「国会議事堂」を検索する (2)マーカーＡが表示される (3)マーカーＡをクリックする (4)吹き出しが表示される（添付画像） 【やりたいこと】 (1)GoogleApiで自作のＨＰにＭＡＰを表示する。 (2)「国会議事堂」を検索しマーカーを表示する (3)マーカーをクリックする。 (4)自作の吹き出しを表示する。(HTML形式) ●吹き出しについて 自作の吹き出しは表示できますが 【例】(4)のGoogleMap吹き出しを表示させることはできるのでしょうか？ 自作で吹き出しを作成するのは数が増えると大変なので ご存知の方よろしくお願いします。

画像を拡大する

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

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

できるようですね。 http://www.geekpage.jp/web/google-maps-api/ 私は ajax さっぱりなのでわからんですが。

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

関連するQ&A

  • googlemapについての質問です。

    googlemapについての質問です。 通常はマーカーが表示、クリックすると吹き出しが出てテキスト等の説明が表示されますが、 マップ自体にテキストを埋め込む方法はありますか？ 以下のような漢字です。 http://fishing-map.net/

  • GoogleMapにカラーマーカーと吹き出し

    GoogleMapにそれぞれのポイントに色んな色のカラーマーカーと吹き出しをいれたいのですが 吹き出しを表示させる方法はなんとかなったのですが 現在のHTMLに上手くマーカーに色を設定できません。 現在のmapが下記URLになります。こちらのどこに書き込めば反映されるのかどうかご教授よろしくお願いいたします。 http://www.royal-resort.co.jp/hakone/g_map/test_map.html

    • ベストアンサー
    • HTML
  • グーグルマップの吹出しは複数可能？

    グーグルマップを自分のサイトに設置しようとしています。 マーカーをクリックすると吹き出しが出ますが 他のマーカーをクリックすると吹出しが消えて２つ表示ができません。 吹出しでなくてもいいのですが 吹出し見たいのを複数常時表示することはできますか？ お忙しいところ是非教えていただければと思います。 よろしくお願いします。

  • YOLPのマーカークリックでリンク先に飛ぶには？

    Yahoo! JavaScriptマップAPIを使い、日本地図に複数のマーカーに吹き出しを付けて以下の形にしました。 このマーカーをダブルクリックしたときに、それぞれ指定したリンク先に飛ぶようにしたいのですが、どのようにすればよいのでしょうか。 また、現在のところマーカーのマウスホバーで吹き出しが表示されるのですが、これをマウスクリック（タップ）で表示するにはどうすればよいでしょうか。さらに別のマーカーをクリックするとそれまで開いていた吹き出しが消えて、クリック先の吹き出しに切り替わるようにしたいと考えています。 ご教示お願いいたします。 window.onload = function(){ var ymap = new Y.Map("map"); ymap.drawMap(new Y.LatLng(35.68132732438393,139.76650149843817), 6,"map"); var markers = []; markers.push( new Y.Marker(new Y.LatLng(35.674756131624456,139.73189027331),{title: "赤坂A地点"})); markers.push( new Y.Marker(new Y.LatLng(35.67024139121164,139.72727687380439),{title: "赤坂B地点"})); markers.push( new Y.Marker(new Y.LatLng(35.63223075430667,139.88597781679755),{title: "浦安A地点"})); ymap.addFeatures( markers ); }

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

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

  • カウントダウンを表示

    Googleマップの複数マーカーでマーカーをクリックしたとき、 吹き出し(infowindow)内に、決められた時間からあと何時間何分何秒と カウントダウンを表示するにはajaxを使用してどうスクリプトを組めばいいのでしょうか。

    • ベストアンサー
    • AJAX
  • PHPとGoogleAPIの連携時の問題について

    いつも、こちらでお世話になっております。 現在、PHPで管理画面を作成しているのですが、その際に問題がありご質問させて頂きました。 一通り説明させて頂きますと、居酒屋検索サイトを作成しております。 フロントエンド、バックエンド共にPHPで作成しており、フロントエンドでは、バックエンドで登録した居酒屋の一覧を出力させる仕様となっております。 居酒屋の一覧というのは、GoogleMapと連携し居酒屋のリンク一覧と地図上にマーカーを表示させます。 マーカーは、地図の領域内に動的に出力されます。 分かりにくいと思うので、イメージサイトがあります。 以下のURLのような形です。（市区町村を適当に選択してください） http://www.matsukiyo.co.jp/map?Type=Area&area=23&keyword= ※ 市区町村選択後、マウスで地図を動かすと、店舗の一覧が動的に変わります。 これを実現させる為に、管理画面から居酒屋を登録させる際に、GoogleAPIを使用し、 予め居酒屋の住所から経度緯度を取得しておく必要があります。 単一登録を行う時は問題ないのですが、他にCSVから一括登録も可能となっております。 GoogleAPIの経度・緯度の取得は、1秒おきに行う必要があるらしく、1秒たたずに連続して問い合わせを行うと、うまくデータが取得できないようです。 http://docolog.cocolog-nifty.com/papalog/2012/01/google-maps-geo.html また、住所によってはうまく経度・緯度が取得できないばあいもあるようでして、非常に困っております。 上記回避方法が、皆目検討がつかない状況で、ご質問させて頂いた次第です。 良い方法があるという方、どうかお力をおかしください。 何卒宜しくお願い致します。

    • ベストアンサー
    • PHP
  • WordpressのGmapに吹き出しを付けたい

    wordpressにACFを利用して埋め込んでいるGooglemapのピンにクリックで表示される吹き出しを付けたいのですが、うまくいきません。 しばらく前にwordpressのサポートでも質問したのですが回答を得られなかったのでかなり困っています。 状況としては、 「Advanced Custom Fieldsの全項目解説・公開側表示編集編」（http://blog.s-giken.net/253.html#googlemap） を参考に下記のように書きました。 記述場所はphpファイル内です。 <?php $name = get_field ( 'name' ); $map = get_field ( 'map' ); echo '<div id="map" style="width: 95%; height: 300px; margin:5px auto;"></div>'; echo '<span itemprop="hasMap"><script type="text/javascript">'; echo ' google.maps.event.addDomListener(window,"load",function(){'; echo ' var mapdiv=document.getElementById("map");'; echo ' var myOptions={zoom:15,center:new google.maps.LatLng(' . $map[lat] . ',' . $map[lng] . '),mapTypeId:google.maps.MapTypeId.ROADMAP,scaleControl:true};'; echo ' var map=new google.maps.Map(mapdiv,myOptions);'; echo ' var marker=[];'; echo ' var infowindow=[];'; echo ' marker[0]=new google.maps.Marker({icon:"http://maps.google.com/mapfiles/kml/paddle/red-stars.png",position:new google.maps.LatLng(' . $map[lat] . ',' . $map[lng] . '),map:map,title:"' . $name . '"});'; echo ' var markerCluster=new MarkerClusterer(map,marker);'; echo ' });'; echo '</script></span>'; ?> この状態でACF側で入力した住所をもとにマップ上に指定のマーカーを立てることはできているのですが、ここにクリックで表示される吹き出しを追加しようとしてもうまくいきません。 「マーカーがクリックされたら情報ウィンドウ（ふきだし）を表示する」（http://www.openspc2.org/reibun/Google/Maps/API/ver3/code/map/marker/0004/） や 「配列を使用してGoogleMapに複数のマーカと情報ウィンドウを表示する」（https://ghweb.info/post-2709.html） を参考にいろいろいじってみて、 google.maps.event.addListener(marker, "click", function() { infowindow[0]=new google.maps.InfoWindow({ content: "このコンテンツを表示します" }); infowindow.open(map, marker); }); みたいな感じのをecho' 'で挟んで追記すれば動くかなと試したのですが、どうもうまくいきません。 解決方法をご教授いただければ幸いです。

  • Googlemap apiでFFとNNでマーカーの表示が出ないのですが、どこが間違っていますか？

    Googlemap でマーカーの吹き出しに指定のHtmlを表示するように書いたつもりなのですが、IEとオペラでは意図どうりに表示されるのですがFFとNNではマーカーが表示されません。 javascriptはあまり得意ではないのでわかりやすく説明して頂けると他助かります。 //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(43.05578, 141.353257), 15); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); kyaba =[ [141.353075, 43.053673, "ダミー", "ダミー2", "ダミー3"], [141.352919, 43.054167, "ダミー", "ダミー2", "ダミー3"] ]; for (i = 0; i < kyaba.length; i++){ point = new GPoint(kyaba[i][0], kyaba[i][1]); dada = "<p>" + kyaba[i][2] + "</p>" + "<p>" + kyaba[i][3] + "</p>" + "<p>" + kyaba[i][4] + "</p>"; createMarker(point, dada); function createMarker(point,msg){ var marker = new GMarker(point); map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(msg); }); } } } } //]]> </script>

  • ストリートビューでマーカークリックするとエラー

    マップとストリートビューを並べて表示させるページを作成しています。 マップをクリックしたら、その箇所のストリートビューを表示させたいのですが、マーカーをクリックすると NULLまたはオブジェクトではありません。エラーがでてしまいます。 マーカーにオブジェクトが含まれてないから等かんがえていますが・・・。 var map; var panorama; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl()); map.setCenter(new GLatLng(35.658517, 139.745493), 16); GEvent.addListener(map, "click", moveCenter); var street = new GStreetviewOverlay(); map.addOverlay(street); var option = { latlng:spoint }; var scontainer = document.getElementById("street"); panorama = new GStreetviewPanorama(scontainer, option); var spoint = new GLatLng(35.658517, 139.745493); panorama.setLocationAndPOV(spoint); } } function moveCenter(overlay, point){ map.panTo(point); panorama.setLocationAndPOV(point); panorama.show(); } ちなみに下記のページを参照しています。 http://www.ajaxtower.jp/googlemaps/gstreetviewpanorama/index3.html これに現状下記のようにマーカーをつけています。 marker = new GMarker(map.getCenter()); // マーカーコントロール作成 map.addOverlay(marker); // マーカー表示 GEvent.addListener(marker,"mouseover",onMarkerMouseMove); // マーカークリックイベント設定 marker.openInfoWindowTabsHtml(mtabs); // フキダシ表示 ----- function onMarkerMouseMove(){ // マーカーにマウス移動 marker.openInfoWindowTabsHtml(mtabs); // フキダシ表示 } なにか他に参考になるページか、マーカークリック時のストリートビューのエラー回避で参考になるものがあればうれしいです。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する