人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Google Mapの検索結果を自サイトで実現したい

google mapで、緯度経度、もしくは住所の文字列を入れて検索した形で、地図を表示させたいです。
といっても表示させたいのは、Googleマップのページではなく、自サイトです。
APIを使えば出来るような気がします。
実際、

Google Mapsにリンクを張る時に、緯度経度を指定してその場所に… - 人力検索はてな
http://q.hatena.ne.jp/1250733878

という質問のページにy-kawazさんという方が、

http://www.kawaz.jp/tmp/maps/marker-by-param.html?x=139.6995289&y=35.6563445&zoom=18

というリンクを貼っています。
まさにこれを私はやりたいのです。xの経度、yの緯度で、地図の表示結果を自サイトのドメイン(上記の場合はwww.kawaz.jp)で実現したいです。
どういったAPIを使えばよいのか、コードを埋め込む必要があるとすればどこに埋め込めばよいのか等、お教えいただけますでしょうか。
よろしくお願い致します。

●質問者: sherlockhomeless
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●3000ポイント ベストアンサー

緯度と経度を指定する場合にはこんな感じ。

<script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false"></script>
<script>
window.addEventListener("DOMContentLoaded", function() {
 // パラメータの切り出し
 var param = {}
 location.search.substring(1).split("&").forEach(function(s) {
 var a = s.split('=');
 param[a[0]] = a[1];
 });

 // 拡大
 var zoom = parseInt(param['zoom']);

 // 緯度、経度
 var latlng = new google.maps.LatLng(param['lat'],param['lng']);

 // 地図
 var map = new google.maps.Map(document.getElementById("map"), {
 zoom: zoom,
 center: latlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 // マーカー
 var marker = new google.maps.Marker({
 position: latlng,
 map: map
 });
 
});
</script>
<style>
#map {
 width: 1000px;
 height: 500px;
}
</style>

<div id="map"></div>

パラメータは以下の三つ。

こんな感じで使うのを想定しています。

http://my.site/map?lat=35.681298&lng=139.7662469&zoom=7


Google Maps API を使う場合には、API キーが必要です(上記のソースでは省略してます)。

住所から検索するには Geocoder というクラスを使います。
検索してから地図を表示するには、こんな感じになります(スクリプト部分だけ)。

 var geocoder = new google.maps.Geocoder();
 geocoder.geocode({
 address: param['address']
 }, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
 console.log(results[0]);
 var latlng = results[0].geometry.location;

 var map = new google.maps.Map(document.getElementById("map"), {
 zoom: zoom,
 center: latlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 });
 
 var marker = new google.maps.Marker({
 position: latlng,
 map: map
 });
 }
 });


jsFiddle で試してみたのがこちら(パラメータはソースに埋め込んでます)。
https://jsfiddle.net/a9x8fw5a/embedded/



追記です。

すみません、住所から表示する方法も試してみようと思ったのですが。

Geocoder は、以下のように使います。

 var geocoder = new google.maps.Geocoder();
 geocoder.geocode({
 // Geocoder のパラメータ

 }, function(results, status) {
 // もし、候補が見つかったら
 if (status == google.maps.GeocoderStatus.OK) {
 /*
 ★検索結果 (results) から緯度、経度を取り出して処理をする
 */
 }
 });

「★検索結果 (results) から緯度、経度を取り出して処理をする」の部分は、緯度、経度を直接指定したときと、ほぼ同じコードになります。

緯度、経度を使うときと同じように、住所を検索する場合のコードをまるっと乗せておきます(最初の回答で書いたコードでは、一ヶ所 考慮漏れがあったし)。

