0

I have created visual force pages for Google map using auto complete functionality. It's working fine in visual force page only but I need to place the account object in billing and shipping address. How can I do this please can any one tell me the what should I do. PFA

enter image description here

VF Page:



// This example displays an address form, using the autocomplete feature // of the Google Places API to help users fill in the information.

    var placeSearch, autocomplete;
    var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
    };

    function initialize() {
        // Create the autocomplete object, restricting the search
        // to geographical location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {HTMLInputElement} */
            (document.getElementById('{!$Component.searchform.searchblock.searchblocksection.addressfield}')), {
                types: ['geocode']
            });
        // When the user selects an address from the dropdown,
        // populate the address fields in the form.
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            fillInAddress();
        });
    }

    // [START region_fillform]
    function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
            //document.getElementById(component).value = '';
            //document.getElementById(component).disabled = false;
        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
            var addressType = place.address_components[i].types[0];
            if (componentForm[addressType]) {
                var val = place.address_components[i][componentForm[addressType]];
                var elem_id = '{!$Component.searchform.searchblock.addressblocksection.}'+":"+addressType;
                document.getElementById(elem_id).value = val;
            }
        }
    }
    // [END region_fillform]

    // [START region_geolocation]
    // Bias the autocomplete object to the user's geographical location,
    // as supplied by the browser's 'navigator.geolocation' object.
    function geolocate() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var geolocation = new google.maps.LatLng(
                    position.coords.latitude, position.coords.longitude);
                var circle = new google.maps.Circle({
                    center: geolocation,
                    radius: position.coords.accuracy
                });
                autocomplete.setBounds(circle.getBounds());
            });
        }
    }
    // [END region_geolocation]
</script>
<script type="text/javascript">
    window.onload=function(){ 
        initialize();
    };
</script>

Improve this question

2 Answers 2

Reset to default
2

You can check it out the spring'15 releases notes,

Standard Address Fields Show Google Maps

Use Visualforce Map Components to Show Location Data More Clearly

Improve this answer
1
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.
    – Saroj Bera
    Commented Aug 7, 2015 at 7:59
0

You can use this code to populate Account's billing address in Google Maps, within Account layout. Here I've created a VF pages, incorporated Google relevant JS Files(maps and Jquery).

This VF page is then used within Detail page of Account to show Google Map.

<apex:page standardController="Account">

<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 = "{!Account.BillingStreet}, " + "{!Account.BillingCity}, " + "{!Account.BillingPostalCode}, " + "{!Account.BillingCountry}";

  var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Account.Name}</b><br>{!Account.BillingStreet}<br>{!Account.BillingCity}, {!Account.BillingPostalCode}<br>{!Account.BillingCountry}"
  });

  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.");
      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;
  background:transparent;
}
</style>

</head>

<body>
<div id="map"></div> 
</body> 
</apex:page>

Revert if you've further questions on this.

Improve this answer
6
  • I test your code it's getting oops error like this:Oops! 's billing address could not be found, please make sure the address is correct. Do I need to change anything..
    – Nikitha
    Commented Aug 7, 2015 at 4:43
  • This is working perfectly fine for me. Is address valid in your account. Also have you put values in all fields like Billing street, Billing City, Billing state and Country and Pincode so that google map API is able to locate it ?
    – curious_techy
    Commented Aug 7, 2015 at 10:06
  • which browser did you use. I am getting oops error like this:Oops! 's billing address could not be found, please make sure the address is correct.which
    – Nikitha
    Commented Aug 7, 2015 at 11:22
  • @ curious_techy I gave valid address in my account getting same error...
    – Nikitha
    Commented Aug 7, 2015 at 11:45
  • Just wondering ..how did you test the functionality? I get this error when I just use above code to create a new VF page and test without supplying Account ID. Did you use it inside page layout of Account or if used separately, did you supply, Id parameter with Account Id (i.e. something like Id=0019000000XXXX)?
    – curious_techy
    Commented Aug 8, 2015 at 4:39

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .