Como destacar qualquer limite de área no Google Maps
A API do Google Maps tem vários tipos de sobreposições que você pode adicionar programmaticamente:
>
>>/li>">
- Linhas de forma arbitrária no mapa são exibidas usando polígonos. Tal como as polilinhas, os polígonos são uma sequência ordenada de localizações. Ao contrário das polilinhas, os polígonos definem uma região que eles delimitam.
- >li> Você também pode definir círculos e retângulos no mapa.
- Utilizar um símbolo para personalizar o ícone em um marcador ou adicionar imagens a uma polilinha. Um símbolo é uma imagem baseada em vetores definida por um caminho, usando notação de caminho SVG. A API também fornece opções para controlar como o símbolo será exibido.
- li> Se você quiser colocar uma imagem em um mapa, você pode usar uma sobreposição de terra.
- Você também pode implementar suas próprias sobreposições personalizadas, implementando a interface OverlayView.
- As camadas de mapa podem ser exibidas usando tipos de mapas sobrepostos. Você pode criar seu próprio conjunto de tiles criando tipos de mapas personalizados que substituem os conjuntos de tiles do mapa base, ou aparecer no topo dos conjuntos de tiles do mapa base existentes como overlays.
>br> Código de Amostra para determinada imagem:
- // Este exemplo cria um polígono simples representando o Triângulo das Bermudas.
- function initialize() {
- var mapOptions = {
- zoom: 5,
- center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
- mapTypeId: google.maps.MapTypeId.TERRAIN
- };
- var bermudaTriangle;
- var map = new google.maps.Map(document.getElementById('map-canvas'),
- mapOptions);
- // Define the LatLng coordinates for the polygon's path.
- var triangleCoords = [
- new google.maps.LatLng(25.774252, -80.190262),
- new google.maps.LatLng(18.466465, -66.118292),
- new google.maps.LatLng(32.321384, -64.75737),
- new google.maps.LatLng(25.774252, -80.190262)
- ];
- // Construct the polygon.
- bermudaTriangle = new google.maps.Polygon({
- paths: triangleCoords,
- strokeColor: '#FF0000',
- strokeOpacity: 0.8,
- strokeWeight: 2,
- fillColor: '#FF0000',
- fillOpacity: 0.35
- });
- bermudaTriangle.setMap(map);
- }
- google.maps.event.addDomListener(window, 'load', initialize);
Source : Simple Polygon (https://developers.google.com/maps/documentation/javascript/examples/polygon-simple)
Hope this helps :)