Pin Me

Adding a Google Map to a Joomla Contact Page

written by: S. R. Obbayi•edited by: Michele McDonough•updated: 11/30/2010

Some people may think that it is rocket science to add a Google map to a contact page in Joomla. Actually it is quite simple. All you need to do is follow some specific steps. Keep reading to find out what they are.

  • slide 1 of 3

    Getting Started

    googlemap 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.

  • slide 2 of 3

    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.

    <div id="map_canvas" style="width:430px; height:350px"></div>

    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 </head> tag, add the following code.

    <script type="text/javascript" src="">


    <script type="text/javascript">

    function initialize() {

    var latlng = new google.maps.LatLng(-34.397, 150.644);

    var myOptions = {

    zoom: 8,

    center: latlng,

    mapTypeId: google.maps.MapTypeId.ROADMAP


    var map = new google.maps.Map(document.getElementById("map_canvas"),




    The just below the </head> tag, you will need to add this inside the <body ... > tag


    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.

  • slide 3 of 3


    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.