Integrate Google Maps into your ApEx application

Google Maps, a free service from google that offers dynamic and interactive maps, offers a Google Map API so developers can integrate the service into their website or application.

The first thing you need to do is to register with Google. Then you can go to Google Maps API page and sign up. Save the example code and the key so you can use it later.

Now we implement it into an ApEx page:

Create a new Page with an html region. Go to Edit page and perform the next action:

DisplayAttributes: Put “Cursor Focus” on “Do not focus cursor”.

HTML Header
: Copy your JavaScript into the HTML header, this script will call the map. You can call several classes to customize the controls on your map.

On Load: You will call the JavaScript to start the map when the page loads.

Now you can go to edit the html region and specify the location of the map:

Source: In source we place the div-tags where the map will show and its width and height.

Finally run your page:

Customize your map:

More info about how to customize your map with other default locations and buttons can be found here.

An example with a customized map can be found here.


One thought on “

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

About Olivier Dupont