MacMost Now 332: iPhone GPS Location With JavaScript

Web developers creating pages specifically for the iPhone can ask for GPS location data on their Web pages with some simply JavaScript. See a basic example that can be used to get the latitude and longitude of the iPhone viewing the Web page.

Video Transcript: Hi, this is Gary with MacMost Now. On today's episode a little something for web developers: how to get latitude and longitude on a web page, on an iPhone.
So we all know that the iPhone has a GPS chip in it, and apps, like map apps can tell your location and use that. But did you know web pages can do so as well? If you're a web developer you can use some simple JavaScript to grab the GPS location of an iPhone. So here I've created a very simple example using a plain HTML page. In here I've put a script in the header, and I've declared a few functions here. The first one's called get GPS and here I'm going to check for the navigator.geolocation class. This is what gets all the GPS information. If it's there, then we can call it navigator.geolocation.getCurrentPosition and we can give it two call-backs: showGPS and gpsError which are these two functions here. If it's not there, then we're gonna set the inner text of a div tag in the body of the page to say "No GPS Functionality." So that'll happen if you're looking at the page, say, in Safari on the Mac.
I'll post all this code with the video at the MacMost website, so check this URL.
The two functions here, the first is gpsError: this will just put up an alert with the error code and message that's passed in. The second one is showGPS, this is actually going to put the GPS information on the page. We're gonna set the inner text of that div tag to some text here which is latitude and then get position.coords.latitude and then longitude. Put that on two separate lines on the text, and that's the end of the script in the header.
The page itself is pretty simple: it's just going to have a link and on click it's going to call getGPS. And then here I've got that div tag ready to be filled in with the latitude and longitude information.
I should, of course point out that when a user clicks on that link and it tries to get their location, they're going to be prompted with a dialogue box asking if it's okay for that web page to know their current location, so there are really no privacy concerns here. Once you've said it's okay for that page to know, then it can go ahead and do other things with geolocation and it won't prompt them again so it doesn't get in the way too much.
So, when we bring up the page on the iPhone this is what we get, just this simple link here. When we click on that link we're quickly returned the information there, after that little dialogue box pops up asking us for permission.
You can take it a step further, of course and have a link that actually does something. For instance, here's a much longer piece of code that calls googlemaps.com and passes into it the latitude and longitude in addition to a text label. This here will put a little placeholder over the text showing your label, and the zoom here will zoom it all the way in. And you put that as the link, latitude and longitude, and now you have basically a link that will take you right to a Google Maps spot of that location. It'll actually do that on your iPhone in the Google Maps app, because the iPhone like that is smart enough to know that a link like that should just open up the Google Maps app, rather than opening up Google Maps in the web browser.
If you're a web developer there are a lot more interesting things you could do, for instance if you run a website that has to do with weather, then you could instantly show them their weather at their current location, if it's movie times, you could show the movie times nearby, all sorts of things like that, you   could create web services that track your location for trips, all sorts of different things. It's great to know that this functionality has now been exposed inside of JavaScript so you don't have to build a stand-alone iTunes store app to use the GPS functionality in the iPhone. I hope you found this useful, 'til next time this is Gary Rosenzweig with MacMost Now.

HTML Source Code:

<html>
<head>

<script type="text/javascript">

function getGPS() {
	if (navigator.geolocation) {  
		navigator.geolocation.getCurrentPosition(showGPS, gpsError);
	} else {  
		gpsText.innerText = "No GPS Functionality.";  
	}
}

function gpsError(error) {
	alert("GPS Error: "+error.code+", "+error.message);
}

function showGPS(position) {
	gpsText.innerText = "Latitude: "+position.coords.latitude+"\nLongitude: "+position.coords.longitude;
	
	// alternate
	//gpsText.innerHTML = "<a href='http://maps.google.com/maps?q="+position.coords.latitude+","+position.coords.longitude+"+(Your+Location)&iwloc=A&z=17'>"+position.coords.latitude+","+position.coords.longitude+"</a>";
}

</script>
</head>

<body>

<a href=# onclick="getGPS()">Get GPS Data</a>

<div id=gpsText></div>

</body>
</html>

Comments: 9 Responses to “MacMost Now 332: iPhone GPS Location With JavaScript”

morris

14 years ago

Remember to, have you been able to PM me and tell me couple of more thinks about this,
I am really fan of your blog...gets solved asap.

david alexander

Your blog is really educational �
keep up the great work!!!!!!

james casey

Hi, I can�t understand how you can include your website in my rss readers.
Can you Help me, please ...)

Gary Rosenzweig

Not sure what you mean. But RSS is a very different topic than GPS and JavaScript. Perhaps ask your question in more detail at http://macmost.com/forum/

Jaco

13 years ago

i think he means he wants a rss feed of your site to add on his reader to get the latest updates.

great posts and info!! especially how to use javascript to connect to the gps to get iphone coordinates

Ray

Can you please post the longer code showing how to send the GPS location to Google Maps?

What do you mean? Different than the code posted under the video?

Rob Nelson

Came across this on Saturday and I thought all my Christmases had come at once. Implemented the link to Google Maps and it works a treat, however (there is always a however!). Via Safari on the iPhone all is well but using an App with a WebView to view the page it goes horribly wrong. Any suggestions?

I'd imagine it has to do with permissions. If you are creating an app, the app must ask for permission to get the location. I would consult the SDK documentation for the proper way to get the location in an app.

Comments Closed.

MacMost Now 332: iPhone GPS Location With JavaScript

Comments: 9 Responses to “MacMost Now 332: iPhone GPS Location With JavaScript”

Welcome to MacMost

Free Weekly Newsletter

MacMost Online Courses

Keyboard Shortcuts PDF

Connect with MacMost

MacMost Sections

Popular Tutorials

Information