スタイルgoogle maps

Question

私は独自のアイコンで作成された鶏のGoogleマップを持っています。コードはfowllingされています。しかし、私は、しかし、私はこのコードを変更するかどうかはわかりません、スタイルのシルバーを追加otの欲しい

https://paste.ee/p/O3U44

。

助けがあれば幸いです。

ありがとうございます！

Answer 1

このコードに従ってください。

ここで、Googleのapiキーを下のリンクに追加する必要があります。

src="https://maps.googleapis.com/maps/api/jskey=Your_api_key&callback=initMap" 

ここにコードがあります。

var map; 
 
     function initMap() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 16, 
 
      center: new google.maps.LatLng(38.769671, -9.097975), 
 
      mapTypeId: 'roadmap', 
 
      styles : [ 
 
    { 
 
    "elementType": "geometry", 
 
    "stylers": [ 
 
     { 
 
     "color": "#f5f5f5" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "elementType": "labels.icon", 
 
    "stylers": [ 
 
     { 
 
     "visibility": "off" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "elementType": "labels.text.fill", 
 
    "stylers": [ 
 
     { 
 
     "color": "#616161" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "elementType": "labels.text.stroke", 
 
    "stylers": [ 
 
     { 
 
     "color": "#f5f5f5" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "administrative.land_parcel", 
 
    "elementType": "labels.text.fill", 
 
    "stylers": [ 
 
     { 
 
     "color": "#bdbdbd" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "poi", 
 
    "elementType": "geometry", 
 
    "stylers": [ 
 
     { 
 
     "color": "#eeeeee" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "poi", 
 
    "elementType": "labels.text.fill", 
 
    "stylers": [ 
 
     { 
 
     "color": "#757575" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "poi.park", 
 
    "elementType": "geometry", 
 
    "stylers": [ 
 
     { 
 
     "color": "#e5e5e5" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "poi.park", 
 
    "elementType": "labels.text.fill", 
 
    "stylers": [ 
 
     { 
 
     "color": "#9e9e9e" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "road", 
 
    "elementType": "geometry", 
 
    "stylers": [ 
 
     { 
 
     "color": "#ffffff" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "road.arterial", 
 
    "elementType": "labels.text.fill", 
 
    "stylers": [ 
 
     { 
 
     "color": "#757575" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "road.highway", 
 
    "elementType": "geometry", 
 
    "stylers": [ 
 
     { 
 
     "color": "#dadada" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "road.highway", 
 
    "elementType": "labels.text.fill", 
 
    "stylers": [ 
 
     { 
 
     "color": "#616161" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "road.local", 
 
    "elementType": "labels.text.fill", 
 
    "stylers": [ 
 
     { 
 
     "color": "#9e9e9e" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "transit.line", 
 
    "elementType": "geometry", 
 
    "stylers": [ 
 
     { 
 
     "color": "#e5e5e5" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "transit.station", 
 
    "elementType": "geometry", 
 
    "stylers": [ 
 
     { 
 
     "color": "#eeeeee" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "water", 
 
    "elementType": "geometry", 
 
    "stylers": [ 
 
     { 
 
     "color": "#c9c9c9" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "water", 
 
    "elementType": "labels.text.fill", 
 
    "stylers": [ 
 
     { 
 
     "color": "#9e9e9e" 
 
     } 
 
    ] 
 
    } 
 
] 
 
     }); 
 
     
 
    
 
     var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 
 
     var icons = { 
 
      info: { 
 
      icon: 'https://novo2.rhp.pt/map.png' 
 
      } 
 
     }; 
 
    
 
     var features = [ 
 
      { 
 
      position: new google.maps.LatLng(38.769671, -9.097975), 
 
      type: 'info' 
 
      } 
 
     ]; 
 
    
 
     // Create markers. 
 
     features.forEach(function(feature) { 
 
      var marker = new google.maps.Marker({ 
 
      position: feature.position, 
 
      icon: icons[feature.type].icon, 
 
      map: map, 
 
      content:'<div>Test</div>' 
 
      
 
      }); 
 
     }); 
 
     }

/* Always set the map height explicitly to define the size of the div 
 
     * element that contains the map. */ 
 
     #map { 
 
     height: 100%; 
 
     } 
 
     /* Optional: Makes the sample page fill the window. */ 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     }

<div id="map"></div> 
 
<script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
 
    </script>

あなたはまだ、このリンクhttps://mapstyle.withgoogle.com/をたどると、あなたがしたいとちょうど全体JSONコードをコピーして、stylesオブジェクトの上で交換するものは何でも作成するマップのスタイルを変更したい場合。

希望します。