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
PHILLIP LACHMANNPHILLIP LACHMANN 

Google Maps on Mobile?

I have a VF page that displays a google map for the address of a contact. This all works perfectly on a desktop browser. 

I have this page enabled for mobile, but when I browse to this page on a mobile device I just get a blank form.

Is there something that salesforce 1 does not like in the javascript or with google maps in general?

Code is shown below.


<apex:page standardController="Lead_Custom__c">
<apex:pageBlock id="block1">
<apex:pageBlockSection id="section1" columns="1" collapsible="false" title="Map">
      
   
<head>
<!-- this guy first -->
<script type="text/javascript">__sfdcSessionId = '{!$Api.Session_Id}';</script>

<!-- this guy second -->
<script src="/soap/ajax/29.0/connection.js" type="text/javascript"></script>


<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">
function getParameterByName(name) {    
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);       
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

function myFunction() {
    <!--window.print();-->
    var content = document.getElementById('directions-panel');
    var win = window.open();
    win.document.write(content.innerHTML);
    win.print();
    win.close();
}

var newRecords = [];
var ownerId;
var sDist, sDet;

var leadId, officeAddr;
var records;

leadId = getParameterByName("Id");

result = sforce.connection.retrieve("OwnerId", "Lead_Custom__c", [leadId]);
if (result[0] == null) throw "retrieve failed";

ownerId = result[0].OwnerId;

result = sforce.connection.retrieve("District__c,Detach__c", "User", [ownerId]);
if (result[0] == null) throw "retrieve failed";

sDist = result[0].District__c;
sDet = result[0].Detach__c;

officeAddr = "";

if (sDist == "null" || sDist == null) {
  officeAddr = "";
} else {
  //Lookup the office address based on the district/detach values
  var myquery = "SELECT StreetAddress__c, CityStateZip__c FROM Office__c WHERE District__c = '" + sDist + "' and Detach__c = '" + sDet + "' limit 1";

  result = sforce.connection.query(myquery);
  records = result.getArray("records");

  if(records[0]) {
    officeAddr = records[0].StreetAddress__c + " " + records[0].CityStateZip__c;
  }
}


var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

$(document).ready(function() {
  $("#start").val(officeAddr);
 
  var myOptions = {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    mapTypeControl: true
  }
 
  var map;
  var marker;
 
 
 
  var geocoder = new google.maps.Geocoder();
  var address = "{!Lead_Custom__c.Mailing_Street__c}, " + "{!Lead_Custom__c.Mailing_City__c}, " + "{!Lead_Custom__c.Mailing_Zip_Postal_Code__c}";
 
  var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Lead_Custom__c.Name}</b>"
  });

  geocoder.geocode( { address: address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK && results.length) {
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
        directionsDisplay = new google.maps.DirectionsRenderer();
        //create map
        map = new google.maps.Map(document.getElementById("map"), myOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directions-panel'));
     
       
      
        //center map
        map.setCenter(results[0].geometry.location);
       
        //create marker
        marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: "{!Lead_Custom__c.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! {!Lead_Custom__c.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";
      }
    }
  }
 
 
 
});

function calcRoute() {  
        var end = "{!Lead_Custom__c.Mailing_Street__c}, " + "{!Lead_Custom__c.Mailing_City__c}, " + "{!Lead_Custom__c.Mailing_Zip_Postal_Code__c}";  
        var start = document.getElementById('start').value;  
        var request = {    
            origin: start,    
            destination: end,    
            travelMode: google.maps.TravelMode.DRIVING  
        };  
        directionsService.route(request, function(response, status) {    
            if (status == google.maps.DirectionsStatus.OK) {      
                directionsDisplay.setDirections(response);    
            }  
        });
    } 
   

</script>

<style>
#map {
  font-family: Arial;
  font-size:12px;
  line-height:normal !important;
  height:500px;
  background:transparent;
  margin-right: 400px;
}
#directions-panel {        
       height: 100%;        
       float: right;        
       width: 390px;        
       overflow: auto;      
    } 
</style>

</head>

<body>
<div id="control">
   <strong>Starting Location:</strong>
   <input size="40" id="start" type="textbox" value=""></input>
   <input type="button" value="Get Directions" onclick="calcRoute()"></input>
  
   <input type="button" value="Print Directions" onclick="myFunction()"></input>
</div>
<div id="map-all">
<div id="directions-panel"></div> 
<div id="map"></div>
</div>
</body>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>


ouz_alpouz_alp
Are you sure that whether the visualforce page is checked as "Available for Salesforce mobile apps"?
PHILLIP LACHMANNPHILLIP LACHMANN
Yes. "Available for Salesforce mobile apps" is checked.
Bala_BforceBala_Bforce
set doctype as html-5 and set standardstylesheets to false in <apex:page> component.