Como usar a API do Google Maps de distância radial

Escrito por veronica summers | Traduzido por aline kachel araujo
  • Compartilhar
  • Tweetar
  • Compartilhar
  • E-mail

Você pode personalizar um mapa do Google para atender às necessidades específicas do público do seu site com a API do Google Maps 3.0. Um método de personalização é inserir uma circunferência que mostre o raio de distância em torno de um lugar específico. Você pode, por exemplo, mostrar o raio de cinco quilômetros ao redor de um ponto turístico para que os visitantes possam ver os hotéis e restaurantes próximos. Para criar um raio de distância em torno de um local ou ponto, use a classe "Círculo" do Google Maps.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o arquivo HTML e vá à seção que contém o código do mapa do Google.

  2. 2

    Desça pelo código até encontrar o que define a localização do marcador. Para encontrar o marcador facilmente, pesquise pelo termo "google.maps.Marker" no arquivo HTML.

  3. 3

    Abaixo de onde você define o marcador, crie a camada "Círculo" e anexe-a a ele. Por exemplo, digite:

    var circleExample = new google.maps.Circle({ map: map

  4. 4

    Adicione o raio do círculo que ficará ao redor do marcador em metros:

    var circleExample = new google.maps.Circle({ map: map radius: 5000

  5. 5

    Crie uma cor de preenchimento do círculo. Você define a cor usando um formato hexadecimal. Por exemplo, digite:

    var circleExample = new google.maps.Circle({ map: map radius: 5000 fillColor = #FFFFFF });

  6. 6

    Associe, ou agregue, o círculo ao marcador:

    var circleExample = new google.maps.Circle({ map: map radius: 5000 fillColor = #FFFFFF }); circleExample.bindTo ('map', marker);

  7. 7

    Salve o mapa e o teste. O Google Maps irá mostrar um círculo branco com 5.000 metros de raio ao redor do local do marcador.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível