Google Maps widget issue

  • Resolved d.chatzimanolis

    (@dchatzimanolis)


    7 years, 9 months ago

    Hi,

    After installing your plugin and setting the Google Maps API KEY, my map is appeared correctly at my contact page but not at the footer where I have inserted the google map as a widget.

    Why does this happen please?

    Waiting for your advice.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Stiofan

    (@stiofansisland)

    7 years, 9 months ago

    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:http://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

    Thread Starter d.chatzimanolis

    (@dchatzimanolis)

    7 years, 9 months ago

    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:

    http://melissa-samos.com/

    I get the following text:

    “Google Map of 37.779169, 26.892912”.

    Plugin Author Stiofan

    (@stiofansisland)

    7 years, 9 months ago

    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:http://melissa-samos.com/wp-content/uploads/2016/01/map-marker.png%7Cshadow:true%7C37.779169,+26.892912

    Stiofan

    Thread Starter d.chatzimanolis

    (@dchatzimanolis)

    7 years, 9 months ago

    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?

    Plugin Author Stiofan

    (@stiofansisland)

    7 years, 9 months ago

    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

    Thread Starter d.chatzimanolis

    (@dchatzimanolis)

    7 years, 9 months ago

    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?

    Plugin Author Stiofan

    (@stiofansisland)

    7 years, 9 months ago

    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:http://melissa-samos.com/wp-content/uploads/2016/01/map-marker.png%7Cshadow:true%7C37.779169,+26.892912" alt="Melissa Samos - Find us">

    Thanks,

    Stiofan

    Thread Starter d.chatzimanolis

    (@dchatzimanolis)

    7 years, 9 months ago

    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)?

    Plugin Author Stiofan

    (@stiofansisland)

    7 years, 9 months ago

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

    Have a good weekend 🙂

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Google Maps widget issue’ is closed to new replies.