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

Google Mapでの住所表示、周辺スポット表示を、同一サイトでページ毎に行いたい

前回の質問 http://q.hatena.ne.jp/1469814381 で、住所表示と周辺スポット表示が可能にはなったのですが。
自サイトで指定の住所だけを表示するためのコードと、指定の住所周辺のラーメン屋などのスポットを表示するためのコードにつきまして。
片方のコードを、headタグの終わり(?</head>)の前に入れて、地図を表示したいページの特定箇所に「<div id="map"></div>」とすれば、地図は表示されるのですが。

あるページには指定の住所だけを表示する地図を、あるページには住所周辺のスポットを表示する地図を表示したい場合、HTMLサイトでしたら各ページにそれぞれのコードを入れればうまくいくのですが。
WordPressサイト等の場合、ヘッダーを記載するエリアが共通で1箇所しかない?(header.php)ので、両方のコードを入れるわけにもいかないような気もします。
どうすれば、それぞれのページでタイプの違う地図を表示することができますでしょうか。
よろしくお願い致します。

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

▽最新の回答へ

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

以前の質問の回答の最後のコードを共通部分を関数として切り出してみました。
URL から切り出していた住所やキーワードなどのパラメータが、関数の引数になります。

<!-- libraries=places を追加、key は割愛 -->
<script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false&libraries=places&key=..."></script>
<script>
function display_map(id, zoom, address, keyword) {

 var geocoder = new google.maps.Geocoder();
 geocoder.geocode({
 address: address,
 }, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {

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

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


 if (keyword) {
 // キーワードで検索
 var ps = new google.maps.places.PlacesService(map);
 ps.nearbySearch({
 name: 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 marker = new google.maps.Marker({
 position: latlng,
 map: map
 });
 }


 } else {
 var e = document.getElementById("map");
 e.innerHTML = "見つかりません<br>住所:" + address;

 }
 });



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

上記を、<head> の中に記載してください。

地図を表示する display_map 関数は、四つのパラメータをとります。

 display_map(地図を表示する要素のID, 拡大率, 住所, スポットのキーワード);

# 関数名が一般的に過ぎるかも(他の機能が持つ関数と衝突するかも)しれません


地図を表示する個別のページには、以下のように書きます。
以下のコードは、皇居の地図を表示して、ラーメンの情報にマーカーを打ちます。

<script>
window.addEventListener("DOMContentLoaded", function() {
 display_map("map", 16, '皇居', 'ラーメン');
});
</script>

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

地図を表示する領域は、script タグと離れたところに書いても大丈夫です。


住所だけ指定する場合には、四番目の引数 キーワードを空白にするか、省略します。

<script>
window.addEventListener("DOMContentLoaded", function() {
 display_map("map", 16, '皇居', '');
});
</script>

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

こちらの場合は、2番目の引数で指定された拡大率で、地図の中央にマーカーを打ちます。





追記です。

http://my.site/map の方ではkeywordパラメータは指定せずに無視していただいて構いません。
http://my.site/map2 の方では、もし指定がないのであればマーカーは無し表示でよいです。
クリックした際はスポット名と住所が出てきたら幸いです。

了解です。

下記を、<head> の中に記載してください。
最初に回答したコードに、吹き出しを表示する処理を追加しています。

<!-- libraries=places を追加、key は割愛 -->
<script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false&libraries=places&key=..."></script>
<script>
function display_map(id, zoom, address, keyword) {

 var geocoder = new google.maps.Geocoder();
 geocoder.geocode({
 address: address,
 }, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {

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

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


 if (keyword) {
 // キーワードで検索
 var ps = new google.maps.places.PlacesService(map);
 ps.nearbySearch({
 name: 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);

 // 吹き出し
 var iw = new google.maps.InfoWindow({
 content: title = r.name + "<br>" + r.vicinity,
 size: new google.maps.Size(50, 30)
 });

 // マーカーをクリックしたときに吹き出しを表示する
 google.maps.event.addListener(marker, 'click', function() {
 iw.open(map, marker);
 });

 });

 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 marker = new google.maps.Marker({
 position: latlng,
 map: map
 });

 // 吹き出し
 var iw = new google.maps.InfoWindow({
 content: title = results[0].formatted_address,
 size: new google.maps.Size(50, 30)
 });

 // マーカーをクリックしたときに吹き出しを表示する
 google.maps.event.addListener(marker, 'click', function() {
 iw.open(map, marker);
 });
 }


 } else {
 var e = document.getElementById("map");
 e.innerHTML = "見つかりません<br>住所:" + address;

 }
 });

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


スポットを探さなくて良い http://my.site/map の方に以下のコードを書いてください。

<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']), address = '', keyword = '';

 if (param['address']) {
 address = decodeURIComponent(param['address']);
 }

 display_map("map", zoom, address, keyword);
});
</script>
<div id="map"></div>


