質問編集履歴

10 ソースを修正

chibiyuko_0124

chibiyuko_0124 score 18

2018/09/07 15:33  投稿

Google Map API ズームレベルによってデザインを変更(水の色変更等)したい
いつもお世話になっております。
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);
```
いただいたアドバイスを参考に調整しましたが動きません。
ソースはこちらです。
```
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,     
};  
 
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();
}
```
ご教授いただけますと幸いです。よろしくお願いいたします。
  • JavaScript

    37363 questions

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

  • Google API

    1450 questions

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

  • JSON

    2931 questions

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

9 ソースを修正しました

chibiyuko_0124

chibiyuko_0124 score 18

2018/09/07 15:32  投稿

Google Map API ズームレベルによってデザインを変更(水の色変更等)したい
いつもお世話になっております。
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"
 }]
}]
});
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,  
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);
```
いただいたアドバイスを参考に調整しましたが動きません。
ソースはこちらです。
```
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,   
};
var styles= [{
"featureType": "landscape",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}],
}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "",
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
color: ""
}, {
"visibility": "on"
}]
}]
});
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();
}
```
ご教授いただけますと幸いです。よろしくお願いいたします。
  • JavaScript

    37363 questions

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

  • Google API

    1450 questions

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

  • JSON

    2931 questions

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

8 ソースを修正しました

chibiyuko_0124

chibiyuko_0124 score 18

2018/09/07 15:31  投稿

Google Map API ズームレベルによってデザインを変更(水の色変更等)したい
いつもお世話になっております。
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"
 }]
}]
});
 
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,  
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);
```
いただいたアドバイスを参考に調整しましたが動きません。
ソースはこちらです。
```
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,   
};
var styles= [{
"featureType": "landscape",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}],
}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "",
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
color: ""
}, {
"visibility": "on"
}]
}]
});
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();
}
```
ご教授いただけますと幸いです。よろしくお願いいたします。
  • JavaScript

    37363 questions

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

  • Google API

    1450 questions

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

  • JSON

    2931 questions

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

7 ソースを修正しました

chibiyuko_0124

chibiyuko_0124 score 18

2018/09/07 15:21  投稿

Google Map API ズームレベルによってデザインを変更(水の色変更等)したい
いつもお世話になっております。
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);
```
いただいたアドバイスを参考に調整しましたが動きません。
ソースはこちらです。
```
/* style部分 */
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,   
};
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,     
styles : styles  
};  
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();
}
```
ご教授いただけますと幸いです。よろしくお願いいたします。
  • JavaScript

    37363 questions

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

  • Google API

    1450 questions

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

  • JSON

    2931 questions

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

6 ソースを修正

chibiyuko_0124

chibiyuko_0124 score 18

2018/09/07 15:13  投稿

