javascript - style - infowindow google maps
Crear styler con google maps api 3 y js (2)
Podría intentar trabajar en capas personalizadas.
Fuente:
Entonces, quiero crear mis propios estilizadores en mi mapa. Por ejemplo, supongamos que quiero poner algunas flores (u otra cosa) en los límites del país, ¿cómo puedo hacerlo?
Yo uso los estilos de google maps pero hay un límite: podemos usar los diferentes stylers (opacidad, color ...) proporcionados por google. ¿Cómo puedo crear mi propio styler?
Mi mapa usa estilizadores como estilizadores que puedes encontrar aquí en google developer. La documentación no describe mi problema y trato de encontrar algunas maneras en sitios web como el desbordamiento de la pila sin éxito.
Utilizaré, por ejemplo, el mapa de la documentación para simplificar el ejemplo. Entonces, este es mi código:
<!DOCTYPE html>
<html>
<head>
<title>Styled Map Types</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* 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;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
// Create a new StyledMapType object, passing it an array of styles,
// and the name to be displayed on the map type control.
var styledMapType = new google.maps.StyledMapType(
[
{elementType: ''geometry'', stylers: [{color: ''#ebe3cd''}]},
{elementType: ''labels.text.fill'', stylers: [{color: ''#523735''}]},
{elementType: ''labels.text.stroke'', stylers: [{color: ''#f5f1e6''}]},
{
featureType: ''administrative'',
elementType: ''geometry.stroke'',
stylers: [{color: ''#c9b2a6''}]
},
{
featureType: ''administrative.land_parcel'',
elementType: ''geometry.stroke'',
stylers: [{color: ''#dcd2be''}]
},
{
featureType: ''administrative.land_parcel'',
elementType: ''labels.text.fill'',
stylers: [{color: ''#ae9e90''}]
},
{
featureType: ''landscape.natural'',
elementType: ''geometry'',
stylers: [{color: ''#dfd2ae''}]
},
{
featureType: ''poi'',
elementType: ''geometry'',
stylers: [{color: ''#dfd2ae''}]
},
{
featureType: ''poi'',
elementType: ''labels.text.fill'',
stylers: [{color: ''#93817c''}]
},
{
featureType: ''poi.park'',
elementType: ''geometry.fill'',
stylers: [{color: ''#a5b076''}]
},
{
featureType: ''poi.park'',
elementType: ''labels.text.fill'',
stylers: [{color: ''#447530''}]
},
{
featureType: ''road'',
elementType: ''geometry'',
stylers: [{color: ''#f5f1e6''}]
},
{
featureType: ''road.arterial'',
elementType: ''geometry'',
stylers: [{color: ''#fdfcf8''}]
},
{
featureType: ''road.highway'',
elementType: ''geometry'',
stylers: [{color: ''#f8c967''}]
},
{
featureType: ''road.highway'',
elementType: ''geometry.stroke'',
stylers: [{color: ''#e9bc62''}]
},
{
featureType: ''road.highway.controlled_access'',
elementType: ''geometry'',
stylers: [{color: ''#e98d58''}]
},
{
featureType: ''road.highway.controlled_access'',
elementType: ''geometry.stroke'',
stylers: [{color: ''#db8555''}]
},
{
featureType: ''road.local'',
elementType: ''labels.text.fill'',
stylers: [{color: ''#806b63''}]
},
{
featureType: ''transit.line'',
elementType: ''geometry'',
stylers: [{color: ''#dfd2ae''}]
},
{
featureType: ''transit.line'',
elementType: ''labels.text.fill'',
stylers: [{color: ''#8f7d77''}]
},
{
featureType: ''transit.line'',
elementType: ''labels.text.stroke'',
stylers: [{color: ''#ebe3cd''}]
},
{
featureType: ''transit.station'',
elementType: ''geometry'',
stylers: [{color: ''#dfd2ae''}]
},
{
featureType: ''water'',
elementType: ''geometry.fill'',
stylers: [{color: ''#b9d3c2''}]
},
{
featureType: ''water'',
elementType: ''labels.text.fill'',
stylers: [{color: ''#92998d''}]
}
],
{name: ''Styled Map''});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var map = new google.maps.Map(document.getElementById(''map''), {
center: {lat: 55.647, lng: 37.581},
zoom: 11,
mapTypeControlOptions: {
mapTypeIds: [''roadmap'', ''satellite'', ''hybrid'', ''terrain'',
''styled_map'']
}
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set(''styled_map'', styledMapType);
map.setMapTypeId(''styled_map'');
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
¿Has terminado de leer / usar los marcadores personalizados de google? Si no, visita el marcador personalizado de google esto podría responder a tu pregunta, quién sabe.