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

The post Embed Google Maps Without The Callout appeared first on Tildemark Blogs.