Apex with Google Maps: Getting Started

Getting Google Maps to display in Apex is fairly easy: Google provides a well documented Javascript API that you can easily integrate with Apex. At the time of this writing, I used version 3 of the Google Maps API.

As you dive deeper into the many features of Google Maps, you will need to reference the API documentation frequently.

So let’s get started and display a basic map inside a region of an Apex page. For this we need two things: An HTML region with a <div> to hold the map, and some Javascript to call the map from Google.

Create the HTML region with the following source:

It is important to note here that you have to give your <div> a minimum height, otherwise, the map will not display.

Next, let’s add some Javascript to call the map. You can place the Javascript in several places: On the server, inside an HTML region,  or in the Javascript region of the page attributes. For this example, let’s place it the Javascript region of the page attributes. We need to first include the maps api, and then run some code to render the map:

The code here is pretty straight forward:

Line 2: set a variable to hold a latitude/longitude object with the coordinates of where we want the map to be centered.

Line 4: Here we set a few options that define the look of the map: zoom level, center, map type.

Line 8:  We set the map variable to hold the Map class, along with the HTML container in which it should render. This refers to the id of the <div> we created above. This also renders the map inside the <div>.

All that’s left to do now is call the initialize() function. We can do this on page load, button click, or other event. To make things easy, we’ll just add the call to the Execute when Page Loads region. This way the map appears right away.

That’s it. Now run the page, and if you used my coordinates, you will end up in beautiful Grapevine, Texas!