Google Map API: Add marker between source and destination in JavaScript

nauna
 
on Jun 13, 2022 02:55 AM
282 Views

hello,

I want to show google map in a following ways

1. Start Destination

2. End destination

3. In between i have various latitude and longitude coordinates so i want to show a map A- start from here  B end destination and in between current latitude and longitude values

All the values are coming from database

please advice

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jun 23, 2022 03:52 AM
on Jul 01, 2022 01:43 AM

Hi nauna,

You need to specify the points as array. Then use the Array to add the marker and poly lines between the markers.

Refer this article to bind the marker from database.

ASP.Net: Populate Google Maps V3 with Multiple Markers using Address Latitude and Longitude values stored in database

Refer below code.

HTML

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=API_Key"></script>
<script type="text/javascript">
    var markers = [
        {
            "title": 'Khira Nagar, SV Rd',
            "latitude": '19.0871349',
            "longitude": '72.8355382',
            "description": 'Khira Nagar, SV Rd'
        },
        {
            "title": 'Anand Centre, SV Rd',
            "latitude": '19.0843365',
            "longitude": '72.8356723',
            "description": 'Anand Centre, SV Rd'
        },
        {
            "title": 'Saint Teresa Convent School',
            "latitude": '19.0794291',
            "longitude": '72.8353129',
            "description": 'Saint Teresa Convent School'
        }
    ];
    window.onload = function () {
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].latitude, markers[0].longitude),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        var infoWindow = new google.maps.InfoWindow();
        var lat_lng = new Array();
        var latlngbounds = new google.maps.LatLngBounds();
        for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.latitude, data.longitude);
            lat_lng.push(myLatlng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title
            });

            latlngbounds.extend(marker.position);
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data.title);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
        }
        map.setCenter(latlngbounds.getCenter());
        map.fitBounds(latlngbounds);

        var service = new google.maps.DirectionsService();

        for (var i = 0; i < lat_lng.length; i++) {
            if ((i + 1) < lat_lng.length) {
                var src = lat_lng[i];
                var des = lat_lng[i + 1];

                service.route({
                    origin: src,
                    destination: des,
                    travelMode: google.maps.DirectionsTravelMode.WALKING
                }, function (result, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        var path = new google.maps.MVCArray();
                        var poly = new google.maps.Polyline({
                            map: map,
                            strokeColor: '#4986E7'
                        });
                        poly.setPath(path);
                        for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                            path.push(result.routes[0].overview_path[i]);
                        }
                    }
                });
            }
        }
    }
</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>

Screenshot