スポットを探す方の http://my.site/map2 の方には以下のコードを書いてください。

<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']), address = '', keyword = '';

 if (param['address']) {
 address = decodeURIComponent(param['address']);
 }
 if (param['keyword']) {
 keyword = decodeURIComponent(param['keyword']);
 }

 display_map("map", zoom, address, keyword);
});
</script>
<div id="map"></div>

sherlockhomelessさんのコメント
a-kuma3さんありがとうございます。 個別のページごとに別々のスクリプトを加えることで、地図の表示方法を変えることができました。 さらに追加で質問で恐縮なのですが。 URLに打ち込まれるキーワードに連動して、スクリプトの中身も変えるようなことは出来ないでしょうか? 例えば、地図を表示するリンクは、 http://my.site/map?address皇居&zoom=15/ となることもあるのですが、 http://my.site/map?address新宿御苑&zoom=15/ になったり、 http://my.site/map?address東京都港区芝公園4丁目2-8&zoom=15/ (東京タワー) と住所表記にしたりと、常に動的にリンク先が変化します。 それに連動して、 display_map("map", 16, '皇居', ''); display_map("map", 16, '新宿御苑', ''); display_map("map", 16, '東京都港区芝公園4丁目2-8', ''); と、スクリプトの方もURLに打ち込んだキーワードと共に変わることで、地図にピンを表示させることが出来るようになると思うのですが、そういったURLに連動した形でスクリプトを変えるといった操作は可能でしょうか? 今回の例ですと「皇居」以外の住所を表示する際、キーワードの数だけ別のスクリプトを用意しないといけないとなりますと大変時間が掛かってしまうように感じまして。 度々恐縮です、もし可能でしたらお時間のある際によろしくお願いします。

a-kuma3さんのコメント
質問の文面に「WordPressサイト等」とあったので、住所やスポットなどの情報はカスタムフィールドから取得するようなのをイメージしてました。 URL から抜き出すのであれば、前の質問の回答とほとんど変わらないと思うのですが、WordPress は関係なくて、スポットの情報のあり/なしで動作を切り替えたい、というのが質問の趣旨だったのでしょうか。

sherlockhomelessさんのコメント
すみません、質問が判りにくかったです。 そうですね、スポットの情報はピンのアイコン?をクリックすれば出てきてほしいのですが。 同じサイト内で、 http://my.site/map http://my.site/map2 という、2つの地図表示用ページを用意してまして。 片方には、 http://my.site/map?address=皇居&zoom=15 と、特定の住所を拡大表示するような地図を表示を行い。 map2の方には、 http://my.site/map2?address=皇居&keyword=ラーメン と、スポット情報を表示したいといった感じです。 以前a-kuma3さんより教えていただきましたGoogle Places APIを用いたスクリプトを入れて、どっちの表示方法も代用できると思ったのですが。 http://my.site/map?address=皇居&zoom=15 特定の住所を入れて表示先URLを指定した際、ピンのアイコンと場所情報が出てこなかったので。 特定の住所でも、周辺スポット検索でも、ピンのアイコンと場所情報が表示できるようになればいいなと思いまして。

a-kuma3さんのコメント
過去2回の質問の合わせ技みたいなのを期待しているわけですね。 # 想像力が足りてない (´・ω・`) ついでに、いくつか質問を。 特定の住所を指定する方の []http://my.site/map[] の方で、keyword パラメータが指定されているときはどうしますか。 無視します? 逆に、スポット情報を表示する []http://my.site/map2[] で、keyword パラメータが指定されてなかったときは、どうしますか。 map と同じようにマーカーを地図の中央にひとつ打つか、それとも、マーカーがひとつもない状態で表示するか。 後者の方が自然ですかね。 あと、特定の住所を指定する方の []http://my.site/map[] の方でマーカーをクリックしたときの吹き出しには、何を表示しますか。 住所とか表示できれば良いですかね。

sherlockhomelessさんのコメント
はい、http://my.site/map の方ではkeywordパラメータは指定せずに無視していただいて構いません。 http://my.site/map2 の方では、もし指定がないのであればマーカーは無し表示でよいです。 クリックした際はスポット名と住所が出てきたら幸いです。 もし可能であれば…よろしくお願い致しますm(__)m

