The guys at Doctype.tv have done a couple of videos on Google Maps API and the HTML5 geolocation feature, but they didn’t show exactly how to link them together. For someone like me, who’s still just getting comfortable with JavaScript it can take a bit to figure out exactly how the get the two to hook up. So I took the code they provided and worked it out. Here’s a demo of what we’ll be making.
First, for the HTML all you need is this:
If you really wanted to, you could even just use JavaScript to add the div to the page, but this is good enough for what we want to do here. Next, just a little CSS to make the map look nice:
1 2 3 4 5 6 7 8 | #mapDiv { width:500px; height:300px; border:1px solid #efefef; margin:auto; -moz-box-shadow:5px 5px 10px #000; -webkit-box-shadow:5px 5px 10px #000; } |
Now for the JavaScript. First we need to like to the Google Maps API:
Now we have to check that geolocation is actually available with the browser the visitor is using:
1 2 3 | if(navigator.geolocation) { } |
So far, I’ve only been able to get this to work in Firefox 3.6, it’s supposed to work in Chrome but it hasn’t been working for me. Next we need this line:
1 | navigator.geolocation.getCurrentPosition(hasPosition); |
What’s happening here? We’re using the built in HTML5 getCurrentPosition function and passing in a function called hasPosition, which we have to create now, above this line.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | function hasPosition(position) { //Creates a variable called point and sends the latitude and longitude to Google Maps to get your position var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude), //Settings for the map myOptions = { zoom: 15, center: point, mapTypeId: google.maps.MapTypeId.ROADMAP }, //Finding the div we want the map to be in mapDiv = document.getElementById("mapDiv"), //Pass in the div and map settings to the map map = new google.maps.Map(mapDiv, myOptions), // marker = new google.maps.Marker({ position: point, map: map, title: "You are here" }); } |
And you should get this.
Here’s the entire code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Geolocation</title> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script> if(navigator.geolocation) { function hasPosition(position) { var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude), myOptions = { zoom: 15, center: point, mapTypeId: google.maps.MapTypeId.ROADMAP }, mapDiv = document.getElementById("mapDiv"), map = new google.maps.Map(mapDiv, myOptions), marker = new google.maps.Marker({ position: point, map: map, title: "You are here" }); } navigator.geolocation.getCurrentPosition(hasPosition); } </script> <style> #mapDiv { width:500px; height:300px; border:1px solid #efefef; margin:auto; -moz-box-shadow:5px 5px 10px #000; -webkit-box-shadow:5px 5px 10px #000; } </style> </head> <body> <div id="mapDiv"></div> </body> </html> |
Pingback: Tweets that mention Atomic Robot Design Blog | Using HTML5 geolocation and the Google Maps API « Atomic Robot Design -- Topsy.com
Hi,
I have written a small article on html5 geolocation on following link.
http://www.mindstick.com/Articles/5013acba-e863-4e75-b890-fdacffc368c3/?getCurrentPosition method in HTML5
This might be useful for you.
Hi,
I cannot figure out where you pass parameters (longitude, latitude) to make dynamic displays.
Jack,
Just replace the variable point with the longitude and latitude that you want to show.
your example doesn’t work in FF…
Works fine for me