Joomla 3.x. How to edit Google Map location (on Home page)

This tutorial is going to show you how to change Google Map location on the Home page in Joomla 3.x templates.

Joomla 3.x. How to edit Google Map location (on Home page)

If you see a Google Map on the home page, it means that you can not edit it the same way as the Google Map on the contacts page. Usually, such Google Map loads from a single article via HTML code.

To change the location of the Google Map on the Home page, you should perform the following steps:

1. Log in your Joomla admin panel and navigate to the System -> Global Configuration menu.

2. Find the option Default Editor and select Editor – Code Mirror or Editor – None value from the list:

   

   NOTE: With the default Joomla TinyMCE editor activated you will not be able to see the code that loads Google map from the article.

3. Click Save button in the top right corner to save the changes.

4. Now we should check which article contains the Google Map code. Navigate to the Extensions -> Module Manager menu.

5. Filter modules by the "Articles – Single" type and select the required module from the list. In our case, this is the "Location" module in the bottom position:

   

6. Check the article name in the Select Article option field. This is "Map" article in our case:

   

7. Now find and open this article in the Article Manager:

   

8. In the Text area you can see the map code:

   <iframe width="570" height="217" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Brooklyn,+New+York,+NY,+United+States&amp;aq=0&amp;sll=37.0625,-95.677068&amp;sspn=61.282355,146.513672&amp;ie=UTF8&amp;hq=&amp;hnear=Brooklyn,+Kings,+New+York&amp;ll=40.649974,-73.950005&amp;spn=0.01628,0.025663&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
   

   

9. This is the code (map embed link) you need to modify or replace with a new one:

   http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Brooklyn,+New+York,+NY,+United+States&aq=0&sll=37.0625,-95.677068&sspn=61.282355,146.513672&ie=UTF8&hq=&hnear=Brooklyn,+Kings,+New+York&ll=40.649974,-73.950005&spn=0.01628,0.025663&z=14&iwloc=A&output=embed
   

10. To create a new map embed link, go to https://www.google.com/maps.

11. Enter your physical address into the search field.

12. Using your mouse and the map controls choose the desired location and zoom level.

13. Click on the settings icon on the bottom right of the page. Select the Share and embed map menu from the list:

    

14. Switch to the Embed Map tab. Copy the new generated code for Google map. It will look like this:

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d214587.41156412518!2d-96.73133959999998!3d32.82066454999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x864c19f77b45974b%3A0xb9ec9ba4f647678f!2sDallas%2C+TX!5e0!3m2!1sen!2s!4v1414173355244" width="600" height="450" frameborder="0" style="border:0"></iframe>
    

    

15. This is the code you need to use (value of the src attribute):

    https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d214587.41156412518!2d-96.73133959999998!3d32.82066454999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x864c19f77b45974b%3A0xb9ec9ba4f647678f!2sDallas%2C+TX!5e0!3m2!1sen!2s!4v1414173355244
    

16. Replace your original code with the new generated one.

17. Your new map code will look like this:

    <iframe width="570" height="217" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d214587.41156412518!2d-96.73133959999998!3d32.82066454999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x864c19f77b45974b%3A0xb9ec9ba4f647678f!2sDallas%2C+TX!5e0!3m2!1sen!2s!4v1414173355244"></iframe>
    

18. When everything is done, press Save button in the top right corner.

19. Refresh your site to see the changes. The location of the Google Map location on your Home page was changed successfully.

This is the end of the tutorial. Now you know how to change the location of the Google Map on the Home page in Joomla 3.x templates.

Feel free to check the detailed video tutorial below:

Joomla 3.x. How to edit Google Map location (on Home page)