Thursday, October 17, 2013

How to “mash up” Google Maps Street View in your blog



eBay Bellevue Office map and street view mash-ups from Google maps

  # # #

How do you embed Google Maps and Google StreetView panes into your own web log?  It is simple, really.  First, you embed an iFrame into the blog entry. The embedded maps above are inside a very-simple  iFrame defined as:

<iframe style="border-left-width: 0px;   border-right-width: 0px;   border-top-color: #ffffff;   border-bottom-width: 0px;   border-bottom-color: #ffffff;   border-right-color: #ffffff;   border-top-width: 0px;   border-left-color: #ffffff"   height="900"   marginheight="0" 
</iframe>


 



Notice the src of the iFrame’s content is a DropBox URL.   That file contains the “mash-up” JavaSript for Google Maps.  The HTML file for that DropBox URL is:



image



Of course you can insert Bing maps in a similar fashion:





Map picture






And, I assume, the blog editing GUI tools probably have methods of inserting maps without resorting to typing the HTML and JavaScript text into a text editor.

No comments: