New pricing changes went into effect on July 16, 2018. For more information, check out the Guide for Existing Users.

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.

Kirim masukan tentang...

Halaman ini
Masukan dokumentasi
Maps JavaScript API
Masukan produk
Butuh bantuan? Kunjungi halaman dukungan kami.