Google Maps widget issue

The map at the bottom of the page is not adding the JS file the correct way.
You would be better using a static map there so you don’t have to load the Google API on every page load, try replacing that widget with this static map code:
<img width="275" src="https://maps.googleapis.com/maps/api/staticmap?center=37.779169,+26.892912&zoom=14&scale=1&size=275x220&maptype=roadmap&key=AIzaSyC4F2jctubCCH4IYNALGczTFXHnTGo2ggU&format=png&visual_refresh=true&markers=icon:https://melissa-samos.com/wp-content/uploads/2016/01/map-marker.png%7Cshadow:true%7C37.779169,+26.892912" alt="Google Map of 37.779169, 26.892912">

Thanks,

Stiofan

Hi,

Thank you for your instant reply.

I tried your code into a “multilingual text” widget but the map is not appeared correctly.

Please check my english home page now:

https://melissa-samos.com/

I get the following text:

“Google Map of 37.779169, 26.892912”.

I see this error “This API project is not authorized to use this API” You have to enable your google API project to allow “Static Maps” then it should work.

You can see the error here: https://maps.googleapis.com/maps/api/staticmap?center=37.779169,+26.892912&zoom=14&scale=1&size=275x220&maptype=roadmap&key=AIzaSyC4F2jctubCCH4IYNALGczTFXHnTGo2ggU&format=png&visual_refresh=true&markers=icon:https://melissa-samos.com/wp-content/uploads/2016/01/map-marker.png%7Cshadow:true%7C37.779169,+26.892912

Stiofan

Could you please advice me where exactly can I enable my google API project to allow “Static Maps”?

At my key restrictions, I see that it is unrestricted. Is this maybe another option somewhere?

Go here: https://console.developers.google.com/flows/enableapi?apiid=static_maps_backend,street_view_image_backend,maps_embed_backend,places_backend,geocoding_backend,directions_backend,distance_matrix_backend,geolocation,elevation_backend,timezone_backend,maps_backend&keyType=CLIENT_SIDE&reusekey=true&pli=1

Select your project at the top, then select the “Enable APIs and Services” then select Static maps api and enable. It can take 2-3 minutes before it will start working.

Stiofan

After following your advice, I enabled static maps api as you recommended.

However the map keeps not loading at my footer’s 1st column.

I think that maybe something else causes the issue.

Could you please take a look again?

Yes i see i mistake with the API key, use this code in the widget

<img width="275" src="https://maps.googleapis.com/maps/api/staticmap?center=37.779169,+26.892912&zoom=14&scale=1&size=275x220&maptype=roadmap&key=AIzaSyA2kFHT4XNW5WXsBDolYhDSuqKdSD9N_aw&format=png&visual_refresh=true&markers=icon:https://melissa-samos.com/wp-content/uploads/2016/01/map-marker.png%7Cshadow:true%7C37.779169,+26.892912" alt="Melissa Samos - Find us">

Thanks,

Stiofan

Thank you, your code worked correctly this time.

May I ask you please where do I find the above code for my projects (just to have it in mind for my forthcoming projects)?

• This reply was modified 6 years, 6 months ago by d.chatzimanolis.

There are a few sites that help you build them: https://staticmapmaker.com/google/

Have a good weekend ??