Sunday 27 February 2011

Google Maps integration and print iframe

On Internet a few google map solutions can be found by other bloggers, I found the most praticle and simpler to implement here: http://a33ik.blogspot.com/2010/06/intergration-google-maps-v3-into.html

However the functionality works great, if you click print on CRM you get page not found, the reason being is because the code behind the google map integration is based on fetching data from the contact form and contruct that url onto the specfied TAB on the code, when the preview is loaded this url will not be constructed because is not being called on the OnLoad Event.

So there is a easy way to make the same effect on the print page, although this method is unsupported.

Insert the below code on the customprint file, you will find this file on your CRM directory, this solution can work with any other iFrame you may load in a tab.

<script type="text/javascript">
//does an initial check if the ID for the google map is set. (assuming you've used GoogleMap for the iframe)
if (document.getElementById('IFRAME_GoogleMap')) {

var url = "";
if (document.getElementById('address1_country_d') != null)
  url = document.getElementById('address1_country_d').innerHTML;

if (document.getElementById('address1_city_d') != null)
  url += (url == "" ? "" : ", ") + document.getElementById('address1_city_d').innerHTML;

if (document.getElementById('address1_postalcode_d') != null)
  url += (url == "" ? "" : ", ") + document.getElementById('address1_postalcode_d').innerHTML;

if (document.getElementById('address1_line1_d') != null)
  url += (url == "" ? "" : ", ") + document.getElementById('address1_line1_d').innerHTML;

if (document.getElementById('address1_line2_d') != null)
  url += (url == "" ? "" : ", ") + document.getElementById('address1_line2_d').innerHTML;

if (document.getElementById('address1_line3_d') != null)
  url += (url == "" ? "" : ", ") + document.getElementById('address1_line3_d').innerHTML;    
if (url != "")
{

  document.getElementById('IFRAME_GoogleMap').src= "/ISV/gmap/GoogleMap.html?address=" + url;
  document.getElementById('IFRAME_GoogleMap').style.height = "400px";
  document.getElementById('IFRAME_GoogleMap').style.width = "900px";

} else {
// If no data to pass to url, defaults to text only "No Results"
document.getElementById('IFRAME_GoogleMap_d').innerHTML= "No results";
}

}
</script>

The variables with _d are the variables used on the Print page, so what we doing is capturing this variables and again contructing the url to then change the existing iFrame source on the page and point it to the exact location.

Please feel free to ask questions or leave feedback.
Nuno

Friday 4 February 2011

Welcome to my Blog

Hi,

This is my first Post, I hope I can give you lots of interesting material that can make everyone's life just a bit easier, and interesting new stuff worth to read about.

Thank you
Nuno R Costa