<script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false"></script>
<script>
window.addEventListener("DOMContentLoaded", function() {
 // パラメータの切り出し
 var param = {}
 location.search.substring(1).split("&").forEach(function(s) {
 var a = s.split('=');
 param[a[0]] = a[1];
 });

 // 拡大
 var zoom = parseInt(param['zoom']);

 // --- ここまで、緯度、経度をパラメータで渡すときと、同じです


 // Geocoder で "address" で地図を検索
 var geocoder = new google.maps.Geocoder();
 geocoder.geocode({
 address: decodeURIComponent(param['address']), /* 日本語を通すには decode が必要 */
 }, function(results, status) {
 // もし、候補が見つかったら
 if (status == google.maps.GeocoderStatus.OK) {

 // --- ここから、緯度、経度をパラメータで渡すときと、ほとんど同じです

 // 最初の検索結果の緯度、経度
 var latlng = results[0].geometry.location;

 // 地図
 var map = new google.maps.Map(document.getElementById("map"), {
 zoom: zoom,
 center: latlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 // マーカー
 var marker = new google.maps.Marker({
 position: latlng,
 map: map
 });

 // --- ここまで
 } else {
 var e = document.getElementById("map");
 e.innerHTML = "見つかりません<br>キーワード:" + param['address'];
 }
 });

});
</script>
<style>
#map {
 width: 1000px;
 height: 500px;
}
</style>

<div id="map"></div>

パラメータは以下の二つ。

こんな感じで使うのを想定しています。

http://my.site/map?address=皇居&zoom=15




再度、追記です。

そして皇居周辺のラーメン屋さんを検索したい場合、google mapだと「東京都千代田区千代田1?1 ラーメン屋」と検索すると、周辺のラーメン屋がマッピングされて表示されます。
...
こういった表示方法は出来ないでしょうか?

Google Places API というものを使いました。

<!-- libraries=places を追加、key は割愛 -->
<script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false&libraries=places&key=..."></script>
<script>
window.addEventListener("DOMContentLoaded", function() {
 // パラメータの切り出し(ここが抜けてました)
 var param = {}
 location.search.substring(1).split("&").forEach(function(s) {
 var a = s.split('=');
 param[a[0]] = a[1];
 });

 // 拡大
 var zoom = 16;// 仮

 var geocoder = new google.maps.Geocoder();
 geocoder.geocode({
 address: decodeURIComponent(param['address']), /* 日本語を通すには decode が必要 */
 }, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {

 // 緯度、経度
 var latlng = results[0].geometry.location;

 // 地図
 var map = new google.maps.Map(document.getElementById("map"), {
 zoom: zoom,
 center: latlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 });


 // キーワードで検索
 var ps = new google.maps.places.PlacesService(map);
 ps.nearbySearch({
 name: decodeURIComponent(param['keyword']),
 radius: 5000, /* 半径 5km の範囲 */
 location: latlng,
 }, function(results, status, page) {
 if (status == google.maps.places.PlacesServiceStatus.OK) {

 var bounds = new google.maps.LatLngBounds();

 results.forEach(function(r) {
 var latlng = r.geometry.location;
 var title = r.name + "\n" + r.vicinity;

 // マーカー
 var marker = new google.maps.Marker({
 position: latlng,
 title: title,
 map: map
 });

 bounds.extend(latlng);
 });

 map.fitBounds(bounds);
 }

 // 拡大率は 16 まで
 var zoom_listener = google.maps.event.addListener(map, "idle", function() { 
 if (map.getZoom() > 16) {
 map.setZoom(16); 
 }
 google.maps.event.removeListener(zoom_listener); 
 });
 });


 } else {
 var e = document.getElementById("map");
 e.innerHTML = "見つかりません<br>キーワード:" + param['address'];

 }
 });



});
</script>
<style>
#map {
 width: 1000px;
 height: 500px;
}
</style>

<div id="map"></div>

パラメータは以下の二つ。

address で地図を探し、そこを中心にして半径 5km の範囲で keyword に当てはまる地図情報を探します。
拡大度は、16 を最大として検索結果が入るサイズに調整しています。

こんな感じで使うのを想定しています。

http://my.site/map?address=皇居&keyword=ラーメン



# すみません、Places API を使うサンプルで、パラメータを切り出す部分が抜けてました


sherlockhomelessさんのコメント
a-kuma3さんありがとうございます! a-kuma3さんにお教えいただきましたコードで、もうちょっとでうまくいきそうだったのですが。 地図が一瞬、読み込まれるのですが…すぐに切り替わり、 「エラーが発生しました。 このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。」 と出てきてしまいます。 私が調べたところ、 http://nendeb.com/429 によると、どうやらGoogle MapsのAPIキーなるものが必要らしい?というわけで、なんとかそれは取得できまして。 a-kuma3さんが記載していただいたコードの、 <script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false"></script> <script> の部分だけ、 <script src="https://maps.googleapis.com/maps/api/js?key=(Googleで取得したAPIキー)" ></script> <script> に変えてみたのですが。 APIキーを入れたにも関わらず、同じように一瞬、地図が読み込まれて、また「エラーが発生しました…」と出てきてしまいます。 APIキーを入れる場所が間違っていたのでしょうか。 もし取得したAPIキーの情報を入れるとするとなると、a-kuma3さんが記載していただいたソースコードのどこに入れたらよいでしょうか? たびたびお手数おかけします、よろしくお願い致します。

