function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student 

Please Help! Visualforce email template google maps appearing in merge test but not in sent email

Hey there,

I have an email template that is designed to send information in regards to a course.

I have found this way of inserting google maps into visualforce online. Basically, you insert address information into the record and the code uses this to search and then paste the code.

i tested the template and merge fields and the google maps came up and everything was perfect. However, when I try and email it to someone to test both my signature image and google maps does not appear. What could be the problem?

This is my code, thank you in advances for your tiem!!

<messaging:emailTemplate subject="EPE Course Confirmation" recipientType="Contact" relatedToType="EPE_Course__c">
<messaging:htmlEmailBody > 
<html>
<head>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() {

  var myOptions = {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
  }

  var map;
  var marker;

  var geocoder = new google.maps.Geocoder();
  var address = "{!relatedTo.Street__c}, " + "{!relatedTo.Suburb__c}, " + "{!relatedTo.Post_Code__c}, " + "{!relatedTo.Country__c}";

  var infowindow = new google.maps.InfoWindow({
    content: "<b>{!relatedTo.Name}</b><br>{!relatedTo.Street__c}<br>{!relatedTo.Suburb__c}, {!relatedTo.Post_Code__c}<br>{!relatedTo.Country__c}"
  });

  geocoder.geocode( { address: address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK && results.length) {
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

        //create map
        map = new google.maps.Map(document.getElementById("map"), myOptions);

        //center map
        map.setCenter(results[0].geometry.location);

        //create marker
        marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: "{!relatedTo.Name}"
        });

        //add listeners
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
        google.maps.event.addListener(infowindow, 'closeclick', function() {
          map.setCenter(marker.getPosition()); 
        });

      }

    } else {
      $('#map').css({'height' : '15px'});
      $('#map').html("Oops! {!relatedTo.Name}'s billing address could not be found, please make sure the address is correct.");
      resizeIframe();
    }
  });

  function resizeIframe() {
    var me = window.name;
    if (me) {
      var iframes = parent.document.getElementsByName(me);
      if (iframes && iframes.length == 1) {
        height = document.body.offsetHeight;
        iframes[0].style.height = height + "px";
      }
    }
  }

});
</script>

<style>
#map {
  font-family: Arial;
  font-size:12px;
  line-height:normal !important;
  height:250px;
  width:350px;
  background:transparent;
}
</style>

</head>



<body>



<p><div id="map"></div></p>



<p>Kind Regards,</p>


<p>The Destiny {!relatedTo.Office_Name__c} Team </p>

<img alt="" src="{!$Resource.Destiny_Logo}" />




</body>
        </html>
</messaging:htmlEmailBody>
</messaging:emailTemplate>


Best Answer chosen by Developer.mikie.Apex.Student
robdobbyrobdobby
My bad.  Google maps doesn't allow in an iframe, you need the static image in an img tag like:

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Berkeley,CA&zoom=14&size=400x400&sensor=false" ></img>

All Answers

robdobbyrobdobby
Unfortunately, Javascript generally won't work in HTML email so you'll need to find a different way to refer to Google maps:

http://kb.mailchimp.com/article/common-html-email-coding-mistakes/#java

Also, your footer image is missing because it needs to be in a publically visible location in Salesforce.  The image isn't included with the email, its referenced from the Salesforce server.  Put the image in a Document on your Saleforce org, then use the SF image server url like this:

https://c.<SF instance>.content.force.com/servlet/servlet.ImageServer?id=<document ID>&oid=<Salesforce.com Organization ID>

e.g. something like this:

<img src="https://c.na14.content.force.com/servlet/servlet.ImageServer?id=015i00000038AyJ&oid=00Di0000000KIYj">

The Salesforce.com Organization ID is from Setup->Company Profile->Company Information.
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student
Thank yuo so much for your help robdoby. 

Would you perhaps be able to point me in the write direction of how i might be able to get it working?
robdobbyrobdobby
Take a look at the Google static map API:

https://developers.google.com/maps/documentation/staticmaps/#URL_Parameters

Perhaps you could embed an iframe by replacing the map div with this:

<iframe src="http://maps.googleapis.com/maps/api/staticmap?center=Berkeley,CA&zoom=14&size=400x400&sensor=false" ></iframe>
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student
Hey there,

I attempted your solution. Upon testing the page however, a blank white square with "Address is correct" within it appeared rather than the map. Would could be the problem? Thank you for your time.
robdobbyrobdobby
My bad.  Google maps doesn't allow in an iframe, you need the static image in an img tag like:

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Berkeley,CA&zoom=14&size=400x400&sensor=false" ></img>
This was selected as the best answer
Developer.mikie.Apex.StudentDeveloper.mikie.Apex.Student
This worked in the end

<img src="https://maps.googleapis.com/maps/api/staticmap?{!relatedTo.Course_Address__c}&sensor=false" ></img>

Where the address goes in this field:{!relatedTo.Course_Address__c}