Cómo utilizar la API de Google Maps de distancia radial

Autor: Judy Howell
Fecha De Creación: 1 Mes De Julio 2021
Fecha De Actualización: 14 Noviembre 2024
Anonim
Cómo utilizar la API de Google Maps de distancia radial - Artículos
Cómo utilizar la API de Google Maps de distancia radial - Artículos

Contenido

Puede personalizar un mapa de Google para satisfacer las necesidades específicas del público de su sitio con la API de Google Maps 3.0. Un método de personalización es insertar una circunferencia que muestre el radio de distancia alrededor de un lugar específico. Usted puede, por ejemplo, mostrar el radio de cinco kilómetros alrededor de un punto turístico para que los visitantes puedan ver los hoteles y restaurantes cercanos. Para crear un radio de distancia alrededor de un lugar o punto, utilice la clase "Círculo" de Google Maps.


instrucciones

  1. Abra el archivo HTML y vaya a la sección que contiene el código de mapa de Google.

  2. Descienda por el código hasta encontrar lo que define la ubicación del marcador. Para encontrar el marcador fácilmente, busque el término "google.maps.Marker" en el archivo HTML.

  3. Debajo de donde se establece el marcador, cree la capa "Círculo" y adjuntarla a él. Por ejemplo, escriba:

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

  4. Añada el radio del círculo que quedará alrededor del marcador en metros:

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

  5. Cree un color de relleno del círculo. Define el color utilizando un formato hexadecimal. Por ejemplo, escriba:

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

  6. Asocie, o agregue, el círculo al marcador:


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

  7. Guarde el mapa y la prueba. Google Maps mostrará un círculo blanco de 5.000 metros de radio alrededor de la ubicación del marcador.