How to Add a Google Map to a Contact Page in Joomla
Getting Started
The first thing you need to do is to go on over to Google Code in the Maps section and get familiar with the one of the Google Maps Application Programming Interfaces (APIs). For this tutorial you will need to select the Google Map JavaScript API.
You do not need to get familiar with the entire API for this tutorial because a lot of the information there is beyond the scope of this tutorial on how to add Google maps to a contact page in Joomla. Eventually it would still be good to get familiar with the features found in the API reference so that you can be able to add advanced features to the Google map on your contact page.
Putting the Code Together
Assuming you already have your Joomla based website set up and designed to your satisfaction, the easiest way then to add the map to your Joomla contact page is to use the Miscellaneous Information field in the Contact Manager found in the Joomla Administrator. If you are already using that field you can simple position the Map below any text that is already there by placing the code below in that field and Saving the changes.
Once this is done, in the Joomla Administrator, you will need to go to Extensions > Template Manager and select your current Template by name to edit it. Once there, you will notice icons on the top right part of the page. Click on the Edit HTML icon to gain access to the raw template. In the raw template code just above the tag, add the following code.
The just below the tag, you will need to add this inside the <body … > tag
onload=“initialize()
Save all changes.
You may now go to the main website and view your google maps in your contact page.
The Google Map will not automatically Zoom into the location of your contact address. To make Google Maps zoom into the appropriate position, you need to make a few changes to this line from the code snippet above.
var latlng = new google.maps.LatLng(-34.397, 150.644);
The number -34.397 is the Latitude, likewise the number 150.644 is the Longitude. You may want to set this as the location of the address you have in your contact page. To get the coordinates you can simply search for the address on Google Maps then record the coordinates as shown at the bottom of the map.
Conclusion
These instructions are specific to the Google Maps API version 3. I recommend you do not use previous versions as they are depreciated. Therefore using version 3 of the API is the best way to add Google Map to Contact pages in Joomla.
You can have a look at articles such as this one on creating a Navigation map for a website and this other one on how to create a Facebook App for more web development tips.
