Set Up the Map Section with Google Maps API

On June 11, 2018, the Google Maps Platform introduced a number of changes to how Google Maps APIs are organized and used. Using these APIs will require setting up a billing account with the Google Maps Platform. However, this doesn't necessarily mean that you'll be charged a monthly fee to use the service. You are provided a monthly credit on an ongoing basis to cover services up to a threshold.

For more information about pricing, see the Google Maps Platform pricing and billing documentation.

Supported Versions

The details shared here apply to the most recent versions of our themes. To keep your theme up to date, check out this helpful document.

Using the Map Section

The map section available in Out of the Sandbox themes includes settings for content, map position, and an integration with the Google Maps API (which is optional).

• In order to make use of the Google Maps API, you will need to register for an API Key. With the API key you will then be able to update your map colour scheme and hide/show the pin.
• You will need to follow Shopify's instructions on registering for a Google Maps API Key which can be found here
• If you do not wish to register for an API key, the original map setting with the iframe will work as default!

Select your theme:

• Turbo
• Parallax
• Retina
• Mobilia
• Responsive
• Artisan
• Flex

• Turbo

  Within Turbo's 'Map' section, you can enable wide display, change the map height and map zoom, and add an image that would display if the map wasn't able to load.
  
  With the Google Maps API added, you can enable the show pin setting, and choose your color scheme.
  
  View our full article on Turbo's map section

   

  Default Map without Google Maps API:
  
  
  
  With Google Maps API:
  
  

• Parallax

  Within Parallax's 'Map' section, you can enable store information, choose the text and background color, change the text alignment,  info position, and map zoom level, and add an image that would display if the map wasn't able to load.
  
  With the Google Maps API added, you can enable the show pin setting, and choose your color scheme.

   

  Default Map without Google Maps API:
  
  
  
  With Google Maps API:
  
  

• Retina

  Within Retina's 'Map' section, you can enable store information, change the text alignment,  map position, and map zoom level, enable wide display, and add an image that would display if the map wasn't able to load.
  
  With the Google Maps API added, you can enable the show pin setting, and choose your color scheme.

   

  Default Map without Google Maps API:

  

  With Google Maps API:

  

• Mobilia

  Within Mobilia's 'Map' section, you can enable store information, choose the text and background color, change the text alignment,  map position, and map zoom level, enable wide display, and add an image that would display if the map wasn't able to load.
  
  With the Google Maps API added, you can enable the show pin setting, and choose your color scheme.

   

  Default Map without Google Maps API:
  
  
  
  With Google Maps API:
  
  

• Responsive

  Within Responsive's 'Map' section, you can enable store information, choose the text and background color, change the text alignment, map position, and map zoom level, enable wide display, and add an image that would display if the map wasn't able to load.
  
  With the Google Maps API added, you can enable the show pin setting, and choose your color scheme.

   

  Default Map without Google Maps API:
  
  
  
  With Google Maps API:
  
  

• Artisan

  Within Artisan's 'Map' section, you can enable wide display, extra padding, change the map height and map zoom level, add an image that would display if the map wasn't able to load, display store information, choose the position for this information, and pick the text and background color.
  
  Artisan's 'Shape Feature' can also be enabled in the map section!
  
  With the Google Maps API added, you can enable the show pin setting, and choose your color scheme.

   

  Default Map without Google Maps API:
  
  
  
  With Google Maps API:
  
  

• Flex

  Within Flex's 'Map' section, you can configure width, spacing and animation settings.  Additionally, you can change the map height and map zoom level, and add an image that would display if the map wasn't able to load. Custom CSS can be included in this section as well for further configuration.
   
  With the Google Maps API added, you can enable the show pin setting, and choose your color scheme.

   

  Default Map without Google Maps API:
  
  
  
  With Google Maps API:
  
  
  
  View our full article on Flex's map section