+ Start a Discussion
dikudiku 

To intregrate google map

I have requirement to intregrate google map in visualforce page.i will fetch the address__c field which i need to show in google map from my custom object through controller. As I am new to salesforce, please help with code to implement it in my visualforce page.
udayar_jayamudayar_jayam

Hi diku,
Replace the account field to your address__c field.

<apex:page standardController="Account" >

<apex:pageBlock >
<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: 20,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    mapTypeControl: true
  }

  var map;
  var marker;
 
  var geocoder = new google.maps.Geocoder();
var address =  "{!Account.BillingStreet}, {!Account.BillingPostalCode} {!Account.BillingCity}, {!Account.BillingState},{!Account.BillingCountry}"; 
  var infowindow = new google.maps.InfoWindow({
   
  content: "<b>{!Account.BillingStreet} {!Account.BillingPostalCode} {!Account.BillingCity}, {!Account.BillingState},{!Account.BillingCountry}</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());
        });
        google.map.setOptions({streetViewControl: false});
       
      }
     
    } else  {
      $('#map').css({'height' : '50px'});
      $('#map').html("Oops! 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>