HTML and CSS Reference
In-Depth Information
LocationMaster=new Object();
LocationMaster.lookUpPosition=function(position)
{
this.latNow=position.coords.latitude;
this.longNow=position.coords.longitude;
...
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
h e only thing that the HTML5 page working with JavaScript does is to get the coordinates.
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
8&z=13&output=embed”;
307
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
see how few tags and how little JavaScript code I can use to get the map displayed on the page.
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.