sherlockhomelessさんのコメント
に変えてみたのですが。 APIキーを入れたにも関わらず、同じように一瞬、地図が読み込まれて、また「エラーが発生しました…」と出てきてしまいます。 APIキーを入れる場所が間違っていたのでしょうか。 もし取得したAPIキーの情報を入れるとするとなると、a-kuma3さんが記載していただいたソースコードのどこに入れたらよいでしょうか? たびたびお手数おかけします、よろしくお願い致します。

a-kuma3さんのコメント
>> &lt;script type="text/javascript" src="[]http://maps.google.co.jp/maps/api/js?sensor=false[]"></script> << この部分を >> &lt;script type="text/javascript" src="[]http://maps.google.co.jp/maps/api/js?sensor=false[]<span style="color:red;">&key=APIキー</span>"></script> << というように変えれば良いです。 script タグの src 属性のお尻に &amp; をつけて、<code>key=取得したAPIキー</code> をくっつけます。 使ってるブラウザは何でしょうか。 javascript のコンソールの表示の仕方は分かりますか? 今どきのブラウザだと F12 を押すと開発者向けの機能が表示されて、いくつかクリックをすると(見たら分かるはず)コンソールを表示できます。 APIキーを指定してない、正しく指定できていない、とかだと、以下のようなエラーメッセージがコンソールに表示されているはずです。 >> Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error << >> 私が調べたところ、 []http://nendeb.com/429[] によると、どうやらGoogle MapsのAPIキーなるものが必要らしい?というわけで、なんとかそれは取得できまして。 << そのサイトだったら、こちらも確認しておいた方が良さそうです。 http://nendeb.com/276 どんなページで使うか、というのを登録しなきゃいけなくなってます。 ここ(HTTP リファラー)を、実際に使うページの URL が含まれるように設定してみてください。

sherlockhomelessさんのコメント
a-kuma3さんありがとうございます。 Google Maps APIだと「Google Maps API error: RefererNotAllowedMapError」みたいなのが出てきてうまくいかなかったのですが、Google Maps JavaScript APIを使うとうまくいきました! ありがとうございます。 すみません、住所から表示する方法も試してみようと思ったのですが。 「var param = {}location. ? マーカーvar marker = new google.maps.Marker({position: latlng,map: map});});」を、a-kuma3さんが記載してくださったGeocoderというクラスにさしかえて。 http://(自分のサイトドメイン)/map?lat=(住所情報) のようにURLを入れてみると。 地図が真っ白で何も表示されない状況になりました…。 たびたびすみません、住所から地図を出す方法もご教授いただけないでしょうか。 よろしくお願い致します<m(__)m>

