Google maps with GeoLocation | Lessoncup Programming Blog

Thursday, 21 April 2016

Google maps with GeoLocation

This tutorial will show you how to get the user location using HTML5 GeoLocation, in my previous tutorial we have seen how to customize Google Maps as i working on Google Maps in past tutorial i thought to give a user location using Google maps and GeoLocation , and even i didn't find a better tutorial showing user current location with Google maps using GeoLocation, let's see the simple work behind this


HTML

in the html page inside the body tag take a DIV and give a id name googleMap and assign the width and height as your requirements,  i always tell what ever you start writing code first you need to analyse concept and divide into steps, here first we need get the user location values with latitude and longitude options

store the values in two variable like <span id="lat"></span> and <span id="lon"></span> now we have the values of user current location, in the next step is we need to apply the values to google map see the bellow bellow code


<div id="layout">

<div id="googleMap" style="width:100%;height:500px;"></div>

<div style="width:270px; margin:0 auto;">
<button onclick="getLocation()">Get Your Location</button>

<button onclick="currentMap()" id="curmapbtn" style="display:none; float:right;">
Apply To Map</button>

<p id="demo" style="text-align:center">

<span id="lat"></span>
<span id="lon"></span>

</p>
</div>


<script>

var lat = document.getElementById("lat");
var lon = document.getElementById("lon");


function getLocation() {
 
 document.getElementById("curmapbtn").style.display = "block";
 
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else { 
        lat.innerHTML = "Geolocation is not supported by this browser.";
  }
    }
    
function showPosition(position) {
 
 lat.innerHTML = position.coords.latitude;
 lon.innerHTML = position.coords.longitude;
  
}
</script>
  
</div>

JQuery

here first we need to display the default map for that write the function worldMap() inside the function write the google map api and map properties

next function is currentMap() in this function get the stored values of user location using  document.getElementById("lat").innerHTML; and store it in user_lat variable i just use the Google Map and Google Marker properties and i am applying the stored current location values from span tag to both features of Google Maps and Google Marker by using new google.maps.LatLng(user_lat, user_long), see the bellow full code
<script>

/*
--------------
*/

function worldMap(){

 var mapProp = { 
 center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 1,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
 
  };
  
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 
 
}



function currentMap() {
 var user_lat = document.getElementById("lat").innerHTML;
 var user_long= document.getElementById("lon").innerHTML;
 
 var myHome = { "lat" : user_lat , "long" : user_long};
 
  var mapProp = { 
 center:new google.maps.LatLng(user_lat, user_long),
    zoom:8,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
 
  };
  
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
  
  
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(user_lat, user_long),
 animation:google.maps.Animation.BOUNCE,
    map: map
  });

}

google.maps.event.addDomListener(window, 'load', worldMap);

/*
--------------
*/

</script>


Live Demo

1 comment :

  1. Very great post. I simply stumbled upon your blog and wanted to say that I have really enjoyed browsing your weblog posts. After all I’ll be subscribing on your feed and I am hoping you write again very soon!

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons