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

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

解決済

2回答

413閲覧

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/09/03 05:09

編集2018/09/07 06:33

いつもお世話になっております。
Google Maps API にて外部のJSONファイルを読み込みピンを表示させています。
ズームレベルによってマップのデザインを変更したく途中までソースは書けたのですが動作せずに困っております。
アドバイスをいただけましたら幸いです。

やりたいこと
ズームレベル15以上でpoiの表示やwaterの色を指定(15以下は未設定にしたい)など

現在のソースでは、地図のスタイルが全く変わらずにいます。
ズームレベルの条件式(google.maps.event.addListener(map, "zoom_changed", function() 以下)は一応生きてはおります。全く関係のない他のテスト記述は動いたので…。

var map; var markers = []; var infowindow = new google.maps.InfoWindow(); var point_of_interest; //マップデザイン poiの表示非表示 var water_color; //マップデザイン 水の色 function initialize() { geocoder = new google.maps.Geocoder(); var center = new google.maps.LatLng(XXX,XXX); map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP, /* こちらのデザイン記述をズームレベルで変更したいです */ styles: [{ "featureType": "landscape", "elementType": "labels", "stylers": [{ "visibility": "off" }], }, { "featureType": "poi", "elementType": "all", "stylers": [{ "visibility": point_of_interest, }] }, { "featureType": water, "elementType": "all", "stylers": [{ water_color }, { "visibility": "on" }] }] }); markMultiple(); } function markMultiple(){ $.getJSON('JSONファイル', function(data) { $.each(data, function(i,obj) { var latLng = new google.maps.LatLng( obj.map_latitude, obj.map_longitude ); var content = 吹き出しの内容; markMap(latLng, content); }); var markerCluster = new MarkerClusterer(map, markers); }); } function markMap(position, content){ var marker = new google.maps.Marker({ position: position, icon: 'img/icon.png' }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(content); infowindow.open(map, marker); }); markers.push(marker); /* ズームレベルでデザインを変更 */ google.maps.event.addListener(map, "zoom_changed", function() { if ( map.getZoom() < 15 ) { point_of_interest = '"off"' water_color = ''; } else if ( map.getZoom() > 15 ){ point_of_interest = '"on"' water_color = '"color": "#ggg"'; } }); } google.maps.event.addDomListener(window, 'load', initialize);

いただいたアドバイスを参考に調整しましたが動きません。
ソースはこちらです。

var styles= [{ "featureType": "landscape", "elementType": "labels", "stylers": [{ "visibility": "off" }], }, { "featureType": "poi", "elementType": "all", "stylers": [{ "visibility": "", }] }, { "featureType": "water", "elementType": "all", "stylers": [{ color: "" }, { "visibility": "on" }] }] }); function initialize() { geocoder = new google.maps.Geocoder(); var center = new google.maps.LatLng(XXX,XXX); var opts = { zoom: zoom, center: center, mapTypeControl: false, streetViewControl: false, zoomControl: zoomControl, mapTypeId: google.maps.MapTypeId.ROADMAP, }; map = new google.maps.Map(document.getElementById("map"), opts); /* ズームレベルでデザインを変更 */ google.maps.event.addListener(map, "idle", function() { if ( map.getZoom() < 15 ) { styles[2].stylers[0].color = '#ff0000'; map.setOptions({styles: styles}); } else if ( map.getZoom() > 15 ){ styles[2].stylers[0].color = ''; map.setOptions({styles: styles}); } }); markMultiple(); }

ご教授いただけますと幸いです。よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

styles: [{ "featureType": "landscape", "elementType": "labels", "stylers": [{ "visibility": "off" }], }, { "featureType": "poi", "elementType": "all", "stylers": [{ "visibility": point_of_interest, }] }, { "featureType": water, "elementType": "all", "stylers": [{ water_color }, { "visibility": "on" }] }]

ここで、指定している変数ですが。

使っているのは「変数に入った値」であって、変数そのものではありません。
ですから、その変数の中身を変えたところで、mapの中の設定は変わりません。

zoom_changedのイベントで、「mapにスタイル設定を反映する」必要があるのだと思います。

