Concepts

Concepts

Developing for Mobile Devices

The Maps JavaScript API has been designed to load quickly and work well on mobile devices. In particular, we have focused on development for advanced mobile devices such as Android and iOS handsets. Mobile devices have smaller screen sizes than typical browsers on the desktop. As well, they often have particular behavior specific to those devices (such as "pinch-to-zoom"). If you wish to have your application work well on mobile devices, we recommend the following:

Set the <div> containing your map to have width and height attributes of 100%. Be aware that some older desktop browsers don't display well with these values, however.

You can detect iPhone and Android devices by inspecting the navigator.userAgent property within the DOM:

function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map");

  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '100%';
  } else {
    mapdiv.style.width = '600px';
    mapdiv.style.height = '800px';
  }
}

This allows you to alter layout for particular devices, as we've done here to change the screen real estate for each device.

Android and iOS devices respect the following <meta> tag:
```
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
```
This setting specifies that the map should be displayed full-screen and should not be resizable by the user. Note that the iPhone's Safari browser requires this <meta> tag be included within the page's <head> element.

For more information on development for the iPhone, consult Apple's Developer documentation. For more information on development for Android devices, consult the Android documentation.

Localization

You can localize your Maps JavaScript API application by changing the default language settings and by specifying a region code, which alters the map's behavior based on a given country or territory. Read about localizing the map.

Versioning

The Maps JavaScript API team regularly updates the API with new features, bug fixes, and performance improvements. You can indicate which version of the API to load within your application by specifying it in the v parameter of the Maps JavaScript API bootstrap request. Read more about versioning.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

最終更新日: 2月 15, 2019

Developing for Mobile Devices

Localization

Versioning

フィードバックを送信...