[contact-form-7 id="24078" title="Feedback EN"]

Featured templates

osCommerce. How to insert Google map on the Contacts page

This tutorial will show you how to insert Google map on contact us page.

  1. To do this we’ll need to edit contact_us.php file.

  2. Go to your template installation root and search for contact_us.php file. Open it with your HTML editor (Adobe Dreamweaver, Notepad etc) and after:

    <?php echo tep_draw_content_bottom();?>

    string (approxiamtely line 108) paste the following code:

    	<h2 class="content">Contact Information</h2>
    	<figure class="map">
    		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d99362.47205895309!2d-77.01456655!3d38.8993487!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7c6de5af6e45b%3A0xc2524522d4885d2a!2sWashington%2C+DC%2C+USA!5e0!3m2!1sen!2sua!4v1413335621530" width="600" height="450" frameborder="0" style="border:0">
    		</iframe>
    	</figure>
       
  3. After you’ll be done – map should display on the Contacts page.

    osCommerce.How-to-insert-Google-map-on-the-Contacts page1.jpg

To change your map location please perform the following steps:

  1. Visit maps.google.com. Select your location and zoom.

  2. Click the link icon in the bottom right corner and click the Share an embed map button, copy a code you’ll see there.

    osCommerce.How-to-insert-Google-map-on-the-Contacts page.2.jpg

  3. Paste the code into your contact_us.php file replacing the existing one.

  4. Edit the map dimensions (width=”600″ height=”450″) if needed.

  5. Save the file and refresh the page in browser.

  6. Done! That’s all! Now you know how to insert Google map on the Contacts page.

Feel free to check the detailed video tutorial below:

osCommerce. How to insert Google map on the Contacts page