When embedding a google map, the info window is not typically displayed centered and often gets cut off of the google map’s iframe window. This can be frustrating and displeasing to the eye. A simple fix can be to hide the google map info window from the initial page load. The click event still remains, and when clicked, the map centers on the info window and map pin/marker.
To change how the info window is displayed, you must replace a piece of the embed code provided by Google Maps:
Find: iwloc=addr
or iwloc=A
Replace with: iwloc=near
*if iwloc=addr
does not exist, add &iwloc=near
to the end of the iFrame’s src="...[insert here]"
and voilĂ , there you have it!
Map with Info Bubble
1 |
<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=New+York+City,+NY&aq=0&oq=new+york+city+&sll=40.714353,-74.005973&sspn=1.089831,1.170044&ie=UTF8&hq=&hnear=New+York&ll=40.714353,-74.005973&spn=1.089831,1.170044&t=m&z=10&iwloc=A&output=embed"></iframe> |
Map with Hidden Info Bubble
1 |
<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=New+York+City,+NY&aq=0&oq=new+york+city+&sll=40.714353,-74.005973&sspn=1.089831,1.170044&ie=UTF8&hq=&hnear=New+York&ll=40.714353,-74.005973&spn=1.089831,1.170044&t=m&z=10&iwloc=near&output=embed"></iframe> |