a-kuma3さんのコメント
>> []http://my.site/map[] の方ではkeywordパラメータは指定せずに無視していただいて構いません。 []http://my.site/map2[] の方では、もし指定がないのであればマーカーは無し表示でよいです。 クリックした際はスポット名と住所が出てきたら幸いです。 << 了解です。 回答に追記しましたので、確認してみてください。

sherlockhomelessさんのコメント
ご回答いただきましてありがとうございます。 http://my.site/map の方なのですが、住所等で、 http://my.site/map?address=(住所)&zoom=15 と指定したのですが、吹き出しのアイコンが出てこない状況でして。 map2の方は問題なく出てきたのですが。 <script> window.addEventListener("DOMContentLoaded", function() {・・・ のコードの方は、<body>タグよりも下に入れても問題ないでしょうか?

sherlockhomelessさんのコメント
・・・window.addEventListene・・・ のコードの方は、<body>タグ以下に入れても問題ないでしょうか。

a-kuma3さんのコメント
>> と指定したのですが、吹き出しのアイコンが出てこない状況でして。 map2の方は問題なく出てきたのですが。 << こちらで試している環境では、表示できているんですが、何でしょうねえ。 javascript のコンソールを確認してみてください。 あと、ブラウザの「ページのソース」を表示する機能を使って、map2 の方のソースを確認してみてください。 &lt;head&gt; 内に書いているコードの後半の辺りの、以下の部分、「// 吹き出し」以降は展開されているでしょうか。 >|javascript| } else { // キーワードが指定されていないときは、地図の中央にマーカー var marker = new google.maps.Marker({ position: latlng, map: map }); // 吹き出し var iw = new google.maps.InfoWindow({ content: title = results[0].formatted_address, size: new google.maps.Size(50, 30) }); // マーカーをクリックしたときに吹き出しを表示する google.maps.event.addListener(marker, 'click', function() { iw.open(map, marker); }); ||< 因みに、address に指定してる住所はどんなので試してますか? >> ・・・window.addEventListene・・・ のコードの方は、&lt;body&gt;タグ以下に入れても問題ないでしょうか。 << 大丈夫です。 地図の表示までできていれば、そちらは正しく設置できています。

sherlockhomelessさんのコメント
mapもmap2もソースを見ると吹き出しのコードは出てきているようなのですが、実際にmapの方は表示されない状況です。 住所は、 http:///my.site/map?address=%E9%95%B7%E9%87%8E%E7%9C%8C%E5%8C%97%E4%BD%90%E4%B9%85%E9%83%A1%E8%BB%BD%E4%BA%95%E6%B2%A2%E7%94%BA%E9%95%B7%E5%80%894963-7/ のような日本語で試しております。 上記のように住所だけではうまく吹き出しが出てこないのですが、 http://my.site/map2?address=%E9%95%B7%E9%87%8E%E7%9C%8C%E5%8C%97%E4%BD%90%E4%B9%85%E9%83%A1%E8%BB%BD%E4%BA%95%E6%B2%A2%E7%94%BA%E9%95%B7%E5%80%894963-7&keyword=%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3/ のように「&keyword=ラーメン」とキーワードを指定すると吹き出しが出てきます。 javascriptのコンソールは、 http://f.hatena.ne.jp/sherlockhomeless/20160812120102 → QMIGRATE: Migrate is installed, version 1.4.1 js:94 You have included the Google Maps API multiple times on this page. This may cause unexpected errors.ah @ js:94 map:375 Uncaught SyntaxError: Unexpected token < maps.google.co.jp/maps-api-v3/api/js/25/13/intl/ja_ALL/util.js:211 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required 3public-api.wordpress.com/:481 WebSocket connection to 'wss://public-api.wordpress.com/pinghub/wpcom/me/newest-note-data' failed: Error during WebSocket handshake: Unexpected response code: 403 のようなものは出てくるのですが・・・。

a-kuma3さんのコメント
>> Uncaught SyntaxError: Unexpected token &lt; map:375 << 多分、このエラーのせいです。 「ページのソース表示」で見たときの []http:///my.site/map[] の 375行目がおかしいです。 吹き出しに表示する内容を自分でいじってません? そこの書き方がまずいのかなあ、と想像します。

sherlockhomelessさんのコメント
いえ、自分でいじったのはAPIのkeyを入れるところと、scriptの横幅と縦幅の部分を、 <style> #map { width: 100%; /* 横幅を自動で調整 */ height: 350px; /* とりあえず、高さを 350px に設定 */ } /* 横幅が 768px 以上の場合:ざっくり言うとスマホ以外 */ @media (min-width: 768px) { #map { height: 600px; /* そのときは、高さを 600px に設定 */ } } </style> に変えたぐらいなのですが…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 を有効にするアプリケーションの登録 https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&keyType=CLIENT_SIDE&reusekey=true&hl=ja で取得したAPIを使ってみたのですが・・・。

