jeudi 30 janvier 2020

create a route with list of coordinates on google map with JavaScript

Note: I have found many similar threads like this, but was unable get help from those.

I am storing coordinates of a device in database after every 20 KMs, Now I need to draw a route of line on the map to show history of movement of that device on map. I just need to draw a default line with no markers on it. and map should be disabled for other functionalities like zoom-in etc.

What I did: in my node js application controller, I have retrieved the list of coordinates as a array in variable. passed those array to view.

How do I append that coordinates in my existing map initialize() functions which is also used for Places api and real-time location of device.

can any one guide how to do this.

My Map Init()

function initMap() {
        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            var lat = place.geometry.location.lat();
            var long = place.geometry.location.lng()


            document.getElementById('city2').value = place.name;
            document.getElementById('cityLat').value = place.geometry.location.lat();
            document.getElementById('cityLng').value = place.geometry.location.lng();

        });
            map = new google.maps.Map(document.getElementById('map'));
            navigator.geolocation.getCurrentPosition(function (position) {
                var initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                map.setCenter(initialLocation);
                map.setZoom(13);               
            }, function (positionError) {
                map.setCenter(new google.maps.LatLng(39.8097343, -98.5556199));
                map.setZoom(5);               

            });
            map.setMapTypeId('roadmap');
        }



Aucun commentaire:

Enregistrer un commentaire