Salesforce Developer Community

PHILLIP LACHMANN
NEWBIE
0 Points
Member since 2014

Chatter

Feed
0

Best Answers
0

Likes Received
0

Likes Given
1

Questions
1

Replies

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>

<script type="text/javascript">__sfdcSessionId = '{!$Api.Session_Id}';</script>


<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() {
    
    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>

PHILLIP LACHMANN
May 12, 2014
Like
0

3 replies

Google Maps on Mobile?

PHILLIP LACHMANN
May 12, 2014
Like
0