0 Condividi
Strumenti di disegno
Colore linea
Opacità linea
Spessore linea
Colore riempimento
Opacità riempimento
REIMPOSTA

Google Map

Le API JavaScript di Google Maps ti consente di personalizzare le mappe con i tuoi contenuti, stili e forme per la visualizzazione su pagine web e dispositivi mobile.

Le API JavaScript di Maps offrono quattro tipi di mappe di base (roadmap, satellite, ibrida e terreno) che puoi personalizzare con diversi livelli, stili, controlli, eventi, servizi e librerie.

L'effetto del seguente generatore di forme cambierà ogni volta che Google aggiorna lo stile della mappa di base. Usalo con cautela.

Come iniziare

Il modo più semplice per acquisire maggiore familiarità con le API JavaScript di Google Maps è vedere un semplice esempio.

Il seguente codice mostra la mappa del centro di Roma, Italia:

<html>
  <head>
    <title>Simple Map by seochecker</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
  </head>
  <body>
    <div id="my_seochecker_map"></div>
    <script>
      var map;
        function seochecker_map() {
          map = new google.maps.Map(document.getElementById('my_seochecker_map'), {
            center: {lat:41.923741, lng:12.494129},
            zoom: 8
          });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&callback=seochecker_map" async defer></script>
  </body>
</html>

Per utilizzare le API JavaScript di Maps, devi ottenere una API key che puoi quindi aggiungere all'app mobile, al sito Web o al server Web.

Le API key viene utilizzata per tenere traccia delle richieste API associate al tuo progetto per l'utilizzo e la fatturazione.

Forme Google map

Immergiamoci in ogni componente

Su Google Map puoi semplicemente aggiungere varie forme come cerchi, rettangoli, poligoni e linee. Una forma è un oggetto sulla mappa legata a una coordinata di latitudine/longitudine e stile.

Cerchio

Il cerchio è simile a un poligono, in quanto puoi personalizzare colori, spessori e opacità per la linea di contorno (tratto) e l'area (riempimento).

Proprietà del cerchio

center

Obbligatorio

Indica il google.maps.LatLng del centro del cerchio

radius

Obbligatorio

Indica il raggio del cerchio, in metri.

Opzioni di stile

Puoi specificare le seguenti opzioni di stile:

  • strokeColor: colore HTML esadecimale per il contorno
  • strokeOpacity: valore numerico compreso tra 0,0 e 1,0 per il colore del contorno
  • strokeWeight: larghezza della linea in pixel
  • fillColor: colore HTML esadecimale per l'area
  • fillOpacity: valore numerico compreso tra 0,0 e 1,0 per il colore dell'area

Esempio

 
...
const my_circle = new google.maps.Circle({
	center:{lat:41.93132402048365,lng:12.445079146808622},
	radius:4826.969293198998,
	strokeColor:'#0062cc',
	strokeOpacity:0.5,
	strokeWeight:1,
	fillColor:'#133c55',
	fillOpacity:0.5
});
my_circle.setMap(map);
...

Rettangolo

Il rettangolo è simile a un poligono, in quanto puoi personalizzare colori, spessori e opacità per la linea di contorno (tratto) e l'area (riempimento). Il rettngolo ha una proprietà specifica relativa al perimetro che ne definisce la forma specificando un google.maps.LatLngBounds

Proprietà del rettangolo

bounds

Obbligatorio

Specifica i google.maps.LatLngBounds del rettangolo nord, sud, est, ovest

Opzioni di stile

Puoi specificare le seguenti opzioni di stile:

  • strokeColor: colore HTML esadecimale per il contorno
  • strokeOpacity: valore numerico compreso tra 0,0 e 1,0 per il colore del contorno
  • strokeWeight: larghezza della linea in pixel
  • fillColor: colore HTML esadecimale per l'area
  • fillOpacity: valore numerico compreso tra 0,0 e 1,0 per il colore dell'area

Esempio

 
...
const my_rectangle = new google.maps.Rectangle({
	bounds:{north:33.685, south:33.671, east:-116.234, west:-116.251},
	strokeColor:'#0062cc',
	strokeOpacity:0.5,
	strokeWeight:1,
	fillColor:'#133c55',
	fillOpacity:0.5
});
my_rectangle.setMap(map);
...

Poligono

Una forma poligonale rappresenta un'area racchiusa da un perimetro chiuso, definito da una serie di coordinate. È possibile personalizzare colori, spessori e opacità per la linea di contorno (tratto) e l'area (riempimento).

Proprietà del poligono

path

Obbligatorio

La proprietà del perimetro dell'oggetto va specifica con un array di array. Ciascun array definisce una sequenza separata di coordinate LatLng ordinate

Opzioni di stile

Puoi specificare le seguenti opzioni di stile:

  • strokeColor: colore HTML esadecimale per il contorno
  • strokeOpacity: valore numerico compreso tra 0,0 e 1,0 per colore contorno
  • strokeWeight: larghezza della linea in pixel
  • fillColor: colore HTML esadecimale per l'area
  • fillOpacity: valore numerico compreso tra 0,0 e 1,0 per il colore dell'area

Esempio

 
...
const my_polygon = new google.maps.Polygon({
	path:{lat:25.774, lng:-80.19},{lat:18.466, lng:-66.118},{lat:32.321, lng:-64.757},{lat:25.774, lng:-80.19},
	strokeColor:'#0062cc',
	strokeOpacity:0.5,
	strokeWeight:1,
	fillColor:'#133c55',
	fillOpacity:0.5
});
my_polygon.setMap(map);
...

Linee

La classe Poligono definisce una sovrapposizione lineare di segmenti e di linee collegate sulla mappa. Un oggetto Poligonale è costituito da una array di posizioni LatLng e crea una serie di segmenti di linea che collegano tali posizioni in una sequenza ordinata. È possibile personalizzare colori, spessori e opacità per la linea di contorno (tratto).

Polyline properties

path

Obbligatorio

La proprietà del perimetro dell'oggetto va specifica con un array di array. Ciascun array definisce una sequenza separata di coordinate LatLng ordinate

Opzioni di stile

Puoi specificare le seguenti opzioni di stile:

  • strokeColor: colore HTML esadecimale per il contorno
  • strokeOpacity: valore numerico compreso tra 0,0 e 1,0 per il colore del contorno
  • strokeWeight: larghezza della linea in pixel

Esempio

 
...
const my_polyline = new google.maps.Polyline({
	path:{lat:25.774, lng:-80.19},{lat:18.466, lng:-66.118},{lat:32.321, lng:-64.757},{lat:25.774, lng:-80.19},
	strokeColor:'#0062cc',
	strokeOpacity:0.5,
	strokeWeight:1
});
my_polyline.setMap(map);
...

Riferimenti e risorse

Best practice API KEY
Mappa guide API JavaScript
Map JavaScript API V3 Riferimento
Guide sulle forme delle mappe

Condividi questo strumento

Ti è piaciuto? Condividilo!

Condividi questo strumento

Prova gli Strumenti correlati!

Generatori, builder e validatori per migliorare le tue performance di ottimizzazione SEO e web

Home Back to top of the page