Friday, 31 January 2014

Show User Current Location on Google Map using GeoLocation API in our Website




Description:-

In this example we explain that how to show user current location using Google map API  (Geolocation) using javascript in asp.net and Get user current location details like latitude and longitude using Google map API (Geolocation) using javascript in asp.net.

look at the above image in which my current location is display in Ahmedabad because i use this program in Ahmedabad so you use this code in your home then it will display the Google map for your city in which you are located.

this is very useful things or features of Google you can easily add in your website and show the location of the user.

If would you like to show user current location details in in Google map with latitude and longitude details then we first need to get Google API(Application programming interface).here latitude and longitude are the coordinates for search location, as well as get the coordinates of a location you've already found on Google Maps.

What is Google API;-

            An API(Application programming interface)  is one kind of specification used by software components to communicate with each other.

An API may describe the path in which a particular task is performed.

How to Get Google Map API key for website:-

http://www.w3schools.com/googleAPI/google_maps_api_key.asp

click on this link here it will describe how to get API key for Google map.and then when you get the key then write the following code in your aspx or html or other pages in which you are worked.

how to create or Generate thumbnails of the image in asp.net Generate thumbnails of the image in asp.net

mvc example for display grand total in footer of webgrid Footer template in webgrid in mvc4

create awesome vertical menu using CSS Fancy vertical menu in CSS

googleuserlocation.aspx:-



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="googleuserlocation.aspx.cs" Inherits="googleuserlocation" %>

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Get User Current Location using Google Map Geolocation API Service in asp.net website</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<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>
</head>
<body >
<form id="form1" runat="server">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
</form>
</body>
</html>

1 comments:

  1. I tried the same...but I cannot see the map in chrome browser.. my API key is created for http://localhost/HME_Full/contact_us.html page url.....Would appreciate for your response at your earliest...Thank you!!

    ReplyDelete