Google Map in Opencart Store, insert your shop at google map
Today I am giving away the Google Map Module for opencart for free. By which we can show Google Map at the contact us page and as the module in Opencart e-Commerce website. This module works with vqmod, if you like to manually insert the code the read the post below which I will show how to do them.
For OpenCart 3 google map module download from below:
How to add google maps in Opencart contact us page? - no coding required
First, I like to show how to pin or add your shop located on the google maps. Go to the http://www.google.com/mapmaker and search for a popular place near yours and zoom in to the map and see your exact location.
add your location to google map
add your location to google map
Now click on the ADD NEW button and insert click to add the place and locate the red pin to your exact place and then insert the description as per required and SAVE. You can insert the phone, website, category, working hours, payment types and so on.
Now go to https://www.google.com/maps and search for your popular place and locate your place and pinned location. Google Maps will not instantly show your recently inserted location or shop. When you find your shop or location, then click on the red pin and it shows the details and after that click on the link icon at the right (see the red box in the image below)
Google map at the opencart store
how to show the shop at the google map
Now find the HTML code and paste in our contact google map module.
Now time to download the module and upload it to the respective directory.
INSTALLATION OF FILES:
1 – Unzip in the folder.
2 – Upload the files inside the “googlemap” folder to your OpenCart root folder.
3 – In admin, go to “Extension>> Module >>Google Map” and install the module and edit.
Now time to insert the iframe HTML code that we get from the Google Map from above. Please edit the iframe width to 100% and height as per your requirement.
For mine code looks like below
<iframe width=”100%” height=”350″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”https://www.google.com/maps/ms?msa=0&msid=215707624648835363542.0004d48fa8b68dbc004b0&ie=UTF8&ll=27.597546,85.521119&spn=0,0&t=h&iwloc=0004d48fa8bb305cc3dfb&output=embed”></iframe><br /><small>View <a href=”https://www.google.com/maps/ms?msa=0&msid=215707624648835363542.0004d48fa8b68dbc004b0&ie=UTF8&ll=27.597546,85.521119&spn=0,0&t=h&iwloc=0004d48fa8bb305cc3dfb&source=embed” style=”color:#0000FF;text-align:left”>opencartnepal.com</a> in a larger map</small>
Then add the module to where you like to show in the layout. One of the interesting things of this module is that it will show google map in the contact us page just below the details of the contact.
Vqmod is needed to show the google map at the contact us page. If you don’t like to show it at the contact us page then you have to delete the googlemap.xml at the vqmod and install the module pack. If you don’t have the vqmod and like to show the google map at the contact us page then you can easily use the module setting to show at the contact layout.
COPYRIGHT:
This module code is the intellectual property of mine as an Opensource code you are entitled to use it freely and modify it if you wish but please keep the credits intact.
OpenCart Flow
- Introduction and table of Contents
- Why OpenCart?
- Features of OpenCart
- Prerequisites
- Downloading example code
- Installing OpenCart
- Steps to create custom URL to work locally
- Describing folders and files of OpenCart
- OpenCart Code flow
- Request and Response in OpenCart
- Database table schema
- OpenCart Library Global Methods
Making Hello World Module
Admin files created to make hello world module
Front end files created to make hello world
Making Advanced Featured Module
- Configure and show how our featured module works
- Explore the code used in Featured Module
- Admin Controller code description of featured module
- Admin language code description of featured module
- Admin template code description of featured module
- Catalog Controller code description of featured module
- Catalog template and language code description of featured module
Make Advanced Featured Module admin section
- Show demo how Advanced featured module works
- Install newly created module and activate, configure and set it to show at front end.
- Make Advanced Featured Module Admin end section
- Make Advanced Featured Module front end section
Workflow or markup to make Testimonial management.
Admin files created to make Testimonial Management
- Form Creation (edit and insert)
- Listing page creation
- Language file creation
- Model Creation
- Template file creation
- Links to listing page added in primary menu through use of OCMOD
Front end files creation
- Controller creation
- Model Creation
- Language file creation
- Template file creation