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

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

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

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

Q&A

解決済

1回答

434閲覧

Google Map API 地名検索後にズームレベルを変更したい

chibiyuko_0124

総合スコア18

Google API

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

0グッド

0クリップ

投稿2018/10/01 05:36

編集2018/10/04 01:39

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

初期設定のズームレベルが低いため、地名を検索後はズームレベルを上げて表示させたいのですが、うまくいかず困っております。
アドバイスをいただけましたら幸いです。

初期表示のズーム値は「9」で、地名検索のsubmitボタンを押した後は「15」に変更するという条件式を書けたら理想です。
submitを押した後のアクションでsetZoomを設定しておりますが、myOptionsに書かれているマップの初期設定時のズーム値が上書きされてしまっているのが現状です。

ソースは下記になります。(関係のなさそうな記述はカットしております)

JS

var place = '東京'; var infowindow = new google.maps.InfoWindow(); var markers; /* ================================= 検索ボタンの挙動 ==================================*/ $(function () { $('#submitbutton').click(function (e) { e.preventDefault(); place = $('#searchPlace').val(); //検索後一瞬このズームレベルで表示されますが、myOptionsのズームレベル(9)に上書きされてしまいます map.setZoom(15); google.maps.event.addDomListener(window, 'load', initialize(place)); }); }); function initialize(place) { // インスタンス[geocoder]作成 var geocoder = new google.maps.Geocoder(); geocoder.geocode({ // 起点のキーワード 'address': place }, function(result, status) { // ジオコーディングが成功した場合 if (status == google.maps.GeocoderStatus.OK) { // 中心点を指定 var latlng = result[0].geometry.location; // オプション var myOptions = { zoom: 9, //←この数値を検索後は15にしたい center: latlng, }; map = new google.maps.Map(document.getElementById('map'), myOptions); //JSON読み込み $(function() { var data = new Array(); markers = []; $.getJSON("smaple.json" , function(data) { $.each(data, function (i, obj) { var positionposition = new google.maps.LatLng(obj.latitude, obj.longitude); var content = 'infoWindowの内容'; myMarker = new google.maps.Marker({ position: new google.maps.LatLng(obj.map_latitude, obj.map_longitude), map: map, icon: { url: 'icon.png', scaledSize: new google.maps.Size(30, 30), }, }); attachMessage(myMarker,content); }); markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m', zoomOnClick: true, maxZoom: 15, gridSize: 20 }); }); }); } else { alert('取得できませんでした…'); } }); } google.maps.event.addDomListener(window, 'load', initialize(place)); function attachMessage(marker,content) { google.maps.event.addListener(marker, 'click', function() { new google.maps.Geocoder().geocode({ latLng: marker.getPosition() }, function(result, status) { if (status == google.maps.GeocoderStatus.OK) { infowindow.setContent(content); infowindow.open(marker.getMap(), marker); } }); }); markers.push(marker); }

HTML

<div class="search"> <form method="searcharea" action="./#.html"> <div class="formarea"> <input type="text" name="sp" id="searchPlace" placeholder="地名を入力してください" > <input type="submit" name="regist" value="検索" id="submitbutton"> </div> </form> </div> <div id="map"></div>

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

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

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

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

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

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

kei344

2018/10/02 17:29

検索のコードはどの部分でしょうか。
chibiyuko_0124

2018/10/04 00:33 編集

kei344様 コメントをいただきましてありがとうございます。 不要なソースを削除しました。 「検索ボタンの挙動」〜「JSON読み込み」間が該当箇所になります。 よろしくお願いいたします。
Lhankor_Mhy

2018/10/04 05:26

ジオコーディングの後に、マップオブジェクトを作り直していることが原因だと思いますが、これは何か意図があってこのような作りにしているのですか?
chibiyuko_0124

2018/10/04 06:10 編集

Lhankor_Mhy様 コメントいただきましてありがとうございます。 ジオコーディング後のマップオブジェクト生成は、function attachMessageの箇所のことでしょうか。 色々なソースをつぎはぎで作成して今の形になっておりまして特別な意図はありません。 無駄な記述もあると思います。
Lhankor_Mhy

2018/10/04 06:10

それでは、そこの部分を setCenter メソッドなどで代用すれば解消されると思いますよ。
chibiyuko_0124

2018/10/04 06:12 編集

Lhankor_Mhy様 ありがとうございます。上記の返信を、行き違いで編集してしまい失礼しました…。 setCenterですね。試してみます。ありがとうございます。
Lhankor_Mhy

2018/10/04 06:28

new google.maps.Map の部分の話です。
guest

回答1

0

ベストアンサー

まだ解決してないとのことなので、小手先の変更になってしまいますが、コードを示します。

js

1map.setZoom(15); 2google.maps.event.addDomListener(window, 'load', initialize(place)); 3 4//... 5 6function initialize(place) { 7 8//... 9 10zoom: 9, //←この数値を検索後は15にしたい

js

1google.maps.event.addDomListener(window, 'load', initialize(place,15)); 2 3//... 4 5function initialize(place, z) { 6 7//... 8 9zoom: z||9, //←この数値を検索後は15にしたい

ほんとは、きちんとバグを取ったほうがいいですよ。

投稿2018/10/06 02:22

Lhankor_Mhy

総合スコア35871

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

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

chibiyuko_0124

2018/10/09 00:41

Lhankor_Mhy様 jsが素人なもので、未だ格闘中でした。 ソースをいただきましてありがとうございます。 バグを取るのは長い闘いになりそうですが、取り急ぎこちらで実現できましたのでベストアンサーとさせていただきます。 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問