Open Google Maps or Apple maps depending on device (with Kirbytag)

Hi there!

For my volunteer project I thought very much about making small digital services for users. One thing is to give customers and visitors something like a one-click-routing solution - depending on their device.

Idea

When the user clicks on the “Find routes” button, it opens Google Maps for Android and PC devices - or Apple maps for Apple devices.

What we need

It’s simple: we just need a function that detects Apple devices. If it’s not an Apple device we will just open Google Maps
Then: Something like a neat Kirbytag will be great for this.

Let’s do it!

1. Apple Device detection

Every single browser is giving you a massive set of data that you can simply use. You’re getting the Device name, the OS and the used browser for example - and that’s what we’re going to use.

We will need $_SERVER['HTTP_USER_AGENT'] to get the data we simply want to use.

To check if a user uses a device we want to detect, we’re using strpos() and a search term to check if the user agent equals what we’re searching for. If the search term isn’t in the string it will return false - so that’s perfect what we’re want to do.

So I’ve made a new kirby plugin called detectDevice.php which contains the following code:

<?php

function isApple()
{
  // All Apple mobile devices
  $iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
  $ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
  $ipad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");

  // All Apple-specific browsers
  $safari = strpos($_SERVER['HTTP_USER_AGENT'],"Safari");

  // All Appple os
  $mac = strpos($_SERVER['HTTP_USER_AGENT'],"Macintosh");

  if($iphone || $ipod != false || $ipad || $safari || $mac)
  {
    return true;
  }

  return false;
}

2. The Kirbytag

My Kirbytag was very basic. It simply had this structure: (calcroute: [Button Value]). I simply use the isApple() function in detectDevice.php to detect Apple devices. Based on the return value of the function, the button will link to Apple Maps or Google Maps:

For Apple Maps: http://maps.apple.com/?daddr=[INSERT+YOUR+LOCATION+NAME+HERE]
For Google Maps: http://maps.google.com/maps?&daddr=[INSERT+YOUR+LOCATION+NAME+HERE]

Note: The blank spaces between the location name have to replaced with the + sign

And this is my simple code in the calcroute.php:

<?php 

kirbytext::$tags['calcroute'] = array(
  'html' => function($tag) {

    $location = '[INSERT+YOUR+LOCATION+NAME+HERE]';
    $buttonValue = $tag->attr('calcroute');

    if (isApple()) {
      $calcRouteLink = '<a href="http://maps.apple.com/?daddr='.$location.'">'.$buttonValue.'</a>';
    }
    else {
      $calcRouteLink = '<a target="_blank" href="http://maps.google.com/maps?&daddr='.$location.'">'.$buttonValue.'</a>';
    }
    return $calcRouteLink;
  }
);

As you see there’s a little difference between both buttons: the Google Maps link has also a target attribute that opens a new tab (or page). The Apple link always opens the Apple Maps App itself and doesn’t opens a different site - so it doesn’t need this attribute (that would simply opens a new blank tab).

Now it’s your turn :smile:

My Kirbytag code is very rudimentary. If you want you can add everything to it: another optional value like the location name that will be used for the URLs or save and use the location name in the site blueprint or whatever you want. Feel free to customize the code and share your suggestions and thoughts with us!

That’s an awesome idea! Two comments:

  • UA sniffing is OK and required for this use-case (it’s about devices), but in general you shouldn’t do that.
  • Safari can also be Safari for Windows, so I wouldn’t rely on that.

UA Sniffing: If it’s for the user, it’s okay :slight_smile: (and I think that was the idea behind UA)

Safari: True. But I don’t think that anyone uses Safari for Windows. It is outdated for years… but wait. There are still some IE 6 users out there.
Okay, you win.

If it works, it’s OK (UAs are so broken :smiley:). But at least device names work (in most cases if the device doesn’t fake it, haha).

@servicethinker
@lukasbestle

I’d like to use your detectDevice.php function so I made a test first by printing “yes” or “no” but regardless of what OS I’m in, it always output “yes”, meaning it’s an apple device.

Here’s the code,

<?php

function isApple()
{
  // All Apple mobile devices
  $iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
  $ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
  $ipad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");

  // All Apple-specific browsers
  $safari = strpos($_SERVER['HTTP_USER_AGENT'],"Safari");

  // All Appple os
  $mac = strpos($_SERVER['HTTP_USER_AGENT'],"Macintosh");

  if($iphone || $ipod != false || $ipad || $safari || $mac)
  {
    return true;
  }

  return false;
}


if (isApple()) {
  echo "yes";
  
} else {
  echo "no";
}

I’m a noob with php and kirby so I don’t know what am I missing. Can you please help me?
Thanks.