icon Google Maps
Created by Orckestra

How to use Google Maps package

Before you begin, make sure you have:

  1. Got an API Key from the Google API Console
  2. Enabled Google Static Maps API for your project

How to show addresses with Google Maps

  1. Edit a page.
  2. Insert the Composite.Web.Maps.GoogleStaticMaps function ( Insert | Function) or add the following code:
    Expand code 
  3. Also you can use the Components buttons and select the Google Static Map component.
  4. In the required Google API Key parameter, specify the API Key you got from the Google API Console
  5. In the required Address parameter, specify the address, e.g. "25 Some Street, Some City", or the latitude/longitude of a point, e.g. "40.7813132127194,-73.9663660526276".
  6. Specify the optional parameters if necessary:
    • Zoom: The zoom level of the map from 1 to 21. 14 by default.
    • Map Size: Defines the rectangular dimensions of the map image. This parameter takes a string of the form {horizontal_value}x{vertical_value}. For example, 500x400.
    • Map Type: Defines the type of map to construct.

How to get an API Key from the Google API Console

To use the Google Static Maps API, you must register your app project on the Google API Console and get a Google API key.
To create a Google API Console project, follow these steps:

  1. Go to the Google API Console.
  2. From the project drop-down, select an existing project, or create a new one by selecting Create a new project.
  3. In the Credentials tab, select the Create Credentials drop-down list, and choose API Key.

How to enable Google Static Maps API for your project

  1. Go to the Google API Console Dashboard
  2. Make sure that in project drop-down the correct project is selected.
  3. Press button ENABLE API and select Google Static Maps API.
  4. You are done. Now, on the Dashboard tab you can see the list of enabled APIs for your selected project.