Locate Me

index.html

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<h1>Locate and show your user's N-W-E-S poles upon 5 miles</h1>
<div>Simple app to show your user location using googlemaps and uses <a href="http://en.wikipedia.org/wiki/Haversine_formula" target="_blank">Haversine formula</a> to locate his/her N-E-W-S poles</div>
<br>
<div id="map" style="width:500px;height:300px;">
</div>

Locate-Me.markdown

Locate Me

Simple Javascript code to locate the user/visitor location and showcase them in google map instantly

A Pen by SamvelRaja on CodePen.

License.

script.js

//Function to locate the user
var locateMe = function(){
  	var map_element= document.getElementById('map');
    if (navigator.geolocation) {
       var position= navigator.geolocation.getCurrentPosition(loadMap);
    } else {
      map_element.innerHTML = "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: 11,
         mapTypeId: google.maps.MapTypeId.ROADMAP,
      };
  		//Creating the map in teh DOM
      var map_element=document.getElementById("map");
      var map = new google.maps.Map(map_element,myOptions);
      var text_html = '<h1>You are here :) </h1>';
      addMarker(map,myLatlng,text_html,1);
      var directions = [
        destination(latitude, longitude, 0, 5,'mi'),
        destination(latitude, longitude, 90, 5,'mi'),
        destination(latitude, longitude, 180, 5,'mi'),
        destination(latitude, longitude, 270, 5,'mi')
      ];
      console.log(latitude);
      console.log(longitude);
      console.log(directions);
      for(var i=0; i<4;i++) {
        var lat = directions[i][0];
        var long = directions[i][1];
        var LatLong = new google.maps.LatLng(lat, long);
        var text = i == 0 ? 'North' : i===1 ? 'East' :  i===2 ? 'South' : 'West';
        var text_html = '<h1>'+text+'</h1>';
        addMarker(map,LatLong,text_html,i+2);
      }
};

var addMarker = function(map,LatLong,text,index){
  //Adding markers to it
  var marker = new google.maps.Marker({
      position: LatLong,
      map: map,
      title: text,
      zIndex: index
  });
  //Adding the Marker content to it
  var infowindow = new google.maps.InfoWindow({
      content: text,
      //Settingup the maxwidth
      maxWidth: 300
  });
  //Event listener to trigger the marker content
  google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);});
}

var degree_to_rad = function (degree){
  return degree * (Math.PI/180);
};
var rad_to_degree= function (rad){
  return rad * (180/ Math.PI);
}

var destination = function(lat,lon, bearing, distance,units) {
    var radius = units === 'mi' ? 6378.137 : 3963.19;
    var latRadian = degree_to_rad(lat);
    var lonRadian = degree_to_rad(lon);
    var bearingRadian = degree_to_rad(bearing);
    var ratio_of_distance = distance / radius;

    var new_lat = Math.asin( Math.sin(latRadian) * Math.cos(ratio_of_distance) +
                            Math.cos(latRadian) * Math.sin(ratio_of_distance) * Math.cos(bearingRadian)
                          );
    var new_long = lonRadian + Math.atan2(  Math.sin(bearingRadian) * Math.sin(ratio_of_distance) * Math.cos(latRadian),
                                            Math.cos(ratio_of_distance) - Math.sin(latRadian) * Math.sin(new_lat)
                                          );

  return [ rad_to_degree(new_lat) , rad_to_degree(new_long) ];

};
//Calling the locateMe function onLoad
window.onload= locateMe;