a-kuma3さんのコメント
>> に変えたぐらいなのですが…APIがもしかして間違っているのでしょうか。 << map2 の方がきちんと動いているようなので、大丈夫だとは思うのですが。 あ、こんなエラーも出てますね。 >> You have included the Google Maps API multiple times on this page. This may cause unexpected errors.ah @ js:94 js:94 << いちおう、Google Maps API を読み込んでる script タグ(API キーをしていしてるやつ)が、ふたつ入ってないかどうかを、ブラウザの「ページのソース」を表示する機能を使って、map の方で展開されたソースを確認してみてください。 でも、複数読み込んでたとしても、↓のようなエラーにはならないと思うんですけどね。 >> Uncaught SyntaxError: Unexpected token &lt; map:375 << map の方で展開されたソースの 375行目を中心に前後 10行くらいをコメントに載せるの可能ですか? スーパーPRE 記法というのを使うと、html のタグとかがあってもペタッと貼り付けられます。 >> &gt;|| ここに貼り付けたいソース ||&lt; << もし、外部に公開しているサイトだったら、URL を教えてもらえれば、直接 見に行ってみますけど。

sherlockhomelessさんのコメント
もう1度APIキーを取り直して、適当に作ってみたサイトで、a-kuma3さんのスクリプトを入れてみました。 header.phpの</head>の前に、長いコードを。 http://pokemon.xn--hills-o22hlty88m.com/map に、住所吹き出しは出したいですがスポットは探さなくて良い方のコードを。 http://pokemon.xn--hills-o22hlty88m.com/map2 に、スポットを探す方のコードを入れた固定ページを作成しました。 しかし… http://pokemon.xn--hills-o22hlty88m.com/map?address=%E9%95%B7%E9%87%8E%E7%9C%8C%E5%8C%97%E4%BD%90%E4%B9%85%E9%83%A1%E8%BB%BD%E4%BA%95%E6%B2%A2%E7%94%BA%E9%95%B7%E5%80%894963-7/ も、 http://pokemon.xn--hills-o22hlty88m.com/map2?address=%E9%95%B7%E9%87%8E%E7%9C%8C%E5%8C%97%E4%BD%90%E4%B9%85%E9%83%A1%E8%BB%BD%E4%BA%95%E6%B2%A2%E7%94%BA%E9%95%B7%E5%80%894963-7&keyword=%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3/ も、真っ白になってしまいました。 何度もすみません…お手すきの時にサイトの方をご覧いただきチェックしてくださいますと幸いです。 よろしくお願い致します。

