1

I have a Visualforce page that displays Account addresses. I would like to create a link to open the native iOS Maps app. I've tried using the following and it doesn't appear to work:

https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html#//apple_ref/doc/uid/TP40007899-CH5-SW1

<a href="http://maps.apple.com/?q=cupertino">Cupertino</a>

The link in my Visualforce page does nothing.

UPDATE: I had poorly encoded data in the url string. So now the link does open, however, it redirects to a google map. Is there a way to launch the iOS app or at least prompt the user to allow it?

  • Can you show the link you're actually using? – Matt Lacey Jan 15 '15 at 23:45
  • I'm using the one in the example - <a href="http://maps.apple.com/?q=cupertino">Cupertino</a> – fehays Jan 16 '15 at 1:01
1

I believe the best way would be to use javascript. Then o'click determine how to proceed. Something like this will be your core javascript function. Note using the maps:// will open in iOS, then any other device would open on google maps. Gives you the most flexibility and a fallback to Google Maps.

if( (navigator.platform.indexOf("iPhone") != -1) 
    || (navigator.platform.indexOf("iPod") != -1)
    || (navigator.platform.indexOf("iPad") != -1))
     window.open("maps://maps.google.com/maps?daddr=lat,long&amp;ll=");
else
     window.open("http://maps.google.com/maps?daddr=lat,long&amp;ll=");
| improve this answer | |
0

maybe, someone has an equal case. I have a visual force page, which is placed into a service in salesforce1 app in field service lightning where the user can click on the map to get guided to the address. I have adopted the javascript code here to visual force page this way:

if( navigator.platform.indexOf("iPhone") != -1 
|| navigator.platform.indexOf("iPod") != -1
|| navigator.platform.indexOf("iPad") != -1){
    fullscreen = true;

  var navigatorWrap = document.createElement("div");
  navigatorWrap.style.position = "relative";
  navigatorWrap.style.top = "-33px";
  navigatorWrap.className = "pull-right";

  var button = document.createElement('a');
  button.className = "btn btn-sm btn-warning";
  button.innerHTML = "Navigate with Maps";
  button.href = "maps://maps.google.com/maps?daddr="+serviceLat +","+ serviceLng +"&directionsmode=driving"
  navigatorWrap.appendChild(button);
  document.getElementById("wrap").appendChild(navigatorWrap);
 }
else {
fullscreen = true;

  var navigatorWrap = document.createElement("div");
  navigatorWrap.style.position = "relative";
  navigatorWrap.style.top = "-33px";
  navigatorWrap.className = "pull-right";

  var button = document.createElement('a');
  button.className = "btn btn-sm btn-warning";
  button.innerHTML = "Navigate with Maps";
  button.href = "https://maps.google.com/maps?daddr="+serviceLat +","+ serviceLng +"&directionsmode=driving"
  navigatorWrap.appendChild(button);
  document.getElementById("wrap").appendChild(navigatorWrap);

}

of course, there is a bit more in this page then that, but this might help for any of need for that.

| improve this answer | |

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.