Google Maps on Classic Template

Website Templates
1

Hi,
Do you have any advice for how to update the Google Maps in the Classic Template please?
At the moment there is an error that states “This page can’t load Google Maps correctly.” and the image shows ‘for development purposes only’.
I’ve found the maps.js file and edited the latitude and longitude however this doesn’t seem to have made a difference.
In a previous post you stated I need a Google API key - which I now have - however I don’t understand where this needs to be placed? / How this needs to be used… Do you have any further information please?
Many thanks,
Jane

2

Hello,

I hope you are doing well today.

The Google API key can be added to the script using this guide from Google:

Best Regards,
Support

3

Hi Support,

Many thanks for coming back to me so quickly and providing the URL.

I understand I need to add this script from Google (changing the YOUR_API_KEY):

<a href="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap</a>

However I’m not sure where to place it within the files of the Classic Template - are you able to guide me please?
Thanks

4

Hi,

Please go to index.html then look for a line that starts with “script async defer src” near the bottom and replace the api key in that code with yours.

You are just replacing the api key there with yours.

This guide will have more information if needed.

Cheers

5

Thank you!

I’m struggling to get the map to display the local map details. I’ve noticed that the code you have entered is different to the one that Google provides:

This is what Google suggests to add:

https://www.google.com/maps/embed/v1/search
  ?key=YOUR_API_KEY
  &q=record+stores+in+Seattle

When I enter this (with my API code) it just displays blanks space - no map.

Your code appears to be different:
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap

Do you know how I can get Google’s code to work please to embed the map?

Any help you can offer would be appreciated,
Thanks

6

Hello,

I see, please try entering your API key to our code. So add the API code to this by replacing “YOUR_API_KEY”:


https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap

Let me know how that works.

Best Regards,
Support

7

Thanks - Yes I did try that initially and it displays a map of the world - however I need to then add parameters to show the specific address I want. It looks like I need to amend the JS file somehow, however I’m unsure how to do this?

With the embedded map I tried adding the parameters that Google suggest:
‘place’
‘&q’ with the URL-escaped address

How would I amend the JS script to include these please?

https://www.google.com/maps/embed/v1/place
  ?key=YOUR_API_KEY
  &q=Eiffel+Tower,Paris+France

Many thanks

8

Hello,

That would require more changes to be made to the theme. You would need to enlist the aid of a third party developer to add the new map code to the Javascript, one of which you can find here:
https://colorlib.com/out/envatostudio

Best Regards,
Support

9

Ok thank you - the link you provided doesn’t appear to work?

10

Good morning

Talking is about https://studio.envato.com/
there are several examples on how to integrate a map in your template,
Google API Tutorial
Adding a Google Map with a Marker to Your Website

you can even use embed method to show map without Api key, but this also will need to changes, get in touch with me if you need customization, (Mail in bio)