ccc

Google Maps: Personalizar mapa con tus propios estilos

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();

  var mapDiv = document.getElementById('map_canvas');
  var map = new google.maps.Map(mapDiv, {
    center: center,
    zoom: 15,
    draggable: false,
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var image = "https://www.midominio.com/imagenes/icono-paises.png";
  var marker = new google.maps.Marker({
      position: center,
      map: map,
      icon: image
  });


  var styles = [
  {
    "featureType": "landscape",
    "stylers": [
      {
        "hue": "#FF0300"
      },
      {
        "saturation": -100
      },
      {
        "lightness": 4
      },
      {
        "gamma": 1
      }
    ]
  },
 
  {
    "featureType": "road.highway",
    "stylers": [
      {
        "hue": "#FF0300"
      },
      {
        "saturation": -100
      },
      {
        "lightness": 21.39999999999999
      },
      {
        "gamma": 1
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "stylers": [
      {
        "hue": "#FF0300"
      },
      {
        "saturation": -100
      },
      {
        "lightness": 11.200000000000017
      },
      {
        "gamma": 1
      }
    ]
  },
  {
    "featureType": "road.local",
    "stylers": [
      {
        "hue": "#FF0300"
      },
      {
        "saturation": -100
      },
      {
        "lightness": 12.000000000000014
      },
      {
        "gamma": 1
      }
    ]
  },
  {
    "featureType": "water",
    "stylers": [
      {
        "hue": "#FF0300"
      },
      {
        "saturation": -100
      },
      {
        "lightness": 12.000000000000014
      },
      {
        "gamma": 1
      }
    ]
  },

  {
    "featureType": "poi",
    "stylers": [
      {
        "hue": "#FF0300"
      },
      {
        "saturation": -100
      },
      {
        "lightness": 12.000000000000014
      },
      {
        "gamma": 1
      }
    ]
  },
  {
        featureType: "poi",
        elementType: "labels",
        stylers: [
              { visibility: "off" }
        ]
    }

 
];


map.setOptions({styles: styles});


  marker = new google.maps.Marker({
      position: center,
      map: map
  });

  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));

}

No hay comentarios:

Publicar un comentario