• 締切済み

Google Map APIに関して

http://code.google.com/intl/ja/apis/maps/documentation/examples/map-simple.html にあるようなページで、このhtmlファイル中に特定の文字列を埋め込んだらその名称を地名とする検索を行い、表示するとしたいのですが、どうやったらいいですか？ その箇所にマーカを置けたらなおいいです。 （例：http://code.google.com/intl/ja/apis/maps/documentation/examples/map-markers.html）

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

私がよく参考にしているサイトを紹介します。 http://googlemaps.googlermania.com/map_example_16.html とか http://www.ajaxtower.jp/googlemaps/geocoding/index1.html とか http://www.geekpage.jp/web/google-maps-api/geocoder-1.php とかが 参考になります。 GoogleMapsAPIの本家のサイトは http://code.google.com/intl/ja/apis/maps/documentation/index.html です。

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

関連するQ&A

  • G Maps APIで同時にストリートビューは?

    Google Maps JavaScript API V3　を使ってページを作っています。 http://www.withmama.info/s_map/hatena.php　開いていただくと分かるのですが、左側にロードマップ右側にストリートビューを、「ページを開くと同時に表示」させるのが目的です。 Google では、 http://code.google.com/intl/ja/apis/maps/documentation/javascript/examples/streetview-simple.html　というサンプルがあります(説明ページは、 http://code.google.com/intl/ja/apis/maps/documentation/javascript/services.html#StreetView　にある「ストリートビューの場所と視点（POV）」の部分)。 上記のサンプルと説明ページを基に、いろいろやってみたのですが、右側のストリートビューの部分がページを開いた段階では、表示されません。左側のロードマップの人形をロードマップに載せると表示が開始されるのですが・・・。 どなたか該当ページのソースをご高覧の上で、ご教示いただけませんか?

  • meta、http-equiv等について

    http://code.google.com/intl/ja/apis/maps/documentation/examples/control-simple.html このページで <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 上の部分を消すとIEでは地図が表示されないんですがなぜですか？

  • GoogleMap APIマーカーマネージャーとXMLの読み込み

    Google Codeのページ http://code.google.com/intl/ja/apis/maps/documentation/overlays.html#Marker_Manager に載っていたマーカーマネージャーを使用し、さらにGDownloadUrlでXMLを読み込んで http://code.google.com/intl/ja/apis/maps/documentation/services.html 地図を作成しようとしております。 現在記述は以下のようになっています。 ----- var map = null; var mgr = null; var batch = []; function setupMap() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.66332844365397,139.7321891784668),16); map.addControl(new GLargeMapControl()); map.enableDoubleClickZoom(); window.setTimeout(setupMarkers, 0); } } function getMarkers() { GDownloadUrl("○○○.xml", createMap); return batch; } function createMap(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var markeropts = new Object(); markeropts.title = name; var marker = new GMarker(new GPoint(lng,lat), markeropts); batch.push(marker); // ※1 } return batch; } function setupMarkers() { mgr = new MarkerManager(map); mgr.addMarkers(getMarkers(), 14); mgr.refresh(); } ----- いろいろと検証の結果、XMLの読み込みはうまくいっており、※1のところでbatchにはちゃんとpushされていることは確認したのですが、最終的にマーカーは表示されません。 function getMarkersが function getMarkers() { var batch = []; var markeropts = new Object(); markeropts.title = "六本木"; var marker = new GMarker(new GPoint(35.66332844365397,139.7321891784668), markeropts); batch.push(marker); return batch; } の時はマーカーがちゃんと表示されたことも確認しております。 どこがおかしいのでしょうか？ また、根本的に間違っているor他にいい方法があるのであればご教示ください。 よろしくお願い致します。

  • Facebookでgoogle MAP

    Facebookページで、google MAPの複数マーカー表示を作りました。 しかしサーバーに上げ、ページを表示させようとすると、 このウェブサイトには別の Google Maps API キーが必要です。新しいキーは http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html#Obtaining_Key で作成できます。 という文章が出て、地図が表示されません。 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=APIキー" type="text/javascript"></script> Facebookではこの表記じゃダメなのでしょうか？ ちなみにFacebookページはiframeで作っています。

  • Google Static Maps API で言う「ビューア」とは何ですか？

    googlemapのstaticバージョンを貼る際の制限に 1日ビューアごとに画像1000枚まで、というものがあるようです。 ​http://code.google.com/intl/ja/apis/maps/documentation/staticmaps/​ このビューアとは何のことでしょうか？ 例えばお店の地図を（住所は固定で）googlemapのstaticで携帯サイトに貼るとします。 念のため最寄り駅からの地図ともう一つ別の路線の最寄り駅からの地図で二枚貼るとしますね。 この場合、どのようなことが起きると制限に引っかかってしまうのでしょうか。 あるいはこの事例とは関係なく、具体的にどういった場合制限に引っかかってしまうのでしょうか。 どなたかお詳しい方、教えてください。 よろしくお願いします。

  • Google maps api v3

    https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja を参考にコーディングし、いろいろなサイトも調べてながら（手探り）ですが、どうしてもうまく表示されません。 【maps.php】にてxmlデータを生成しました。それを使ってサイトに表示させるというものです。 うまく表示されないというか、画面が真っ白になってしまいます。 アドバイス等ご教示頂ければ幸甚です。 【index.html】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Maps</title> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/jacascript"> //<![CDATA[ function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(35.66, 139.69), zoom: 13, mapTypeId: 'roadmap' }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("maps.php", function(data) { var xml = parseXml(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[[]i].getAttribute("name"); var address = markers[[]i].getAttribute("address"); var tel = markers[[]i].getAttribute("tel"); var email = markers[[]i].getAttribute("email"); var message = markers[[]i].getAttribute("message"); var point = new google.maps.LatLng( parseFloat(markers[[]i].getAttribute("lat")), parseFloat(markers[[]i].getAttribute("lng"))); var html = "" + name + " " + address; var icon = customIcons[[]type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request.responseText, request.status); } }; request.open('GET', url, true); request.send(null); } function parseXml(str) { if (window.ActiveXObject) { var doc = new ActiveXObject('Microsoft.XMLDOM'); doc.loadXML(str); return doc; } else if (window.DOMParser) { return (new DOMParser).parseFromString(str, 'text/xml'); } } function doNothing() {} //]]> </script> </head> <body onload="load()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html>

  • GoogleMapsAPI Key取得ができない

    HPを変更しました。 google　maps を入れたいのです。 しかし、下記コメントが出てます。 このウエブサイトには　別のgoogle　maps　apiキーが必要です。新しいキーは http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html#Obtaining_Key で作成できます。 ここを調べて見ても、apiキーが取得できません。 Google Maps APIを使うための API Key の取得が、V3では不要になりました。 と書いてありますが、現状api　keyを取得しないと、使えません。 いろいろ調べたのですが、v2の取得方法は書いてありますが、現状では役に立ちません。 http://code.google.com/intl/ja/apis/maps/signup.html で登録できないから、質問しています。 具体的なやり方を教えてください。

  • google map api プログラミング

    javascript google map api　どなたか助けてください マップを作成しているのですが、どうしてもわからないところがあります。 下のソースコードの中にテーブルがあるのですが、そこに、検索を押したときの マーカーの場所の詳細を表示させたいのですがどうやっても表示できません。 どなたかプログラミングにお詳しい方教えてください！ よろしくお願いします。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8n"/> 　<title>練習</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false&region=jp"></script> <script language="JavaScript" src="gcode_com.js"></script> <script language="JavaScript" src="gcode.js"></script> <script language="JavaScript" src="GoogleMapsCustomMapType.js"></script> <!link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 　<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script> <script type="text/javascript"> <!-- var geocoder; var map; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(36.370324,138.65968); var myOptions = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, scaleControl: true } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function codeAddress() { var address = document.getElementById("address").value; // var zm = document.getElementById("zm").value; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); // document.write( alert ( zoom ) ); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } }); } // --> </script> </head> <body onload="initialize()" background=""> <center> <font size=5>練習</font> <div id="map_canvas" style="width: 1000px; height: 600px; border: 1px solid Gray;"></div> </center> <div> キーワード: <input id="address" type="textbox" size="30" value="ここにキーワードを入力してください"> <!input id="zm" type="textbox" size=2 value="8n"> <input type="button" value="検索" onclick="codeAddress()"> </div> <table width="400" height="200" border="1" align="left"> <tr> <td width="150" height="50">緯度</td> <td width="150" height="50">経度</td> <td width="800" height="50">住所</td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> </table> </body> </html>

  • google maps apiについて

    現在HPをリニューアルしています。 旧サイトと新サイトは同じサーバー、同じドメインを使用しています。 旧サイトのデータはFTP内にはありません。 所在地マップに、GoogleMapを使用しています。 そこで、下記のようなエラーが出ます。 このウェブサイトには別の Google Maps API キーが必要です。新しいキーは http://code.google.com/apis/maps/signup.html で作成できます。 Google Maps API サーバーでリクエストが拒否されました。リクエスト内で指定した「sensor」パラメータには「true」または「false」のいずれかを指定する必要があります。 次に上記で指定されている http://code.google.com/apis/maps/signup.html にて、URLを指定して、APIを生成ボタンを押す 次にJavaScript Maps API の例で表示された <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=*********************************" type="text/javascript"></script> をエラーが表示されるページに貼り付ける ここまでの作業をおこなっております。 ただ、これで正しいのかが分かりません。 詳しい方からのご助言頂けますでしょうか？

  • Google Map （外部から情報ウィンドウ開く

    Google Maps API v3　において「地図外のHTMLから地図内の情報ウィンドウを開く」ということをやろうとしているのですが、どうにもうまくいきません。 下記コードにおいて、地図外にある「あいうえお商店」や「かきくけこ不動産」をクリックした際、地図内に情報ウィンドウが開くようにするためにはどのようにすればよいでしょうか。 すでに丸3日間悩んでおり、私の力ではどうにもならないと判断したため、皆さまのお力をお借りすることにしました。大変恐れ入りますが、貧弱な知識の私にどうか知恵を与えてやって下さい。どうぞよろしくお願い致します。 深みにはまって抜け出せないコードは以下の通りです。 ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var currentInfoWindow = null; //最後に開いた情報ウィンドウを記憶 function initialize() { var latlng = new google.maps.LatLng(35.67105, 139.743624); var opts = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); // ***************１件目のデータ*************** var m_latlng1 = new google.maps.LatLng(35.675224, 139.737914); var marker1 = new google.maps.Marker({position: m_latlng1,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|3CFFF8|000000',title: '港区赤坂3-3-3' }); var contentString1= '</p>あいうえお商店</p></div>'; var infowindow1 = new google.maps.InfoWindow({content: contentString1 }); // ***************１件目のデータ*************** // ***************２件目のデータ*************** var m_latlng2 = new google.maps.LatLng(35.670772, 139.733875); var marker2 = new google.maps.Marker({position: m_latlng2,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|3CFFF8|000000',title: '港区赤坂5-5-5' }); var contentString2= '</p>かきくけこ不動産</p></div>'; var infowindow2 = new google.maps.InfoWindow({content: contentString2 }); // ***************２件目のデータ*************** google.maps.event.addListener(marker1 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow1.open(map,marker1); currentInfoWindow = infowindow1; }); google.maps.event.addListener(marker2 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow2.open(map,marker2); currentInfoWindow = infowindow2; }); } function myclick(idx) { google.maps.event.trigger(marker[idx],'click'); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 700px; height: 500px"></div> 1　<a href="javascript:myclick(0)">あいうえお商店</a></p> 2　<a href="javascript:myclick(1)">かきくけこ不動産</a></p> </body> </html> ---------------------------------------------------------------- 大変恐れ入りますが、どうぞよろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する