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を使えばよいのか、コードを埋め込む必要があるとすればどこに埋め込めばよいのか等、お教えいただけますでしょうか。
よろしくお願い致します。
No.1
4974
2154
3000pt
緯度と経度を指定する場合にはこんな感じ。
<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 というクラスを使います。
検索してから地図を表示するには、こんな感じになります（スクリプト部分だけ）。
7
7
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だと「東京都千代田区千代田１－１ ラーメン屋」と検索すると、周辺のラーメン屋がマッピングされて表示されます。
...
こういった表示方法は出来ないでしょうか？
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 を使うサンプルで、パラメータを切り出す部分が抜けてました
1
1
2
1
勘違いしてましった、マークをクリックせずにマウスカーソルを合わせると情報が出てきました！ありがとうございましたm(__)m
2016/08/03 06:52:05ただスマホからですと、スポットのアイコンをタップしても長押ししても出てこない状況でして…ここに新しい質問 http://q.hatena.ne.jp/1470174671 をさせていただきましたので、もしスマホからのスポット情報の閲覧も可能になる方法がありましたら、お手すきの時にご回答いただけますと幸いです。
よろしくお願い致します。
回答にはっきり書いてなくて、すみません。
2016/08/03 08:34:32このあたりも、API を使うときには作り込んであげる必要があります。
プログラムなので、店舗の情報を吹き出しを表示したりマーカーの横に表示したりというのも、どうやるかを決めれば大抵のことはできます。
簡単にできるか、面倒か、というのはありますけれど :-)