How to make waypoint route from current position to db location

22
July 20, 2018, at 10:20 PM

I need to make a way point between the locaton.png to place.png or Current location to location from db.Currently i got my current location and location from db. i have read the waypoint document in google map api, but still not showing the roadmap/the lines of road. Can someone help me? thanks in advice.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=geometry,places"></script> 
   <script type="text/javascript"
   function initMap() {
        var directionsService = new google.maps.DirectionsService;
         var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -6.808636, lng: 110.841938},
            zoom: 18
        });
        // Menggunakan fungsi HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                marker = new google.maps.Marker({
                    position: pos,
                    map: map,
                    icon: 'location.png',
                    title: 'Posisi Kamu',
                    animation: google.maps.Animation.DROP,
                });
                map.setCenter(pos);
                var user_location = position.coords.latitude+","+position.coords.longitude;
                var url = "tampil.php";
                var jarak = 1;
                var info = [];
                $.ajax({
                    url: url,
                    data: "position="+encodeURI(user_location)+"&jarak="+jarak,
                    dataType: 'json',
                    cache: true,
                    success: function(msg){
                        for(i=0; i < msg.data.toko_rental.length;i++){
                            var point = new google.maps.LatLng(parseFloat(msg.data.toko_rental[i].latitude),parseFloat(msg.data.toko_rental[i].longitude));
                            tanda = new google.maps.Marker({
                                position: point,
                                map: map,
                                icon: "place.png",
                                animation: google.maps.Animation.DROP,
                                title: msg.data.toko_rental[i].nama_toko
                            });
                        }
                    }
                });
            }, function() {
                handleLocationError(true, map.getCenter());
            });
        } else {
            handleLocationError(false, map.getCenter());
        }
    }
    function showPlaces() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -6.808636, lng: 110.841938},
            zoom: 11,
        });
        // Menggunakan fungsi HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                marker = new google.maps.Marker({
                    position: pos,
                    map: map,
                    icon: 'location.png',
                    title: 'Posisi Kamu',
                    animation: google.maps.Animation.DROP,
                    travelMode: google.maps.DirectionsTravelMode.WALKING
                });
                map.setCenter(pos);
                var user_location = position.coords.latitude+","+position.coords.longitude;
                var url = "tampil.php";
                var jarak = document.getElementById("jarak").value;
                $.ajax({
                    url: url,
                    data: "position="+encodeURI(user_location)+"&jarak="+jarak,
                    dataType: 'json',
                    cache: true,
                    success: function(msg){
                        for(i=0; i < msg.data.toko_rental.length;i++){
                            var point = new google.maps.LatLng(parseFloat(msg.data.toko_rental[i].latitude),parseFloat(msg.data.toko_rental[i].longitude));
                            tanda = new google.maps.Marker({
                                position: point,
                                map: map,
                                icon: "place.png",
                                animation: google.maps.Animation.DROP,
                                title: msg.data.toko_rental[i].nama_toko,                                   
                                travelMode: google.maps.DirectionsTravelMode.WALKING
                            });
                        }
                    }
                });
            }, function() {
                handleLocationError(true, map.getCenter());
            });
        } else {
            handleLocationError(false, map.getCenter());
        }
        document.getElementById('submit').addEventListener('click', function() {
        calculateAndDisplayRoute(directionsService, directionsDisplay);
    });
    }
    function handleLocationError(browserHasGeolocation, pos) {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -6.808636, lng: 110.841938},
            zoom: 13
        });
        var infoWindow = new google.maps.InfoWindow({map: map});
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
            'Error: The Geolocation service failed.' :
            'Error: Your browser doesn\'t support geolocation.');
    }

    google.maps.event.addDomListener(window, 'load', initMap);
    </script>
    <div class="col-lg-9">
          <div id="map" style="width:100%; height:600px;"></div>
    </div>
    // Showing the location from database
    <button id="cari" type="button" class="btn btn-primary" onclick="showPlaces();">Cari Tempat</button>
READ ALSO
jQuery plugins not working when using webpack. What is correct way to use it?

jQuery plugins not working when using webpack. What is correct way to use it?

I was try yo use webpack in my developmentI use npm, install jquery and some plugins (YTPlayer, fancybox)

39
Cannot use characters &#39;&lt;&#39; or &#39;&gt;&#39; in jQuery script in WordPress

Cannot use characters '<' or '>' in jQuery script in WordPress

While running my jquery script in wordpress I ran across this weird errorThat does not allow me to use characters '<' or '>' in my script, any surrounding text just disappears during runtime

42
Executing a js file returned inside an ajax response

Executing a js file returned inside an ajax response

I have a HTML5 application which is using jquery 32

10
Jquery : Create parent child list from XML with different nodes

Jquery : Create parent child list from XML with different nodes

I have an XML below which I am using to create a hirarchical tree

42