Adattare Google Maps per il tuo sito web

Forse non sapevi che abbiamo la possibilità di gestire pienamente gli stili di visualizzazione di Google maps? Oggi vi mostriamo come farlo sul tuo sito web.

 demo     sourse

Google Maps  impostazione predefinita

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var mapCoordinates = new google.maps.LatLng(Latitude_Value,Longitude_Value);
function initialize()
{
var mapOptions = {
zoom: 8,
center: mapCoordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
//HTML код
<div id="map-canvas" style="height:100%"></div>

Aggiungiamo uno stile.

Stilizzazione Google maps.

styles:[
{
    "featureType": "transit.station.rail",
    "stylers": [
         { "visibility": "on" },
         { "invert_lightness": true },
         { "color": "#808080" },
         { "weight": 0.1 },
         { "saturation": 1 },
         { "lightness": 1 },
         { "gamma": 1 }
      ]},
{
....
}
]
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var mapCoordinates = new google.maps.LatLng(13.0630171, 80.2296082);
function initialize()
{
var mapOptions = {
backgroundColor: "#ffffff", // colore dello sfondo
zoom: 8, // scala
disableDefaultUI: true,
draggable: false,
scrollwheel: false,
center: mapCoordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//----------- stili ----------
styles: [
{
   "featureType": "landscape.natural",
   "elementType": "geometry.fill",
   "stylers": [
   { "color": "#ffffff" }
    ]},
{
   "featureType": "landscape.man_made",
   "stylers": [
   { "color": "#ffffff" },
   { "visibility": "off" }
   ]},
{
   "featureType": "water",
   "stylers": [
   { "color": "#80C8E5" },  // colore del aqua
   { "saturation": 0 }
   ]},
{
   "featureType": "road.arterial",
   "elementType": "geometry",
   "stylers": [
   { "color": "#999999" }
    ]}
,{
   "elementType": "labels.text.stroke",
   "stylers": [
   { "visibility": "off" }
  ]}
,{
   "elementType": "labels.text",
   "stylers": [
   { "color": "#333333" }
   ]}
,{
   "featureType": "poi",
   "stylers": [
   { "visibility": "off" }
   ]}
]//------------fine --------------
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
//HTML codice
<div id="map-canvas" style="height:100%"></div>

 Strumenti per la presentazione di Google Maps

È inoltre possibile utilizzare uno speciale strumento per la presentazione di  mape.

Aggiungiamo un marcatore.

Aggiungi la tua  icona per il marcatore.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var mapCoordinates = new google.maps.LatLng(13.0630171, 80.2296082);
var markers = [];
var image = new google.maps.MarkerImage( '9lessons.png', // icona
new google.maps.Size(84,56), // grandezza delle icone
new google.maps.Point(0,0),
new google.maps.Point(42,56)
);
function addMarker()
{
markers.push(new google.maps.Marker({
position: mapCoordinates,
raiseOnDrag: false,
icon: image,
map: map,
draggable: false
}));
}
function initialize()
{
var mapOptions = {
.......
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
addMarker(); // richiamo della funzione
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
//HTML codice
<div id="map-canvas" style="height:100%"></div>

 

Letto 1858 volte