Embed Google Maps Without The Callout

I like how i can embed google maps into my sites but the callout keeps on obstructing other portions of the map. This is not very good to look at especially if the map size is too small. Here’s an example of a map with the callout blocking the other portions of the map.


View Larger Map

Here is the embed code of the map above:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?source=s_q&amp;hl=en&amp;geocode=&amp;q=CazimiWeb,+Diamond+Street,+Sts.,,&amp;aq=0&amp;oq=cazi&amp;sll=8.474468,124.683087&amp;sspn=0.003709,0.006539&amp;t=h&amp;ie=UTF8&amp;hq=CazimiWeb,+Diamond+Street,+Sts.,,&amp;hnear=Cagayan+de+Oro,+Misamis+Oriental,+Northern+Mindanao,+Philippines&amp;ll=8.474813,124.682894&amp;spn=0.003714,0.00456&amp;z=17&amp;iwloc=A&amp;output=embed">
</iframe>
<br />
<small>
<a href="https://maps.google.com/maps?source=embed&amp;hl=en&amp;geocode=&amp;q=CazimiWeb,+Diamond+Street,+Sts.,,&amp;aq=0&amp;oq=cazi&amp;sll=8.474468,124.683087&amp;sspn=0.003709,0.006539&amp;t=h&amp;ie=UTF8&amp;hq=CazimiWeb,+Diamond+Street,+Sts.,,&amp;hnear=Cagayan+de+Oro,+Misamis+Oriental,+Northern+Mindanao,+Philippines&amp;ll=8.474813,124.682894&amp;spn=0.003714,0.00456&amp;z=17&amp;iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a>
</small>

In order to remove the callout we need to modify a portion of the embed code specifically the ones on line 1 above at the href attribute in the iframe tag. Take a look at the GET Query string containing iwloc=A. We need to change it to something else not listed into the map. Since our pin is marked A, we need to change it something that will never be shown into the map, a number perhaps or a string. Like everybody else, I would change it to the string false. So it kind of makes sense, false meaning do not show the callout, although it still won’t show with true assigned but that’s not the point.

The new code will now become iwloc=false. Modifying our code we get the new embed code as:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?source=s_q&amp;hl=en&amp;geocode=&amp;q=CazimiWeb,+Diamond+Street,+Sts.,,&amp;aq=0&amp;oq=cazi&amp;sll=8.474468,124.683087&amp;sspn=0.003709,0.006539&amp;t=h&amp;ie=UTF8&amp;hq=CazimiWeb,+Diamond+Street,+Sts.,,&amp;hnear=Cagayan+de+Oro,+Misamis+Oriental,+Northern+Mindanao,+Philippines&amp;ll=8.474813,124.682894&amp;spn=0.003714,0.00456&amp;z=17&amp;iwloc=false&amp;output=embed">
</iframe>
<br />
<small>
<a href="https://maps.google.com/maps?source=embed&amp;hl=en&amp;geocode=&amp;q=CazimiWeb,+Diamond+Street,+Sts.,,&amp;aq=0&amp;oq=cazi&amp;sll=8.474468,124.683087&amp;sspn=0.003709,0.006539&amp;t=h&amp;ie=UTF8&amp;hq=CazimiWeb,+Diamond+Street,+Sts.,,&amp;hnear=Cagayan+de+Oro,+Misamis+Oriental,+Northern+Mindanao,+Philippines&amp;ll=8.474813,124.682894&amp;spn=0.003714,0.00456&amp;z=17&amp;iwloc=false" style="color:#0000FF;text-align:left">View Larger Map</a>
</small>

And the new map to be:



View Larger Map

Written by tildemark

Alfredo Sanchez, Jr is an internet technologist who spent so little time away from his computer. This little time is usually spent on teaching college students at a nearby university. He's been writing technology topics since 2005 and if combined might be able to make a book out of it.

Comments


Here's your chance to leave a comment!