HTML and CSS Reference
Note that the position parameter is like a variable that will store the latitude and longitude
values. It is not a property of the geolocation object — cords.latitude and cords.
longitude are the properties. (h e name position could be any name we wanted —
Rumpelstiltskin would've worked, but position is more descriptive.)
Once the values are assigned to the parameter object, they become part of the Location-
Master object using the this keyword. h e property names — latNow and longNow — store
the values like a variable. h e only dif erence is that they're part of an object.
GETTING THE MAP
Getting the map, then, is simply a matter of inserting those values into the map request. So, to
i nish up the method, the program uses the following line:
document.getElementById(“mapHolder”).src = “http://maps.google.com/
maps?hl=en&ie=UTF8&ll=“ + this.latNow + “,” + this.longNow + “&spn=0.054166,0.11037
You i nd a new method in the HTML5 DOM core: getElementById . In this case, the ID is
that of an iFrame element. h en the map is the source object — just like an image is loaded
through the source identii cation:
< img src = “myImage.jpg” >
h e only dif erence is that the place where the map is loaded is specii ed by the iFrame ID
instead of by the page by default.
Placing the map on the Web page
Any other loading at er the page has loaded can't be slipped in just anywhere in the page. h e
<iframe> can be a target apart from the main document. Using the <iframe> without any
of its attributes specii ed produces a relatively small viewing window. However, the idea is to
Putting it all together in a simple page
I've tested all the major browsers on both Windows 7 and Macintosh OS X, and the following
( MiniGeoLoc.html in this chapter's folder at www.wiley.com/go/smashinghtml5 )
represents a simple starting point for a page that displays a map near the originating user.