LocateMe

index.html

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<h1>Testing out Google maps API</h1>
<br>
<div id="map" style="width:500px;height:300px;">
</div>

LocateMe.markdown

LocateMe

Find your user location and showcase them in Googlemap instantly

script.js

//Function which helps to locate the postion of the user
var locateMe = function(){
  	map_element= document.getElementById('map');
    if (navigator.geolocation) {
       var position= navigator.geolocation.getCurrentPosition(loadMap);
    } else {
        map_element.innerHTML = "Ehhh...Geolocation is not supported by this browser.";
    }
};
//Lets load the mop using the position 
var loadMap = function(position) {
     var latitude=position.coords.latitude;
  	 var longitude=position.coords.longitude;
     var myLatlng = new google.maps.LatLng(latitude, longitude);
     //Initializing the options for the map
     var myOptions = {
         center: myLatlng,
         zoom: 15,
         mapTypeId: google.maps.MapTypeId.ROADMAP,
      };
  		//Creating the map in teh DOM
      var map = new google.maps.Map(document.getElementById("map"),myOptions);
  		//Adding markers to it
      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'You are here'
      });
  		//Adding the Marker content to it
      var infowindow = new google.maps.InfoWindow({
          content: "<h2>You are here :)</h2>",
        	//Settingup the maxwidth
          maxWidth: 300
      });
  		//Event listener to trigger the marker content
      google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);});
 	};
//Calling the locateMe function onLoad
window.onload= locateMe;