1

Basically, my map marker is updating when user moves, however I can't see the radius circle getting bigger or smaller. How can that be done? Also how can you add a animation so that when user moves, the marker moves with him?

$(document).ready(function() {
var map;

      var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        var icons = {
          parking: {
            icon: iconBase + 'parking_lot_maps.png'
          },
          library: {
            icon: iconBase + 'library_maps.png'
          },
          info: {
            icon: iconBase + 'info-i_maps.png'
          }
        };
function initializeMap(){
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 19,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}
function locError(error) {
// the current position could not be located
    alert("The current position could not be found!");
}
function setCurrentPosition(position) {
    var accuracy = position.coords.accuracy;
    currentPositionMarker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude
        ),
        title: "Current Position",
        center: position,
        icon: iconBase + 'parking_lot_maps.png',
        animation: google.maps.Animation.DROP
    });
    map.panTo(new google.maps.LatLng(
        position.coords.latitude,
        position.coords.longitude
    ));
        var circle = new google.maps.Circle({
        map: map,
  radius: accuracy,    // 10 miles in metres
  fillColor: '#AA0000'
});

circle.bindTo('center', currentPositionMarker, 'position')
}

function displayAndWatch(position) {
    // set current position
    setCurrentPosition(position);
    // watch position
    watchCurrentPosition(position);
}
function watchCurrentPosition(position) {
    var positionTimer = navigator.geolocation.watchPosition(
        function (position) {
            setMarkerPosition(
            currentPositionMarker,
            position,
        )
    });
}
function setMarkerPosition(marker, position) {
    accuracy = position.coords.accuracy;
    marker.setPosition(
        new google.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude)
    );
        map.panTo(new google.maps.LatLng(
        position.coords.latitude,
        position.coords.longitude
    ));

}
function initLocationProcedure() {
    initializeMap();
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
        }else{
            alert("Your browser does not support the Geolocation API");
    }
}

$(document).ready(function() {
    initLocationProcedure();
});
Przemek Wojtas
  • 1,311
  • 5
  • 26
  • 51

1 Answers1

0
function setMarkerPosition(marker, position) {
    circle.setRadius( position.coords.accuracy );
    ....
}
mikepa88
  • 733
  • 1
  • 6
  • 20
  • how about animation ? – Przemek Wojtas Jun 23 '17 at 15:51
  • Look into this: https://stackoverflow.com/questions/10904476/js-google-maps-api-v3-animate-marker-between-coordinates or similar, basically make your own loop to move it with a transition. Another option would be to identify the marker html element and with the right css selector, give a transition to top and left properties (or whatever google uses to position its markers) – mikepa88 Jun 23 '17 at 15:56
  • I tried doing something similar according to question but it doesn't work, can you provide me with an example? I want it to move slowly (slide) – Przemek Wojtas Jun 23 '17 at 16:37
  • You mean with css ? The .js option is developed in the link I provided. – mikepa88 Jun 26 '17 at 09:54