As you dive deeper into the many features of Google Maps, you will need to reference the API documentation frequently.
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.
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!