function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
shobana shobanashobana shobana 

​How to integrate google maps using visualForce on Account?


I'm trying to integrate a google maps using visualforce but without success,when i run the page it appears all blank,someone could help me with that?
 
<apex:page standardController="Account">
<apex:pageBlock >
<head>
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
 
$(document).ready(function() {
  
  var myOptions = {
    zoom: 20,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    mapTypeControl: true
  }
  
  var map;
  var marker;
  
  var geocoder = new google.maps.Geocoder();
  var address = "{!Account.Project_Street_Address__c}";
  var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Account.Name}</b>"
  });
 
  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: "{!Account.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! {!Account.Name}'s 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:500px;
  background:transparent;
}
</style>
 
</head>
 
<body>
<div id="map"></div> 
</body> 
</apex:pageBlock>
</apex:page>
Thank you in advance...
 
Best Answer chosen by shobana shobana
Himanshu ParasharHimanshu Parashar
Hi Shobana,

You are facing this issue because SFDC doesn't allow to load script from http. it only allow secure resource. Please replace line 5,6 with following and your code will work.
 
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
06
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

 I have added https only instead of http.

Thanks,
Himanshu
Salesforce Certified Developer | Administrator | Service Cloud Consultant

P.S. If my answer helps you to solve your problem please mark it as best answer. It will help other to find best answer.

All Answers

Himanshu ParasharHimanshu Parashar
Hi Shobana,

You are facing this issue because SFDC doesn't allow to load script from http. it only allow secure resource. Please replace line 5,6 with following and your code will work.
 
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
06
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

 I have added https only instead of http.

Thanks,
Himanshu
Salesforce Certified Developer | Administrator | Service Cloud Consultant

P.S. If my answer helps you to solve your problem please mark it as best answer. It will help other to find best answer.
This was selected as the best answer
shobana shobanashobana shobana
Hi Himanshu Parashar

Thank you for your reply,But it showing error  "Oops! 's billing address could not be found, please make sure the address is correct." when am adding https.
Himanshu ParasharHimanshu Parashar
Hi Shobana,

I good news is Google map is working and he bad news is Address is not valid. Please check value of your Project_Street_Address__c field for record. Put following address to Project_Street_Address__c

9 Tagore Lane Singapore, Singapore 787472

I tested at my end and it worked perfectly.

Thanks,
Himanshu
shobana shobanashobana shobana

Hi Himanshu Parashar

Thank you..... Its working