CODEWITHSUNDEEP
google-maps-api-3kmlbroken-image
Matt Helmick
Matt Helmick

Reputation: 63

Hide broken image icon/links in Google Maps Spreadsheet Mapper (KML) location balloon

I am stumped with this unusual problem: I'm using the Google Maps v3 API to display Spreadsheet Mapper KML data and we have some custom images referenced in the KML that appear in the location/places balloons. Google doesn't seem to allow Javascript references in its balloon layer (ironic, right?), so hiding the broken image links based on the image not being found or the src not being there doesn't seem possible.

Non-techie marketing folks are going to be populating the images gradually by just FTPing the balloon images to a folder, but this is going to happen gradually and need to show up right away independent of the KML. So the KML just has an account number reference that corresponds to the image name that needs to be created.

For those images that haven't been uploaded yet we don't want to have broken image icons appearing, but without Javascript access or the object tag (not available either) it seems like it is nearly impossible. Firefox has a setting to turn broken images off, but it isn't an option (IE seems to have the best "pinch and zoom" support and this is being used for a large touch screen monitor.

The balloon HTML appears as follows in the KML file:

<table width="{static_Balloon_Width}"><tr> <td colspan="2"> <span style="font-size:{static_Title_Font_Size};"><b>{unique_Title}</b></span><br> <br> <span style="font-size:{static_Subtitle_Font_Size};"><b>{unique_Subtitle}</b> </span><br> <img src="images/location/{unique_Paragraph1_Text}.jpg" alt=" "><br> <br> {unique_Paragraph2_Text}<br> <a href="{unique_Link_URL}">{unique_Link_Text}</a> <hr> </td> </tr> <tr> <td align="left"><a href="{static_Footer_Link_URL}">{static_Footer_Link_Text}</a> </td> <td align="right"><span style="color:{static_Footer_Text_Color};"> {static_Footer_Text}</span></td> </tr></table>

Let me know if you have any ideas for avoiding the display of broken image links! Thanks.

Upvotes: 0

Views: 301

Answers (1)

geocodezip
geocodezip

Reputation: 161334

You can process the content of the infowindow in the page that loads the KmlLayer.

  1. set suppressInfoWindows:true in the constructor
  2. create a click listener which accesses the infoWindowHtml property of the click event, processes it to remove the image (or handle it however you want), then opens the infowindow.

Note: I have seen code that doesn't suppress infoWindows, adds a click listener that modifies the infoWindowHtml content and seemed to work, but I don't know that I trust it.

Here is an example using FusionTablesLayer, the click event is slightly different, but the principle is the same.

Upvotes: 1

Related Questions