a-kuma3さんのコメント
>> すみません、住所から表示する方法も試してみようと思ったのですが。 << Geocoder は、以下のように使います。 >|javascript| var geocoder = new google.maps.Geocoder(); geocoder.geocode({ // Geocoder のパラメータ }, function(results, status) { // もし、候補が見つかったら if (status == google.maps.GeocoderStatus.OK) { /* ★検索結果 (results) から緯度、経度を取り出して処理をする */ } }); ||< 「★検索結果 (results) から緯度、経度を取り出して処理をする」の部分は、緯度、経度を直接指定したときと、ほぼ同じコードになります。 回答に追記したので、確認してみてください。

sherlockhomelessさんのコメント
ありがとうございます。 住所の方もうまくいきました! すみません、これで最後にしますので、もう1つ、お願いがあります。 例えば皇居を例にすると、住所は「東京都千代田区千代田1-1」になります。 そして皇居周辺のラーメン屋さんを検索したい場合、google mapだと「東京都千代田区千代田1-1 ラーメン屋」と検索すると、周辺のラーメン屋がマッピングされて表示されます。 https://www.google.co.jp/maps/search/%E6%9D%B1%E4%BA%AC%E9%83%BD%E5%8D%83%E4%BB%A3%E7%94%B0%E5%8C%BA%E5%8D%83%E4%BB%A3%E7%94%B0%EF%BC%91%E2%88%92%EF%BC%91+%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3%E5%B1%8B/@35.6847878,139.7399841,14z/data=!3m1!4b1 こういった表示方法は出来ないでしょうか?

a-kuma3さんのコメント
>> そして皇居周辺のラーメン屋さんを検索したい場合、google mapだと「東京都千代田区千代田1?1 ラーメン屋」と検索すると、周辺のラーメン屋がマッピングされて表示されます。 ... こういった表示方法は出来ないでしょうか? << 回答に追記しました。 # Geocoder の結果を複数処理すれば良いんだろう、とか思っていたら、ひとつしか返ってこなくて、ちょいと手こずったのは内緒です <tt>:-)</tt>

sherlockhomelessさんのコメント
ありがとうございます。 さっそく試してみたのですが。 a-kuma3さんが紹介してくださったGoogle Places APIは、 Places API for Android Places API for iOS Places JavaScript Library Places API Web Service の4つありましたので、まずPlaces JavaScript Libraryをクリックしてみました。 しかし「キーの取得」が選べなかったので、Places API Web Serviceでキーを取得し、そのキーをa-kuma3さんのコードの“=places&key=...”の三点リーダの箇所に入れて地図の表示を試みました。 すると…読み込んでもなぜか真っ白な状態で、地図が表示されませんでして。 一瞬表示されるということもないのです。 Google Maps APIはたくさんありますが… http://f.hatena.ne.jp/sherlockhomeless/20160802055823 Google Maps Javascript APIの方?かと思いまして「Google API コンソール で Google Maps JavaScript API Google Maps Geocoding API Google Maps Directions API Google Maps Distance Matrix API Google Maps Elevation API Google Places API Web Service を有効にするアプリケーションの登録」をやってみまして、そちらのAPIキーを使ってみたのですが。 やはり真っ白で何も表示されない状況です…たびたびお手数お掛け致します、考え得る原因と対処法をご教授いただけないでしょうか。

a-kuma3さんのコメント
>> すると…読み込んでもなぜか真っ白な状態で、地図が表示されませんでして。 一瞬表示されるということもないのです。 << ライセンス云々ではなく、javascript のエラーが出ているような気がします。 javascript のコンソールでエラーの有無と内容を確認してみてください。

sherlockhomelessさんのコメント
a-kuma3さんがおっしゃるようにjavascriptのエラーが出ていました。 http://f.hatena.ne.jp/sherlockhomeless/20160802072135 ?address=皇居&keyword=ラーメン:115 Uncaught ReferenceError: param is not defined maps.google.co.jp/maps-api-v3/api/js/25/11/intl/ja_ALL/util.js:211 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required とありますが…何を意味しているのでしょうか…。

a-kuma3さんのコメント
すみません、パラメータを切り出す処理の部分を貼り忘れてました <tt>m(_ _)m</tt> 最後の Google Places API を使うサンプルを、(追記ではなく)修正しましたので、確認してみてください。

sherlockhomelessさんのコメント
a-kuma3さんありがとうございます、うまくプロットされました! 感謝感謝なのですが…本当に申し訳ないです、可能でしたら教えていただきたいのですが。 プロットされた地図の上のスポットのマーク(赤丸枠の中の黒丸など)をクリックしたりしてみたのですが。 ラーメン屋の情報が表示されないのです。 通常のGoogle Mapでは「東京都千代田区千代田1?1 ラーメン屋」など検索すると、スポットのマークの横にお店の店名等の情報が記載されているのですが。 同じように、マークと同時に店舗名等の情報も表示することは出来ないでしょうか。 本当に何度もすみません、もし可能であれば、よろしくお願いしますm(__)m

sherlockhomelessさんのコメント
勘違いしてましった、マークをクリックせずにマウスカーソルを合わせると情報が出てきました!ありがとうございましたm(__)m ただスマホからですと、スポットのアイコンをタップしても長押ししても出てこない状況でして…ここに新しい質問 http://q.hatena.ne.jp/1470174671 をさせていただきましたので、もしスマホからのスポット情報の閲覧も可能になる方法がありましたら、お手すきの時にご回答いただけますと幸いです。 よろしくお願い致します。

a-kuma3さんのコメント
>> プロットされた地図の上のスポットのマーク(赤丸枠の中の黒丸など)をクリックしたりしてみたのですが。 ラーメン屋の情報が表示されないのです。 << >> マークをクリックせずにマウスカーソルを合わせると情報が出てきました! << 回答にはっきり書いてなくて、すみません。 このあたりも、API を使うときには作り込んであげる必要があります。 プログラムなので、店舗の情報を吹き出しを表示したりマーカーの横に表示したりというのも、どうやるかを決めれば大抵のことはできます。 簡単にできるか、面倒か、というのはありますけれど <tt>:-)</tt>
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