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
Reshmi SmijuReshmi Smiju 

Pls Help. Issue with --Google Map Integration.Page coming blank.

HI.
I need a small help with my VF page . Its a page that is integrating with Google map. Basically, its a post by Dan Stone on success.salesform community.

But, i am getting a blank page. I have tried with the https &http as well.

<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">

I am getting error == > Oops, Address could not be found. What could be the issue. Much appreciated a positive response, as its bit urgent.
 
Full Code is as follows

<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}, " + "{!Account.Project_City__c}, " + "{!Account.Project_Zipcode__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>
 
Sunil MadanaSunil Madana
Hi Reshmi,
If you are opening the VF page using "preview" button it will not work because it is linked to "StandardController" Account. 
<apex:page standardController="Account">
And for https:, you may remove "https" (or) "http", <script> tag can switch between either depending on the server that you open the URL from.
salesforce will open in "https:" by default.

Below is the code that works on Account Detail Page. 
<apex:page standardController="Account">
<head>
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="//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 = "{!Account.Project_Street_Address__c}, " + "{!Account.Project_City__c}, " + "{!Account.Project_Zipcode__c}";

  var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Account.Name}</b><br>{!Account.Project_Street_Address__c}, {!Account.Project_City__c}<br>{!Account.Project_Zipcode__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: "{!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 billing address could not be found, please make sure the address is correct.");
    }
  });

});
</script>

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

</head>

<body>
<div id="map"></div> 
</body> 
</apex:page>
Appreciate your valuable feedback, if the above code works.

Thanks, Sunil.