How to use Google Maps API

1. Obtain Google Maps API

After installing the component from the Forge, it's a good idea to obtain a valid Google Maps API Browser Key: it will allow you to track requests and manage your daily access quota. Head on over to their Developer API Console page and log in with your Google account. Once you have created a project, you can access the credentials section and obtain your Browser Key:

2. Setting the DefaultBrowserAPIKey 

This key should then be inserted into the DefaultBrowserAPIKey site property, through Service Center

3. Reference the component

4. Add a Map block to a web screen

Now you are ready to start using the component. First, what you came here for: Maps. You can add a map to a Web Screen by using the Map Web Block, filling in the relevant options. By specifying a Name, you can then reference this map to associate other objects, so fill it in if you intend to. If you're wondering what MapOptions are for, you can scroll to the end of this page for an explanation.

5. Use other widgets to add objects

Once you have a map on the Web Screen and its name set, you can use the other widgets to add objects: Markers, Directions or Events. As previously stated, they need a Map Id to refer to it, which you can see below as 'SimpleMap.Id'. Events are special, in that they bind functionality to existing markers or maps. This functionality is described on the Handler JavaScript function you provide on the Web Block, which will be executed when the specified 'Triggering Event' is fired.

You can fill the Handler as below:

 "function(){

    if (this.getMapTypeId() == google.maps.MapTypeId.SATELLITE) {

        this.setMApTypeId(google.maps.MapTypeId.ROADMAP);

    } else if (this.getMapTypeId() == google.maps.MapTypeId.ROADMAP) {

            this.setMApTypeId(google.maps.MapTypeId.SATELLITE);

    }

}"

All of these objects (except Events) can be customized through JSON objects on their arguments, according to options available to them. Additionally, you can customize the libraries included with your Maps through the APILibraries site property. Check out the Google Maps JavaScript API v3, under the reference for Map Options, Marker Options and DirectionsRequest, for the customizations available to each of them.