Google Map API ズームレベルによってデザインを変更(水の色変更等)したい
いつもお世話になっております。
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);
```
いただいたアドバイスを参考に調整しましたが動きません。
ソースはこちらです。
```
/* style部分 */
var styles= [{
"featureType": "landscape",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}],
}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "",
}]
}, {
"featureType": water,
"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,   
styles : styles
};
map = new google.maps.Map(document.getElementById("map"), opts);   
markMultiple();
}
map = new google.maps.Map(document.getElementById("map"), opts);
/* ズームレベルでデザインを変更 部分 */
google.maps.event.addListener(map, "zoom_changed", function() {
/* ズームレベルでデザインを変更 */
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();  
}  
 
```
ご教授いただけますと幸いです。よろしくお願いいたします。
  • JavaScript

    37363 questions

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

  • Google API

    1450 questions

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

  • JSON

    2931 questions

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

5 ソースを修正しました。

chibiyuko_0124

chibiyuko_0124 score 18

2018/09/07 12:11  投稿

Google Map API ズームレベルによってデザインを変更(水の色変更等)したい
いつもお世話になっております。
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);
```
いただいたアドバイスを参考に調整しましたが動きません。
ソースはこちらです。
```
/* style部分 */
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,   
styles : styles
};
map = new google.maps.Map(document.getElementById("map"), opts);   
markMultiple();
}
/* ズームレベルでデザインを変更 部分 */
google.maps.event.addListener(map, "zoom_changed", function() {
if ( map.getZoom() < 15 ) {
function setZoom01() {  
styles[2].stylers[0].color = '#ff0000';
map.setOptions({styles: styles});
}     
}
else if ( map.getZoom() > 15 ){
function setZoom01() {  
styles[2].stylers[0].color = '';
map.setOptions({styles: styles});
}     
}
});
```
ご教授いただけますと幸いです。よろしくお願いいたします。
  • JavaScript

    37363 questions

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

  • Google API

    1450 questions

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

  • JSON

    2931 questions

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

4 ソースを修正しました

chibiyuko_0124

chibiyuko_0124 score 18

2018/09/07 11:55  投稿

Google Map API ズームレベルによってデザインを変更(水の色変更等)したい
いつもお世話になっております。
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);
```
いただいたアドバイスを参考に調整しましたが動きません。
ソースはこちらです。
style部分  
```
/* style部分 */  
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,   
styles : styles
};
map = new google.maps.Map(document.getElementById("map"), opts);   
markMultiple();
}
```
/* ズームレベルでデザインを変更 */部分
```
/* ズームレベルでデザインを変更 部分 */
google.maps.event.addListener(map, "zoom_changed", function() {
if ( map.getZoom() < 15 ) {
function setZoom01() {
styles[2].stylers[0].color = '#ff0000';
map.setOptions({styles: styles});
}   
}
else if ( map.getZoom() > 15 ){
function setZoom01() {
styles[2].stylers[0].color = '';
map.setOptions({styles: styles});
}   
}
});
```
ご教授いただけますと幸いです。よろしくお願いいたします。
  • JavaScript

    37363 questions

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

  • Google API

    1450 questions

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

  • JSON

    2931 questions

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

3 現状のソースを追記しました

chibiyuko_0124

chibiyuko_0124 score 18

2018/09/07 11:54  投稿

Google Map API ズームレベルによってデザインを変更(水の色変更等)したい
いつもお世話になっております。
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);
```
いただいたアドバイスを参考に調整しましたが動きません。  
ソースはこちらです。  
 
style部分  
```  
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,     
styles : styles  
};  
map = new google.maps.Map(document.getElementById("map"), opts);     
markMultiple();  
}  
 
```  
 
/* ズームレベルでデザインを変更 */部分  
```  
google.maps.event.addListener(map, "zoom_changed", function() {  
if ( map.getZoom() < 15 ) {  
function setZoom01() {  
styles[2].stylers[0].color = '#ff0000';  
map.setOptions({styles: styles});  
}     
}  
else if ( map.getZoom() > 15 ){  
function setZoom01() {  
styles[2].stylers[0].color = '';  
map.setOptions({styles: styles});  
}     
}  
});  
```  
 
 
ご教授いただけますと幸いです。よろしくお願いいたします。
  • JavaScript

    37363 questions

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

  • Google API

    1450 questions

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

  • JSON

    2931 questions

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

2 タイトルをわかりやすく変更しました

chibiyuko_0124

chibiyuko_0124 score 18

2018/09/03 14:29  投稿

いつもお世話になっております。
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);
```
ご教授いただけますと幸いです。よろしくお願いいたします。
  • JavaScript

    37363 questions

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

  • Google API

    1450 questions

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

  • JSON

    2931 questions

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

1 質問文を変更しました

chibiyuko_0124

chibiyuko_0124 score 18

2018/09/03 14:15  投稿

Google Map API ズームレベルでデザイン変更
いつもお世話になっております。
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);
```
ご教授いただけますと幸いです。よろしくお願いいたします。
  • JavaScript

    37363 questions

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

  • Google API

    1450 questions

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

  • JSON

    2931 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る