■ ちょびっと、余談。

例えば、 12→16→20 のように、zoomが変更された場合、
16でスタイル設定済みになりますので、20の時にもう一度スタイル設定する必要はないですよね。(逆の場合も同様です)

スタイル設定の反映で、地図の表示回数が増えるのかは不明(やったことないので・・)ですが、その増減の件も含めて無駄な処理は避けるのが無難です。

「スタイルを変えなくてもいい」ケースも考慮して、コードを書かれた方が良いと思います。

投稿2018/09/03 05:44

mix-peach

総合スコア1910

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

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

chibiyuko_0124

2018/09/07 02:28

mix-peach様 ありがとうございます。 いただいたアドバイスを参考に修正してみましたが、未だ動きません。 おっしゃるとおり無駄な処理は避けたいです…。 「スタイルを変えなくていい」ケースの条件式が書けるのであれば書きたいのでますが、取り急ぎ先にstyleの変更ができればと思っております。 現状のソースはkei344様の返信に記載させていただきます。
guest

0

ベストアンサー

内容については mix-peachさんの回答で。
(下記はスタイルを切り替える部分の例が載っている記事)

【Google Maps APIのMap styleの変更 - kuhaL@boX】
http://www.kuhalabo.net/kxoops/modules/d3blog/details.php?bid=107

投稿2018/09/03 05:48

kei344

総合スコア69364

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

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

chibiyuko_0124

2018/09/07 02:55 編集

kei344様 コメントをいただきましてありがとうございます。 mix-peach様やURLを参考に修正を加えましたが動きません。
kei344

2018/09/07 02:40

コメントエリアではマークダウンが使えないため、コードはここではなく質問文にコードブロックで追記してください。(決して元のコードを消さないでください)
chibiyuko_0124

2018/09/07 02:56

kei344様 失礼しました。さきほど質問文に追記させていただきました。 ありがとうございます。
kei344

2018/09/07 03:00

if の中で関数宣言していますが、何か意図があってしていますか?それは不要だと思います。(少なくとも関数を実行しないと何も変わりません)
chibiyuko_0124

2018/09/07 03:12

kei344様 コメントいただきましてありがとうございます。 さきほど関数を削除しましたが現状変わらずでした。 ソースを更新しました。
chibiyuko_0124

2018/09/07 04:12

kei344様 ご返信をいただきましてありがとうございます。 chromeコンソールには、[Violation]ではじまるアラートは表示されますが今回のソース関連のエラーは出てきておりません。
chibiyuko_0124

2018/09/07 06:18

kei344様 サンプルまでご用意くださりありがとうございます。 こちらを参考に修正しましたが変わらずな状況です…。 ソースを修正しました。 zoom_changedをidleに変更しました。 zoom_changedですと、ファーストビューでのMap styleが初期設定に戻ってしまいズームをするとstyleがかかるような挙動になったためです。 また、上記が書かれているソースの位置をinitialize内に移動しました。 var style〜も同様です。 waterはおっしゃるとおり " が足りませんでしたので足しました。 kei様のものではできているので、他のソースが邪魔をしているのでしょうか…。
kei344

2018/09/07 06:24

var styles はinitialize内に移動しない。スコープの関係上外に無いとだめです。
chibiyuko_0124

2018/09/07 06:34

kei344様 var stylesは移動してはいけないのですね。 位置を元に戻しました。(initializeの外に出しました) 表示は特に変わらずでした。
kei344

2018/09/07 06:38

提示されたスタイル部分のコードについてはサンプルで動くことは確認いただけたと思います。 サンプルで提示したものと同じまでコードを削り、動くか確認してみてください。それで動かないなら問題が再現できない以上おやくにたてません。
chibiyuko_0124

2018/09/20 00:32

kei344様 返信が遅れました申し訳ありません。 いただいたサンプルを参考に引き続き試しております。 長々とお付き合いいただきありがとうございました。
chibiyuko_0124

2018/11/01 06:24

kei344様 こちらの件大変遅くなってしまいました。 デモを参考に無事に実装できました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問