How to Add a Google Map to Your OpenCart Contact Page

Note: This tutorial is tested and working on OpenCart versions 2.2 and 2.3.

If your OpenCart store has a physical location, it is often important for customers to find it, fast and easy. What better way to show them than placing your location on a map on your contact page?

This tutorial will show you how to implement your store location from Google Maps into your OpenCart store with a code sample. There are only a few things to remember:

To get a Google Map on your website, you need an API key. On the line where our API key is located, you should replace it with the one you get from Google:

  • Line 15: $this->document->addScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyBf-EZpcLV72omKDDxOlhG6-i8Ga8NenRo');

To modify the dimensions of your map, you can use the width and height values:

  • Line 25: <div id="map_contact" style="width:100%; height: 300px; background-color:#333;"></div>

On the line that has the coordinates, you should get the coordinates of your exact location and put them there:

  • Line 35: var LAT_LNG = new google.maps.LatLng(40.785091,-73.968285);

Customize the text that appears on your location on the map:

  • Line 45: title: 'We are here!'

Here is the code sample itself:

<modification>
    <name>Google map on contact page</name>
    <version>1.0 (Initial)</version>
    <link>https://isenselabs.com</link>
	<author>iSenseLabs</author>
	<code>google_map_contact_page</code>

    <file path="catalog/controller/information/contact.php">
        <operation>
            <search>
                <![CDATA[public function index() {]]>
            </search>
            <add position="after">
                <![CDATA[
                    $this->document->addScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyBf-EZpcLV72omKDDxOlhG6-i8Ga8NenRo');
                ]]>
            </add>
        </operation>
    </file>

<file path="catalog/view/theme/*/template/information/contact.tpl">
       <operation>
           <search><![CDATA[<h3><?php echo $text_location; ?></h3>]]></search>
           <add position="after"><![CDATA[
                   <div id="map_contact" style="width:100%; height: 300px; background-color:#333;"></div>
               ]]></add>
       </operation>
       <operation>
           <search><![CDATA[<?php echo $content_bottom; ?></div>]]></search>
           <add position="before"><![CDATA[

                <script type="text/javascript">
                   (function($) {
                       function initialize_map() {
                             var LAT_LNG = new google.maps.LatLng(40.785091,-73.968285); //  add your location here
                             var mapOptions = {
                                    center: LAT_LNG,
                                    zoom: 15
                                };
                             var map = new google.maps.Map(document.getElementById("map_contact"), mapOptions);

                               office_marker_362 = new google.maps.Marker({
                                position: LAT_LNG,
                                map: map,
                                title: 'We are here!'
                            });

                       }
                             google.maps.event.addDomListener(window, 'load', initialize_map);

                   })(jQuery); 
                   </script>
           ]]></add>
       </operation>
   </file>
</modification>

After you insert your own API key and location coordinates, paste the code into a text editor (Sublime, Brackets, Notepad ++, etc) and save it as an ocmod.xml. For example, we named the file googlemap.ocmod.xml.

After you save the modification on your computer, go to your OpenCart admin panel and go to your Extension Installer. Upload the file there and refresh your modifications afterwards.

When you do that, the map should appear on your contact page. It worked for us on OpenCart versions 2.2 and 2.3. Here is how it looks like on our end:

Google Maps in OpenCart

Summary

We hope this tutorial was helpful! Let us know if you like the modification in the comments section below!

Join 11,000+ subscribers receiving actionable E-commerce advice

* Unsubscribe any time
comments powered by Disqus