Cómo mover de manera sutil y suave un marcador en Google Maps utilizando Javascript

La API de Google Maps te proporciona una manera sencilla de mostrar mapas en tu sitio web. Puedes apuntar a una dirección utilizando un marcador en Google Mpas, el cual puede mostrar una ventana de información tanto en texto plano como en HTML. La funcionalidad de mostrar mapas con la API de Google Maps puede extenderse de diversas maneras, pudiendo mostrarlos según tus necesidades sin que haya ningún problema.

Si quieres que los mapas que muestras en tu sitio web sean mucho más amigables, puedes utilizar un marcador animado. En este tutorial te mostraremos cómo mover de manera sutil y suave un marcador en Google Map utilizando Javascript.

En este script de ejemplo mostraremos un mapa con un marcador utilizando la API de Google Maps. Haciendo clic sobre el mapa, el marcador se moverá hacia la posición designada por el clic de manera suave y sutil.

API de Google Maps

Utilizaremos la API de Google Maps para crear el mapa, por lo que, antes que nada, tendremos que insertar la librería. Debes especificar la API Key en la URL para que funcione. No lo olvides...

<script src="https://maps.googleapis.com/maps/api/js?key=LA_KEY_DE_LA_API"></script>

Código Javascript

La función initialize() crea un mapa de Google Maps con un marcador. Utilizaremos las funciones transition() y moveMarker() para mover el marcador hacia donde haya hecho clic el usuario.

<script>
var position = [40.748774, -73.985763];

function initialize() { 
    var latlng = new google.maps.LatLng(position[0], position[1]);
    var myOptions = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);

    marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: "Latitude:"+position[0]+" | Longitude:"+position[1]
    });

    google.maps.event.addListener(map, 'click', function(event) {
        var result = [event.latLng.lat(), event.latLng.lng()];
        transition(result);
    });
}

//Load google map
google.maps.event.addDomListener(window, 'load', initialize);


var numDeltas = 100;
var delay = 10; //milliseconds
var i = 0;
var deltaLat;
var deltaLng;

function transition(result){
    i = 0;
    deltaLat = (result[0] - position[0])/numDeltas;
    deltaLng = (result[1] - position[1])/numDeltas;
    moveMarker();
}

function moveMarker(){
    position[0] += deltaLat;
    position[1] += deltaLng;
    var latlng = new google.maps.LatLng(position[0], position[1]);
    marker.setTitle("Latitude:"+position[0]+" | Longitude:"+position[1]);
    marker.setPosition(latlng);
    if(i!=numDeltas){
        i++;
        setTimeout(moveMarker, delay);
    }
}
</script>

Código HTML

En el siguiente HTML definimos el área donde mostraremos el mapa de Google Maps. Debemos especificar el ID del área dentro de la función initialize().

<div id="mapCanvas"></div>

Código CSS

Por último, en nuestro CSS vamos a definir las medidas de nuestro mapa.

#mapCanvas{
    width: 100%;
    height: 400px;
}

Fuente: codexworld.com