CODEWITHSUNDEEP
javascriptasp.net-mvcgoogle-mapsgoogle-maps-api-3geolocation
Assaf Our
Assaf Our

Reputation: 639

sorting marker in google map according to user location

I have a list of events that I display as markers on a map(its web application/site) and I would like to show only events in a certain distance (10 KM) from the user current location So, how can I combine this 2

//User Location
        if (navigator.geolocation)
        {
        navigator.geolocation.getCurrentPosition(
        function (position) {
            var currentLatitude = position.coords.latitude;
            var currentLongitude = position.coords.longitude;
            //   alert ("Latitude"+currentLatitude+"Longitude"+currentLongitude);window.mapServiceProvider(position.coords.latitude,position.coords.longitude);
            //   console.log(position);
        }

                );
        }


   //List of location from the Db.
var markers = @Html.Raw(Json.Encode(Model.UpcomingLectureGigs));
//Set All merkers on the map 
window.onload = function (a) {

    var mapOptions = {
        center: new window.google.maps.LatLng(window.markers[0].Latitude, window.markers[0].Longitude),
        zoom: 12,
        mapTypeId: window.google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new window.google.maps.InfoWindow();


    var map = new window.google.maps.Map(document.getElementById("dvMap"), mapOptions);
    for (var i = 0; i < window.markers.length; i++) {
        var data = window.markers[i];

        var myLatlng = new window.google.maps.LatLng(data.Latitude, data.Longitude);
        // console.log(data.Latitude, data.Longitude);
        var marker = new window.google.maps.Marker({
            position: myLatlng,
            draggable: true,
            animation: google.maps.Animation.DROP,
            get map() { return map; }
        });
        (function (marker, data) {
            window.google.maps.event.addListener(marker,
                "click",
                function (e) {

                    infoWindow.setContent(data
                        .Venue +
                        " " +
                        data.Genre.Name +
                        " " +
                        data.DateTime.toString("dd/mm/yy"));
                    //.toISOString().split("T")[0]);
                    //  .format('MM/DD h:mm');

                    infoWindow.open(map, marker);
                });
        })(marker, data);
    };
};

Upvotes: 0

Views: 1523

Answers (1)

xomena
xomena

Reputation: 32178

You can use a geometry library to calculate distance in meters between the user location and marker.

https://developers.google.com/maps/documentation/javascript/reference#spherical

The code snapshot to filter markers may be something like 

var markers_filtered = markers.filter(function(marker, index, array) {
    var myLatlng = new window.google.maps.LatLng(marker.Latitude, marker.Longitude);
    return google.maps.geometry.spherical.computeDistanceBetween(userLatLng, myLatlng) < 10000; 
});
for (var i = 0; i < markers_filtered.length; i++) {
   //Your stuff here
}

You should add libraries=geometry parameter when you load Maps JavaScript API.

https://developers.google.com/maps/documentation/javascript/geometry

Upvotes: 2

Related Questions