Home » Tutorials » Mobile Web Development » Launch Native iOS Google Maps Via Your Web App

Launch Native iOS Google Maps Via Your Web App

Launch Native iOS Google Maps Via Your Web App

  • Stumble it!
  • Share

"Google has introduced a Google Maps URL Scheme (comgooglemaps) to allow you launch a native iOS Google Maps from your HTML web application"

View this demo in your iOS device

Have you ever think of improving your web app’s user experience (UX) by enabling your users to easily search and get directions of your business? Yes! Here is a good news for you to allow your web app users to navigate your business direction using their native iOS Google Maps instead of web version of Google Maps.

Google has introduced a Google Maps URL Scheme to allow you launch a native iOS Google Maps from your web application. You can set predefined parameters in the URL that will be passed to the launched application and allows you to perform one of the following actions:

  • Display map at a specified location and zoom.
  • Search for location and display them on map.
  • Request direction from one direction to another in 3 modes available: driving, walking and public transit.

How To Use Google Maps URL Scheme?
Step 1:

Before you present this URL to your web app users, you should first check that are they using iOS devices (iPod, iPhone, iPad). If they are not iOS device users, then the URL link to web version of Google Map will be preserved. You can check by using user agent detection with the following code:

var iPhoneFlag = false;
if( navigator.userAgent.match(/iPhone|iPod/) ){
  iPhoneFlag = true;
}

Step 2:

Next, we can display a map at a specified location and zoom level with the following optional parameters:

  • zoom: You can specify the level of zoom for your map.
  • center: The center point of the maps viewport. This value is formmated as a comma separated string of latitude,longitude.
  • q: The query string for your search.
  • mapmode: You can specify what kind of map you would like to show, such as standard or streetview.
  • views: You can turn on or off the views. This views can be set to either satellite, traffic or transit. You can also join all the value using comma-seperator.

If there is no parameters are set, the URL scheme will simply launch the native iOS Google Maps app.

Let’s say you want launch native google maps which displays your office by specifying the “center” parameter as shown below:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var iPhoneFlag = false;
if( navigator.userAgent.match(/iPhone|iPod/) ){
  iPhoneFlag = true;
}

$(document).ready(function() {
	if(iPhoneFlag) {
		var googlemap_url = "comgooglemaps://?center=3.1357,101.6880&zoom=14";
		$("#map_link").attr("href", googlemap_url);
	}
});
</script>
</head>
<body>
<a href="http://goo.gl/maps/YLXEh" id="map_link">Locate Us at Kuala Lumpur City Centre, Malaysia</a>
</body>
</html>

View this demo in your iOS device

Some additional examples are below:

An example URL is below to search a “Coffee” around specified location.

comgooglemaps://?q=Coffee&center=3.1357,101.6880&zoom=14

iOS Google Map with Query

Another example URL is below, which displays centered on London at zoom 18 with the traffic view on:

comgooglemaps://?center=3.1357,101.6880&zoom=14&views=traffic

iOS Google Map with traffic view

Further Reading On Google Maps URL Scheme

Following is the official documentation of Google Maps to helps you dive deeper into Google Maps URL Scheme – Google Maps URL Scheme.


  • Replacing jQuery Animation With CSS Hardware Accelerated
  • Speed Up Page Loads Time Using Prefetch / Prerender
  • Testing & Troubleshooting Retina Display Content Without Actual Device

Android, iOS Development Tutorials