Wednesday 16 July 2014

Get the Current Goe Location using Google API in HTML

                     In this article we are going to see how to get the current geo location code , using the google API, For this we have to enable the Google GeoCode API service , then click the enable button when the first time browser raises a pop up to show map, To build a map like below one, we have to do the following steps. Use the mouse to zoom in and out



Start wirh HTML and then Javascript,
   <form id="mapform" runat="server">
        <div id="mapcanvas" style="width: 500px; height: 400px"></div>

    </form>

Create a Div element to place the map.

Next to get the google maps , we need a server call api key from google, for this do the simple three steps.
Go to the

  1. Visit the APIs console at https://code.google.com/apis/console and log in with your Google Account.
  2. Click the Services link from the left-hand menu in the APIs Console, then activate the Geocoding API service.
  3. Once the service has been activated, your API key is available from the API Access page, in the Simple API Access section. Geocoding API applications use the Key for server apps.
Then Use that key in the script call. like below.

<script type="text/javascript" 
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZE2VTm32UQuqTgb3KgP4&sensor=false"></script>


    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

Then create a JavaScript to get the current location.
First check whether the Geo location is supported in browser,  for this we can test in navigator.geolocation.
Once it is passed, then bind a callback function, which have a position as input paramter. From the position we can get the coordinates.

Now the Next thing is Draw the map using the Geocodes, so to do this we have to create a Google.Maps.Map instance and Marker.

First pass the latitude and longitude as parameter to a instance. then pass that instance to a options parameter center:, Next get the element tag where to show the map, along with options in Map instance. now use the marker instance to set the map.Next create a infowindow with a content parameter.

 <script type="text/javascript">
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(success);
        }
        else {
            alert("GeoLocation is not supported in your browser");
        }

        function success(position) {
            debugger;
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var city = position.coords.locality;
            var myLatlng = new google.maps.LatLng(latitude, longitude);
            var myOptions = {
                center: myLatlng,
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
            var marker = new google.maps.Marker({
                position: myLatlng,
                title: "lat: " + latitude + " long: " + longitude
            });

            marker.setMap(map);
            var infowindow = new google.maps.InfoWindow({ content: "<b>Address</b><br/>                Latitude:" + latitude + "<br /> Longitude:" + longitude + "" });
            infowindow.open(map, marker);
        }


    </script>


 From this post you can learn how to get the location of current place using google GeoCode api.