Come evidenziare i confini di qualsiasi area su Google Maps

L'API di Google Maps ha diversi tipi di sovrapposizioni che è possibile aggiungere programmaticamente:

• I singoli luoghi sulla mappa sono visualizzati utilizzando i marcatori. I marcatori possono a volte mostrare immagini di icone personalizzate, nel qual caso sono solitamente indicati come "icone".
• Una finestra informativa è un tipo speciale di sovrapposizione per la visualizzazione di contenuti (di solito testo o immagini) all'interno di un palloncino popup in una data posizione su una mappa.
• Le linee sulla mappa sono visualizzate usando polilinee che rappresentano una sequenza ordinata di posizioni.
• 
  

• Aree di forma arbitraria sulla mappa sono visualizzate usando poligoni. Come le polilinee, i poligoni sono una sequenza ordinata di posizioni. A differenza delle polilinee, i poligoni definiscono una regione che racchiudono.
• Si possono anche definire cerchi e rettangoli sulla mappa.
  
• Utilizzare un simbolo per personalizzare l'icona di un marcatore o aggiungere immagini a una polilinea. Un simbolo è un'immagine vettoriale definita da un percorso, usando la notazione SVG. L'API fornisce anche opzioni per controllare come il simbolo verrà visualizzato.
• Se vuoi posizionare un'immagine su una mappa, puoi usare un overlay del terreno.
• Puoi anche implementare i tuoi overlay personalizzati implementando l'interfaccia OverlayView.
• I layer della mappa possono essere visualizzati usando tipi di mappe overlay. Puoi creare il tuo set di piastrelle creando tipi di mappa personalizzati che sostituiscono i set di piastrelle della mappa di base, o appaiono sopra i set di piastrelle della mappa di base esistenti come overlay.

Codice di esempio per l'immagine data:

1. // Questo esempio crea un semplice poligono che rappresenta il Triangolo delle Bermuda. 
2.  
3. function initialize() { 
4. var mapOptions = { 
5. zoom: 5, 
6. center: new google.maps.LatLng(24.886436490787712, -70.2685546875), 
7. mapTypeId: google.maps.MapTypeId.TERRAIN 
8. }; 
9.  
10. var bermudaTriangle; 
11.  
12. var map = new google.maps.Map(document.getElementById('map-canvas'), 
13. mapOptions); 
14.  
15. // Define the LatLng coordinates for the polygon's path. 
16. var triangleCoords = [ 
17. new google.maps.LatLng(25.774252, -80.190262), 
18. new google.maps.LatLng(18.466465, -66.118292), 
19. new google.maps.LatLng(32.321384, -64.75737), 
20. new google.maps.LatLng(25.774252, -80.190262) 
21. ]; 
22.  
23. // Construct the polygon. 
24. bermudaTriangle = new google.maps.Polygon({ 
25. paths: triangleCoords, 
26. strokeColor: '#FF0000', 
27. strokeOpacity: 0.8, 
28. strokeWeight: 2, 
29. fillColor: '#FF0000', 
30. fillOpacity: 0.35 
31. }); 
32.  
33. bermudaTriangle.setMap(map); 
34. } 
35.  
36. google.maps.event.addDomListener(window, 'load', initialize); 

Source : Simple Polygon (https://developers.google.com/maps/documentation/javascript/examples/polygon-simple)

Hope this helps :)