I want to be able to see nearby accounts on an interactive google map within salesforce. The problem is that the google map is not showing up when you invoke the field. I do have the jquery files saved in my static resources section as well. Can anyone help me figure out why the map won't show up?

I have modified my code from this website: http://www.belmar.ca/blog/?p=42


public with sharing class NearbyAccountsController {
   public Account account { get; set; }

    // constructor
    public NearbyAccountsController() {
        account = [select Id, Name, Geolocation__Latitude__s, Geolocation__Longitude__s
                  from Account where id = :ApexPages.currentPage().getParameters().get('id')];

    public static List<Account> getNearbyAccounts(Decimal latitude, Decimal longitude) {
        String q = 'select Id, Name, Geolocation__Latitude__s, Geolocation__Longitude__s from Account ';
        q += 'where DISTANCE(Geolocation__c, GEOLOCATION( ';
        q += String.valueOf(latitude) + ', ' + String.valueOf(longitude);
        q += ' ), \'km\') < 10';

        return Database.query(q);      

Visualforce page:

<apex:page showHeader="false"  standardStylesheets="false" cache="false" doctype="html-5.0" controller="NearbyAccountsController">

    <title>Nearby Accounts</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/> 

    <!-- jQuery + jQuery Mobile files -->
    <apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery-1.9.1.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery.mobile-1.4.0.min.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jquery, 'jquery.mobile-1.4.0.min.css')}" />

 <!-- Google Maps -->
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>

        body, html {
            height: 100%;   
            width: 100%;
        #nearbyAccountsPage, .ui-content, #map_canvas { 
            width: 100%; 
            height: 100%; 
            padding: 0; 

        var map;
        var lat = {!account.Geolocation__Latitude__s};
        var lng = {!account.Geolocation__Longitude__s};
        var accountName = "{!account.Name}";

        $('#nearbyAccountsPage').live('pageshow', function() {

        function initGmap() {
            var latlng = new google.maps.LatLng(lat, lng);

            var mapOptions = {
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                zoom: 13,

                // The following options are added to optimize for mobile screens. 
                mapTypeControl: false,
                streetViewControl: false, 
                scaleControl: false,
                rotateControl: false,
                panControl: false,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.SMALL,
                    position: google.maps.ControlPosition.LEFT_TOP

            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

            createMarkerAndInfoWindow(accountName, latlng);

        function createMarkerAndInfoWindow(accountName, latlng) {
            var marker = new google.maps.Marker({
                position: latlng,
                title: accountName, 
                map: map

            var infoWindow = new google.maps.InfoWindow({
                content: '<b>' + accountName + '</b>'

            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.open(map, marker);

        function getNearbyAccounts() {
            NearbyAccountsController.getNearbyAccounts(lat, lng, function (result, event) {
                if (event.status) {
                    for (i = 0; i < result.length; i++) {
                        var acctName = result[i].Name;
                        var acctLatlng = new google.maps.LatLng(result[i].Geolocation__Latitude__s, result[i].Geolocation__Longitude__s);

                        createMarkerAndInfoWindow(acctName, acctLatlng);
    <div data-role="page" id="nearbyAccountsPage">
        <div data-role="header" data-position="fixed">
            <a href="#" data-role="button" class="ui-btn-right" onclick="getNearbyAccounts();">Show Nearby</a>
        <div data-role="content">
            <div id="map_canvas"></div> 
  • Are you seeing any errors in the JavaScript console?
    – metadaddy
    Jan 13 '14 at 1:26
  • Yes. It states: Uncaught TypeError: Object [object Object] has no method 'live' NearbyAccounts?id=001U0000008cEnE&core.apexpages.devmode.url=1:37 event.returnValue is deprecated. Please use the standard event.preventDefault() instead. Jan 13 '14 at 18:46
  • I tried replacing .live with .on and .bind but none of those made the map appear. It got rid of the error stated above though Jan 13 '14 at 18:54
  • You need to rewrite the call, rather than just replace the function name - see my answer, below.
    – metadaddy
    Jan 14 '14 at 6:48

.live() was removed in jQuery 1.9, and you need to rewrite the call (rather than just change live to on). So, instead of

$('#nearbyAccountsPage').live('pageshow', function() {

you need

$(document).on('pageshow', '#nearbyAccountsPage', function() {

With this change, the page works for me:

enter image description here

See the jQuery docs for .live() for more info.

  • Is there a way where I can put the address that pops up in the infowindow into a hyperlink that would give the user directions from one point to another? Jan 15 '14 at 18:11
  • Yes - see the Google Maps API FAQ.
    – metadaddy
    Jan 15 '14 at 22:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.