HTML and CSS Reference
In-Depth Information
Embedding Google Maps as Valid XHTML or HTML5
A popular way of defining the position of offices, restaurants, and so on, on web sites is embedding interactive Google
Maps objects.
The source code provided by Google Maps looks like Listing 13-9.
Listing 13-9.
A Google Maps Embedding Code Provided by Google
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Honolulu,+HI,+United+
States&sll=37.0625,-95.677068&sspn=50.557552,89.208984&ie=UTF8&hq=&hnear=Honolulu,
+Hawaii&ll=21.306944,-157.858333&spn=0.234454,0.479279&t=h&z=12&output=embed">
</iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&
geocode=&q=Honolulu,+HI,+United+States&sll=37.0625,-95.677068&sspn=50.557552,89.208984&
ie=UTF8&hq=&hnear=Honolulu,+Hawaii&ll=21.306944,-157.858333&spn=0.234454,0.479279&
t=h&z=12" style="color:#0000FF;text-align:left">View Larger Map</a></small>
However, this code is not standard-compliant. In HTML5, the
frameborder
,
scrolling
,
marginheight
, and
marginwidth
attributes should be removed (styling should be achieved through CSS). In XHTML, the embedding
code should be modified as follows:
•
Since the inline frame element (
iframe
) cannot be used in XHTML 1.0 Strict and XHTML 1.1,
it should be replaced by the
object
tag.
The
•
type
attribute should be defined with the value
text/html
; otherwise, the map will not
appear even if the code is valid.
•
The
src
attribute should be replaced by the
data
attribute.
•
The
frameborder
,
scrolling
,
marginheight
, and
marginwidth
attributes should be removed.
•
The
object
element should be enclosed by a
p
or
div
container element.
Styles should be defined by CSS to fit into page design (if the default appearance is not
•
acceptable).
The result should be in the form presented in Listing 13-10.
Listing 13-10.
A Standardized Version of the Embedding Code in Listing 13-9
<p>
<object type="text/html" width="425" height="350" data="http://maps.google.com/maps?f=
q&source=s_q&hl=en&geocode=&q=Honolulu,+HI,+United+States&
sll=37.0625,-95.677068&sspn=50.557552,89.208984&ie=UTF8&hq=&
hnear=Honolulu,+Hawaii&ll=21.306944,-157.858333&spn=0.234454,0.479279&
t=h&z=12&output=embed">
</object>
<a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&
q=Honolulu,+HI,+United+States&sll=37.0625,-95.677068&sspn=50.557552,
89.208984&ie=UTF8&hq=&hnear=Honolulu,+Hawaii&ll=21.306944,
-157.858333&spn=0.234454,0.479279&t=h&z=12">View Larger Map</a>
</p>
Search WWH ::
Custom Search