質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1374閲覧

Google Maps API グレー一色表示になる

chibiyuko_0124

総合スコア18

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/03/25 04:12

編集2019/03/25 06:00

お世話になっております。
Google Map APIにて外部jsonファイルを読み込みマーカーを表示させております。
マーカーが全国に散らばっているため、検索フォームで地名から座標を取得しそのエリアのマーカーが閲覧しやすいようにしております。

■困っていること
表示が不安定で、ファーストビューでマップ部分がグレー一色になってしまう時があります。
検索ボタンを押すとマップが表示されます。

■原因
下記jsのzoom: z || zoom部分
ズーム値の設定しています。
z・・・検索後の表示のズーム値を指定(13)
zoom・・・閲覧デバイスごとにファーストビューでのズーム値を指定(PC:11、スマホ:9)

この部分をzoom=11とすればグレー表示が解消されました。

JavaScript

1var place = '東京'; 2var infowindow = new google.maps.InfoWindow(); 3var zoom; 4var markers; 5var map; 6 7/* 検索ボタンの挙動 */ 8$(function () { 9 $('#searchButton').click(function (e) { 10 markerCluster.clearMarkers(); 11 e.preventDefault(); 12 place = $('#searchPlace').val(); 13 google.maps.event.addDomListener(window, 'load', initialize(place,13)); 14 }); 15}); 16function initialize(place,z) { 17 // インスタンス[geocoder]作成 18 var geocoder = new google.maps.Geocoder(); 19 //ズーム値 初期値 拡大縮小ボタン 20 if (window.matchMedia('(min-width: 741px)').matches) { 21 $(function () { 22 zoom = 10; 23 }); 24 } else { 25 $(function () { 26 zoom = 9; 27 }); 28 }; 29 geocoder.geocode({ 30 // 起点のキーワード 31 'address': place 32 }, function (result, status) { 33 if (status == google.maps.GeocoderStatus.OK) { 34 // 中心点を指定 35 var latlng = result[0].geometry.location; 36 // 初期設定オプション 37 var myOptions = { 38 zoom: z || zoom, 39 center: latlng, 40 mapTypeId: google.maps.MapTypeId.ROADMAP, 41 }; 42 // #mapを取得し、[mapOptions]の内容の、地図のインスタンス([map])を作成する 43 map = new google.maps.Map(document.getElementById('map'), myOptions); 44 // 中央部座標取得 45 var latlngDefault = map.getCenter(); 46 // フォームに座標をセット 47 $('#inputLat').attr('value', latlngDefault.lat()); 48 $('#inputLng').attr('value', latlngDefault.lng()); 49 // 場所 50 $('#place').text(place); 51 // ドラッグで座標取得 52 google.maps.event.addListener(map, 'drag', dispLatLng); 53 markMultiple(); 54 } else { 55 alert('情報を取得できませんでした。'); 56 } 57 }); 58} 59 60/* 【概要】テキストボックスフォームへ座標数値をセット、表示する */ 61function dispLatLng(){ 62// 場所 63$('#place').text(place); 64} 65 66/* JSON読み込み */ 67function markMultiple() { 68 markers = []; 69 $.getJSON('json.json', function (data) { 70 $.each(data, function (i, obj) { 71 var latLng = new google.maps.LatLng(obj.map_latitude, obj.map_longitude); 72 var content = '情報ウィンドウの内容'; 73 markMap(latLng, content); 74 }); 75 //クラスタリング設定 76 markerCluster = new MarkerClusterer(map, markers, { 77 imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m', 78 zoomOnClick: true, 79 maxZoom: 15, 80 gridSize: 20 81 }); 82 }); 83} 84 85function markMap(position, MapIcon, studioName, content) { 86 var marker = new google.maps.Marker({ 87 position: position, 88 icon: { 89 url: '/re_search/images/map_icon_w.png', 90 scaledSize: new google.maps.Size(25, 29), 91 }, 92 }); 93 //情報ウィンドウ 94 google.maps.event.addListener(marker, 'click', function () { 95 infowindow.setContent(content); 96 infowindow.open(map, marker); 97 }); 98 markers.push(marker); 99} 100google.maps.event.addDomListener(window, 'load', initialize(place)); 101

HTML

1<div class="searchbox"> 2 <form method="search" action="#.html"> 3 <div class="formarea"> 4 <input type="text" name="sp" id="searchPlace" placeholder="例:東京"> 5 <input type="submit" name="regist" value="検索" id="button"> 6 </div> 7 </form> 8</div> 9<div id="map"></div>

グレー表示にならないように上記の実装をするにはどのように書き換えれば良いかわからず投稿させていただきました。
お力添えをいただけますと幸いです。

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/03/28 03:56

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
guest

回答2

0

下記部分は「load時にinitialize関数をplaceという引数で実行」というつもりでしょうが、
「initialize関数をplaceという引数で実行した結果をload時に実行」となるので、思った挙動にならないと思います。

js

1google.maps.event.addDomListener(window, 'load', initialize(place));

クリック内で行っている下記部分も同じで、クリックが出来る時点でwindowのloadは終わっている可能性が高いのでinitialize(place,13);だけで十分です。

js

1// google.maps.event.addDomListener(window, 'load', initialize(place,13)); 2// ↓ 3 initialize(place,13);

また既に指摘がありますが、$(function(){});はHTMLの読み込み完了イベントを待って処理するための物なので、不要です。

js

1// $(function () { 2// zoom = 10; 3// }); 4// ↓ 5 zoom = 10;

あと、new google.maps.Mapで毎回壊して作り直すことをしていますが、地図の作成は最初の1回で終わらせ、マーカーのみを一括で消す処理をするとかそういう設計にされることをお勧めします。

投稿2019/03/25 07:24

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chibiyuko_0124

2019/03/28 06:56

kei344様 ご助言いただきましてありがとうございます。 2箇所のgoogle.maps.event〜部分も直しました。 お二方どちらもベストアンサーにしたいのですが、最初にコメントをいただいたmix-peach様をベストアンサーとさせていただきます。申し訳ありません。 >new google.maps.Mapで毎回壊して作り直すことをしていますが、地図の作成は最初の1回で終わらせ、マーカーのみを一括で消す処理をするとかそういう設計にされることをお勧めします。 ぜひそのようにさせたいです。 が、当方素人のため手探り状態でしてどのように書けばいいのかといった状態です…。 時間をかけてゆっくり作り上げていきたいと思います。 ありがとうございました。
guest

0

ベストアンサー

閲覧デバイスごとにファーストビューでのズーム値を指定

javascript

1 if (window.matchMedia('(min-width: 741px)').matches) { 2 $(function () { 3 zoom = 10; 4 }); 5 } else { 6 $(function () { 7 zoom = 9; 8 }); 9 }; 10

の部分ですが、$(function(){});で処理が入れ子になっていて、zoomに値がセットされるタイミングが不明なので、処理に使いたいタイミングでも「zoomに値が入っていない」ことがあるのだと思われます。

コードを見る限りでは、$(function(){});の中で処理させる必要はなさそうなのですが
何か意図があるのでしょうか・・?

↓ $(function(){});を削除

javascript

1 if (window.matchMedia('(min-width: 741px)').matches) { 2 zoom = 10; 3 } else { 4 zoom = 9; 5 }; 6

あとは、処理する時に「値がないと困るもの」には、必ず初期値を入れておくのが安心です。

javascript

1var zoom = 10; //とりあえずの値。

※初期値があれば、処理の$(function(){});は修正しなくても、とりあえず問題は解決するのかなと思います。

投稿2019/03/25 06:03

mix-peach

総合スコア1910

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chibiyuko_0124

2019/03/28 01:09

mix-peach様 ご助言いただきましてありがとうございます。 ご指摘通りに直したところ、無事解決しました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問