Show Location on Google Map

Description

This demonstrates how to detect your current location then display it on a Google Map as a semi-transparent radius.

Demonstration

How To Use

  1. As the page loads, accept any request from your browser to grant it permission to access you location
  2. If the location can be found, the map will reposition to your location and a radius of your location with then display

How it Works

        var geocoder;
var map;
var midmarker;
var showmidmarker=true;
var circle;
var radiustouse=150;
var markericon = "images/gmmarkersv3/radar.png";

function initialize() 
{
	geocoder = new google.maps.Geocoder();
	var latlng = new google.maps.LatLng(0,0);
	var myOptions = {zoom: 3,center: latlng,mapTypeId:google.maps.MapTypeId.HYBRID,draggableCursor:'crosshair'};
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);	
	
	tryGeolocation();	
	setInterval(recurring,5000); // Time in milliseconds
}

function recurring()
{
	if (document.getElementById("cb_keepupdating").checked)
	{
		tryGeolocation();
	}
}

function showPosition(lat,lng) {
	document.getElementById("msg").innerHTML="Location Found";
	
	userposition = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));		
	
	map.setCenter(userposition);
	map.setZoom(16);
	
	//Plot marker
	if (showmidmarker)
	{
		if (midmarker)
		{
			midmarker.setMap(null);
		}
		midmarker = new google.maps.Marker({position:userposition,map:map,icon:markericon});
	}
	
	//Plot Circle
	plotcircle(userposition,radiustouse);
}

function plotcircle(point,distance)
{					
	if (circle)
	{
		circle.setMap(null);
	}
	circle = makecircle(point,distance);
}
 
function makecircle(point,distance)
{
	var givenQuality=75;
	var colour="#E84343";
	var fillcolour="#E3E3E3";
	var thick="1";
	var transparency=0.5;

	thiscircle = new google.maps.Circle({
	  center: point,
	  map: map,
	  radius: distance,
	  strokeColor: colour,
	  strokeWeight: thick,
	  strokeOpacity: 1,
	  fillColor: fillcolour,
	  fillOpacity: transparency,
	  clickable: false	
	});	
	
	return thiscircle;
}

var tryGeolocation = function() {
  document.getElementById("msg").innerHTML="Loading...";
  if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(
	browserGeolocationSuccess,browserGeolocationFail,
	{maximumAge: 50000, timeout: 20000, enableHighAccuracy: true});
  }
};

var apiGeolocationSuccess = function(position) {
	showPosition(position.coords.latitude,position.coords.longitude);
};

var tryAPIGeolocation = function() {
	jQuery.post( "//www.googleapis.com/geolocation/v1/geolocate?key=GOOGLEMAPKEY", function(success) {
		apiGeolocationSuccess({coords: {latitude: success.location.lat, longitude: success.location.lng}});
  	})
  	.fail(function(err) {
		console.log("API Geolocation error! \n\n"+err);
  	});
};

var browserGeolocationSuccess = function(position) {
	showPosition(position.coords.latitude,position.coords.longitude);
};

var browserGeolocationFail = function(error) {
  switch (error.code) {
    case error.TIMEOUT:
      console.log("Browser geolocation error !\n\nTimeout.");
      break;
    case error.PERMISSION_DENIED:
      if(error.message.indexOf("Only secure origins are allowed") == 0) {
        tryAPIGeolocation();
      }
      break;
    case error.POSITION_UNAVAILABLE:
      console.log("Browser geolocation error !\n\nPosition unavailable.");
      break;
  }
};

Further Uses and Ideas

  • none

Version History

  • Version 1 (31/10/2016) - Version 1

Comments For This Page

Hi, can you confirm what you mean by partial loading? Thanks
By Daft Logic on 28th March 2017
excellent but use is little incovenient due partial loading of map
On 26th March 2017

Add your own comment below and let others know what you think:

Share This Page

Share this page with others using one of the methods below. Telling others about Daft Logic is good and we appreciate your support!