Search code examples
asp.netgoogle-mapscompass-geolocationip-geolocation

Show user exact or approximate location n google maps in asp.net c# in web site


I want to show user current location or approximate location on google maps in my web site using asp.net c#.Is it possible??? If it is kindly help me.I saw many tutorials but fail.


Solution

  • First you need to get google maps API key for your localhost, this link provides details on how to do that: http://www.aspdotnet-suresh.com/2013/01/generate-google-maps-api-key-for.html

    Second in your default.aspx page do this:

    script tags:

    <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
    </script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places">
    </script>
    <script type="text/javascript">
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success);
    } else {
    alert("Geo Location is not supported on your current browser!");
    }
    function success(position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
    var city=position.coords.locality;
    var myLatlng = new google.maps.LatLng(lat, long);
    var myOptions = {
    center: myLatlng,
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({
    position: myLatlng,
    title: "lat: " + lat + " long: " + long
    });
    
    marker.setMap(map);
    var infowindow = new google.maps.InfoWindow({ content: "<b>User Address</b><br/> Latitude:"+lat+"<br /> Longitude:"+long+"" });
    infowindow.open(map, marker);
    }
    </script>
    

    in body tag simply include a empty div:

    <div id="map_canvas" style="width: 800px; height: 500px"></div>
    

    css:

    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map_canvas { height: 100% }
    

    this is the result you should get:

    enter image description here

    Tutorial: http://www.aspdotnet-suresh.com/2013/01/show-user-current-location-on-google.html