Con el método «styles» de la API de Google podrás crear mapas totalmente personalizados modificando los estilos y aplicando composiciones de color propias.
1-Html (Mapa)
<div id="map"></div>
2-Javascript (Llamada y configuración)
<script> function initMap() { // Create a map object and specify the DOM element for display. var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 40.416720, lng: -3.703550}, zoom: 5, styles: [ {elementType: 'geometry', stylers: [{color: '#ffffff'}]}, //colosr paises {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]}, //borde paises ciudades {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]}, //paises { featureType: 'administrative.locality', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] //Nombres ciudades importantes }, { featureType: 'poi', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'poi.park', elementType: 'geometry', stylers: [{color: '#ffffff'}] //partes mapa }, { featureType: 'poi.park', elementType: 'labels.text.fill', stylers: [{color: '#6b9a76'}] }, { featureType: 'road', elementType: 'geometry', stylers: [{color: '#38414e'}] }, { featureType: 'road', elementType: 'geometry.stroke', stylers: [{color: '#212a37'}] }, { featureType: 'road', elementType: 'labels.text.fill', stylers: [{color: '#9ca5b3'}] }, { featureType: 'road.highway', elementType: 'geometry', stylers: [{color: '#746855'}] //Carreteras }, { featureType: 'road.highway', elementType: 'geometry.stroke', stylers: [{color: '#1f2835'}] //carreteras2 }, { featureType: 'road.highway', elementType: 'labels.text.fill', stylers: [{color: '#f3d19c'}] }, { featureType: 'transit', elementType: 'geometry', stylers: [{color: '#2f3948'}] }, { featureType: 'transit.station', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'water', elementType: 'geometry', stylers: [{color: '#35363A'}] //mar }, { featureType: 'water', elementType: 'labels.text.fill', stylers: [{color: '#515c6d'}] //nombres mares }, { featureType: 'water', elementType: 'labels.text.stroke', stylers: [{color: '#17263c'}] } ] }); } </script>
3-API (Google Service)
<script src="https://maps.googleapis.com/maps/api/js?key=TU_API_KEY&callback=initMap" async defer></script>
Si te ha sido de utilidad ¡deja un comentario!