7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 19Length: 1.7 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.3 HTML5 Geolocation

Using HTML5 Geolocation and Google Maps you’ll be able to map where to current user is located. Also, you’ll learn about a feature of Chrome that will allow you to imitate the user’s location.

Related Links

5.3 HTML5 Geolocation

Using HTML5 we can get a user's current location, and that returns to us a position object that provides us with a lat and a long. So it only makes sense that we can use that data to drop a map maker on to where the user's located. So the first thing to do when you're checking for HTML5 geolocation, you check the navigator object. And if the navigator has a geolocation object then you know that we'll be in business for grabbing the user's location. So if geolocation exists we'll call navigator.geolocation, and then we'll call the function get current position. And now we'll take in a callback and then we'll pass through the position object to that callback. And you can see we get this little notification up here. This website wants the user computer's location, and you can either deny it or allow it. In this case, we'll allow it. So, now we'll console out log the position object. So in the log we see geoposition and we can that we have coordinates. The coordinates give us an accuracy as well as the latitude and the longitude. So we can tap into this position.cords.latitudeandlongitude. So since we have the position object we can call Mapster, and we can add a marker. And we can set the lat and the long. [BLANK_AUDIO] So now you can see that we've added the marker to the current location. And you might be wondering why I'm out in the middle of the ocean. And no, I don't live on a houseboat. I'm actually using a cool feature within Google Chrome. So within the console we can click on this button up here, which is called the drawer. And once we've opened the drawer we can click on emulation. And we can go into the sensors tab. Within there we can see there's an option to emulate geolocation coordinates. And from there, we can set the latitude and the longitude. And we also can emulate if the position is unavailable. So we actually can change this to be the equator if we want. So now you can see we don't see anything. But if we zoom out, we can see that we're right on the equator. So even though getting the user's location is part of HTML5 and not Google maps, we can still use it and plug it into the library. So we'll take this functionality and we'll put it into our Mapster library. So below geocode, we'll create a function and we'll call it getCurrentPosition, and we'll have that take in a callback. And we'll check on the navigator to see if geolocation is available. And we'll check on the navigator to see if geolocation is available. And if it's available, we'll call navigator.geolocation.getcurrentposition and we'll pass through the callback that returns us the position. And within here we can call the call on the callback method and pass back the position. And now we'll create a method for this inside the jQuery widget. We'll call getCurrentPosition, and since it's already in the library, we'll call this.map.getCurrentPosition. So now in our script, we'll comment this out, we'll call getCurrentPosition and then we'll pass to our callback. And then we can call Mapster again to add the marker. However, one thing to be aware of, is the value of this inside the callback. Traditionally when you're using jQuery, the value of this always returns back to the jQuery object. And currently it's not doing that. [BLANK_AUDIO] Right now this is actually referring to the window. So this means that we have to call this Mapster and we actually can't call this Mapster, because this should be the element that we're actually operating on. So to change that we'll go into the mapster.js. So to change that, we'll go into our jQuery UI. So in this lesson, we were able to use the HTML5 Geolocation API to add a map marker.

Back to the top