a-kuma3さんのコメント
URL どうも。話が早いです <tt>:-)</tt> 固定ページに埋め込んだコードが、こんなふうになってます。 >|html| <div class="entry-content"> <p><script> window.addEventListener("DOMContentLoaded", function() { // パラメータの切り出し var param = {} location.search.substring(1).split("&").forEach(function(s) { var a = s.split('='); param[a[0]] = a[1]; });</p> <p> var zoom = parseInt(param['zoom']), address = '', keyword = '';</p> <p> if (param['address']) { address = decodeURIComponent(param['address']); }</p> <p> display_map("map", zoom, address, keyword); }); </script></p> <div id="map"></div> ||< &lt;script&gt; の内側のコードに P タグが入ってるのがエラーの原因です。 固定ページのテンプレートにコードを設定してますか?

sherlockhomelessさんのコメント
ご指摘ありがとうございます。 固定ページ(page.php)には何もコードを入れていなかったのですが、wordpressの仕様上でしょうか自動的に<p>タグが入れられるみたいでして。 function.phpに指定のコード http://scope.minibird.jp/niji-life/archives/289 を入れるとWordPressの自動挿入されるpタグを削除することができました。 そうすると、真っ白な画面になる状況は避けられ、地図の枠みたいなのは、mapもmap2も出てきたのですが。 http://pokemon.xn--hills-o22hlty88m.com/map?address=%E9%95%B7%E9%87%8E%E7%9C%8C%E5%8C%97%E4%BD%90%E4%B9%85%E9%83%A1%E8%BB%BD%E4%BA%95%E6%B2%A2%E7%94%BA%E9%95%B7%E5%80%894963-7/ http://pokemon.xn--hills-o22hlty88m.com/map2?address=%E9%95%B7%E9%87%8E%E7%9C%8C%E5%8C%97%E4%BD%90%E4%B9%85%E9%83%A1%E8%BB%BD%E4%BA%95%E6%B2%A2%E7%94%BA%E9%95%B7%E5%80%894963-7&keyword=%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3/ 肝心の地図が表示されない状況でして…。

sherlockhomelessさんのコメント
firefoxで見ると地図の枠すら出てこないですね。<p>タグは消えたはずなのですが・・・。

a-kuma3さんのコメント
スクリプトの P タグは消えてます。 今度は、Google Maps API の認証ができてない(リファラの設定がされていない)というエラーが出てます。 >> "Google Maps API error: RefererNotAllowedMapError []https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error[] Your site URL to be authorized: []http://pokemon.低価格hills.com/map?address=%E9%95%B7%E9%87%8E%E7%9C%8C%E5%8C%97%E4%BD%90%E4%B9%85%E9%83%A1%E8%BB%BD%E4%BA%95%E6%B2%A2%E7%94%BA%E9%95%B7%E5%80%894963-7/[]" << Google の登録画面でリファラの設定を確認してください。

sherlockhomelessさんのコメント
お付き合いいただきましてありがとうございます。 Google API Manager https://console.developers.google.com/apis/credentials/key/0?project=active-woodland-140107&hl=ja にて、 「この HTTP リファラー(ウェブサイト)からのリクエストを受け入れる (省略可) ワイルドカードにはアスタリスクを使用します。ここを空欄にすると、どのリファラーからのリクエストも受け付けることになります。このキーを本稼働環境で使用する前に、必ずリファラーを指定してください。 」の箇所に、 http://pokemon.xn--hills-o22hlty88m.com/ pokemon.xn--hills-o22hlty88m.com *pokemon.xn--hills-o22hlty88m.com* の3つのアドレスを指定して受け入れるようにはしているはずなのですが。 「?sensor=false」はいらない、みたいな記事 http://on-ze.com/archives/4795 を見つけたので、それを除いて「・・・js&libraries=places&key=・・・」みたいにしたら、地図の枠が消えてしまいました・・・。

a-kuma3さんのコメント
>> 「?sensor=false」はいらない、みたいな記事 []http://on-ze.com/archives/4795[] を見つけたので、それを除いて「・・・js&libraries=places&key=・・・」みたいにしたら、地図の枠が消えてしまいました・・・。 << <code style="color:red;">?</code> を消しちゃ駄目です。 <code>api/js</code> の後は <code style="color:red;">?</code> にしてください。 <code>src="[]http://maps.google.co.jp/maps/api/js[]<span style="color:red;">?</span>libraries=places&key=..."</code>

sherlockhomelessさんのコメント
?を入れているんですが、chromeでは地図の枠しか出ず、firefoxでは真っ白状態ですね…。

a-kuma3さんのコメント
スクリプトのロードエラーはなくなりましたが、元に(sensor=false をつけてたときに)戻って、このエラーが出ています。 # javascript のコンソールで確認できると思います >> "Google Maps API error: RefererNotAllowedMapError []https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error[] Your site URL to be authorized: []http://pokemon.低価格hills.com/map2?address=%E9%95%B7%E9%87%8E%E7%9C%8C%E5%8C%97%E4%BD%90%E4%B9%85%E9%83%A1%E8%BB%BD%E4%BA%95%E6%B2%A2%E7%94%BA%E9%95%B7%E5%80%894963-7&keyword=%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3/[]" << 多言語ドメインなのが気になるんですよね。 ちょっと古い記事ですが↓ http://d.hatena.ne.jp/inokuni/20070521/p1

sherlockhomelessさんのコメント
a-kuma3さんの仰る通りで、英字のみのドメインでしたら、mapもmap2も表示されました。 mapに吹き出しが出てこない状況については、 /map?address=新宿御苑&keyword=新宿御苑&zoom=17 のように、keywordに同一のスポット名・住所を入れることで、吹き出しが表示されるようになりました! ありがとうございました。

質問者から

scritptの縦幅と横幅の指定は、以前a-kuma3さんにお教えいただいた、

・・・
#map {
width: 100%; /* 横幅を自動で調整 */
height: 350px; /* とりあえず、高さを 350px に設定 */
}
/* 横幅が 768px 以上の場合:ざっくり言うとスマホ以外 */
@media (min-width: 768px) {
#map {
height: 600px; /* そのときは、高さを 600px に設定 */
}
}
・・・

に変えました!


関連質問

●質問をもっと探す●



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