Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Google API Display User Current Location On Google Map

Display User Current Location On Google Map

This article provides a simple HTML example which automatically detects the current location of the user based on the latitude/longitude then display a marker on the Google Map that is tied to latitude/longitude coordinates.

In order to get the user current location, we will use the Geolocation API which can return the latitude and longitude of the current user based on GPS or IP Address.

After that, we will need to add a marker(overlay) that is tied to the latitude/longitude coordinate on Google Map by using Google Map API.

Display User Current Location On Google Map

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0 }
	#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places">
</script>
<script type="text/javascript">
 
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(success);
	} else {
		alert("Geo Location is not supported on your current browser!");
	}
 
	function success(position) {
		var lat = position.coords.latitude;
		var long = position.coords.longitude;
 
		var myLatlng = new google.maps.LatLng(lat, long);
 
		var myOptions = {
			center: myLatlng,
			zoom: 10,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
		var marker = new google.maps.Marker({
			position: myLatlng,
			title:"lat: " + lat + " long: " + long
		});
 
		marker.setMap(map);
	}
</script>
</head>
<body>
	<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"> </script> <script type="text/javascript"> if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success); } else { alert("Geo Location is not supported on your current browser!"); } function success(position) { var lat = position.coords.latitude; var long = position.coords.longitude; var myLatlng = new google.maps.LatLng(lat, long); var myOptions = { center: myLatlng, zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = new google.maps.Marker({ position: myLatlng, title:"lat: " + lat + " long: " + long }); marker.setMap(map); } </script> </head> <body> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>

Note: you will need to allow to share your current location when be asked.

Apr 13, 2012Hoan Huynh

Demo page

Which Browsers And Mobile Devices Support Geolocation APIShare Link/ Url Of Facebook, Twitter, Google Plus, Stumbleupon, Reddit, Digg and Tumblr
You Might Also Like:
  • Google Map Supported Type And Simple Example
  • Which Browsers And Mobile Devices Support Geolocation API
  • How To Track Website With Multiple Google Analytisc Accounts
  • JavaScript Detect Protocol (HTTP/ HTTPS) To Load Or Handle Accordingly
  • Free Online Tools Get IP Address Location, Organization, ISP, Hostname, Country
  • All Google Service APIs
  • Get Image Width Height With JQuery And JavaScript
  • Facebook Load User Profile Via Graph API And FQL Query
  • Javascript Problem Set focus textbox on Firefox
  • Jquery checkbox checked
Hoan Huynh

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at [email protected]

9 years ago Google APIgeolocation, getCurrentPosition, getElementById, Google, Google Map, GPS, ip address, LatLng, marker, navigator568
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
22,192 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
20,067 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
15,843 views
JQuery Allow only numeric characters or only alphabet characters in textbox
13,316 views
C# Read Json From URL And Parse/Deserialize Json
9,815 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • What Can I Expect From An Academic Essay Service?

  • Can Be Essay Service Companies Good For You?

  • Tips To Choosing The Ideal Essay Writers
  • How to Choose the Most Effective Free Photo Editor on the Web
  • How to Compose Your Essay To Me – 4 Easy Steps to Write My Essay
Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (28)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (141)
  • Uncategorized (110)
Recommended
  • Custom Software Development Company
  • Online Useful Tools
  • Premium Themes
  • VPS
2014 © 4 Rapid Development