Up to Speed on HTML 5 and CSS 3
View more documents from M. Jackson Wilkinson.
Tag Archive for HTML
How to remove Google Maps Info Window
Fortunately I was able to easily understand that the tooltip is called by using a variable named iwloc which is used to specify where the infowindow A.K.A info bubble, info ballon or info tooltip.
You can read more about the iwloc variable and it’s properties at mapki wiki about Google Map Parameters on the Info Windows Section
Important Note:
Two days after writing this post I was unable to view the Info Window (info ballon) when the page is loaded. If you wish to know what the Info Window is, left click on top of any pinpoint and it will show.
Here is an example of what I mean:
You can imagine why clients wouldn’t want this info window showing up on a map at their website. But unfortunately removing this info window is not as simple as removing the iwloc var from the code google maps gives you to embed the map on your website.
Here is the code that shows the map above:
<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=google+headquarters&sll=37.42285,-122.080078&sspn=0.008043,0.01929&ie=UTF8&radius=0.53&filter=0&rq=1&ev=p&t=h&cid=5377921459564608739&ll=37.431251,-122.076902&spn=0.023855,0.036478&z=14&iwloc=A&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=google+headquarters&sll=37.42285,-122.080078&sspn=0.008043,0.01929&ie=UTF8&radius=0.53&filter=0&rq=1&ev=p&t=h&cid=5377921459564608739&ll=37.431251,-122.076902&spn=0.023855,0.036478&z=14&iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>
I highlight the iwloc variable but now if I remove it. Here is what I get:
Here is the code I used to show the map above:
<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=google+headquarters&sll=37.42285,-122.080078&sspn=0.008043,0.01929&ie=UTF8&radius=0.53&filter=0&rq=1&ev=p&t=h&cid=5377921459564608739&ll=37.431251,-122.076902&spn=0.023855,0.036478&z=14&&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=google+headquarters&sll=37.42285,-122.080078&sspn=0.008043,0.01929&ie=UTF8&radius=0.53&filter=0&rq=1&ev=p&t=h&cid=5377921459564608739&ll=37.431251,-122.076902&spn=0.023855,0.036478&z=14&" style="color:#0000FF;text-align:left">View Larger Map</a></small>
I removed the iwloc variable and I noticed this works on some maps, on others you have to endorse other strategies.
After reading the Google Map Paremeters information about the iwloc variable I started trying the different values you can apply and I found that using iwloc=near; does what I want: The map shows up with the pinpoint and no Info Window, if I click on the pinpoint the Info Windows shows up. Perfect!
Here is the code I used to create the map you see above:
<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=google+headquarters&sll=37.42285,-122.080078&sspn=0.008043,0.01929&ie=UTF8&radius=0.53&filter=0&rq=1&ev=p&t=h&cid=5377921459564608739&ll=37.431251,-122.076902&spn=0.023855,0.036478&z=14&iwloc=near&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=google+headquarters&sll=37.42285,-122.080078&sspn=0.008043,0.01929&ie=UTF8&radius=0.53&filter=0&rq=1&ev=p&t=h&cid=5377921459564608739&ll=37.431251,-122.076902&spn=0.023855,0.036478&z=14&iwloc=near" style="color:#0000FF;text-align:left">View Larger Map</a></small>
And voilá! Just don’t forget when applying a Map make sure on Google Maps you right click and set the map to center on that spot by clicking on Center Map Here:
The Final Result:
