HTML and CSS Reference
In-Depth Information
In the callback function, set the
URL
of the image to the appropriate
Google Maps
API
call:
function init() { if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position){
writeLoc(position.coords); });}
function writeLoc(coords) {
var l = 'http://maps.google.com/maps/api/staticmap?center=' +
coords.latitude + ',' + coords.longitude +
'&zoom=12&size=440x440&maptype=roadmap' +
'&markers=color:red|color:red|label:a|' +
coords.latitude + ',' + coords.longitude +
'&sensor=false';
document.getElementById('location').src = l;
document.getElementById('debug').innerHTML = l;
}
When the image
URL
is set, the browser will load the appropriate map
from the Google Maps
API
.
Now you know where you are. What about telling someone about it?
Communication is central to the web, but web pages have been
constrained in what they're allowed to communicate with and how
they're allowed to do it. HTML5 offers new communication APIs: for
communicating in a safe way in browser
—
based apps, cross
—
document
messaging; and for communicating efficiently with a server in real time,
the WebSocket API. The next section looks at these APIs in more detail.
Communication in HTML5
The communication model in
HTML4
is pretty much the same as it was
in the first version of
HTML
. The user requests information from a
server, and then the server delivers it. Although innovations like the
XMLHTTPRequest
object allow us to do some cunning things, the underly-
ing model is the same. In addition, content loaded from different serv-
ers is usually shielded from other servers—a policy known as
same
origin restriction
.
This section necessarily involves some interaction with a
server; discussing how to get everything working on all
possible architectures will take too many pages. If you're
not comfortable with the server side of things, skip ahead.