XHTML strict compliant Google Map embedding - with JQuery!
Submitted by rmarrs on Fri, 05/15/2009 - 01:08
It seems that every time I go to embed a Google map into a site I'm working on, I forget about Google's IFRAME failure. In this particular case, I wasn't up for running through the API, and I just wanted to embed the map on the page, and have it validate. First, let me say you need to be using JQuery (if you're not, you should be). Second, a document.write is not the solution to your issue, if you're not putting the Javascript code in a separate file. As this code is only run on one page, I'm not going to bother. First, you're going to create your div wherer you'd like your map:
- <div id="#map"></div>
Next, you're going to wrap your JQuery calls in script tags, and escape the CDATA tags with:
- <script type="text/javascript">
- //<![CDATA[
- $(document).ready(function() { $("#map").append('<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Google,+Mountain+View,+CA&amp;sll=39.774769,-72.949219&amp;sspn=56.795811,135.351563&amp;ie=UTF8&amp;ll=37.432477,-122.079906&amp;spn=0.029142,0.06609&amp;z=14&amp;iwloc=A&amp;cid=11972054812773967638&amp;output=embed"></iframe>
- <br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Google,+Mountain+View,+CA&amp;sll=39.774769,-72.949219&amp;sspn=56.795811,135.351563&amp;ie=UTF8&amp;ll=37.432477,-122.079906&amp;spn=0.029142,0.06609&amp;z=14&amp;iwloc=A&amp;cid=11972054812773967638" style="color:#0000FF;text-align:left">View Larger Map</a></small>'); });
- //]]>
- </script>
This will place the map inside your div, AND validate!