Trouble embeding a Google map

Hello

having a BAD time making a google map work :frowning:

i have been trying, no go

found this

this is basicaly where i first get stuck…

i ask anyone who knows this stuff to reply with everything i need to do to make a google map API work

this FAR out of my comfort zone

i strongly believe this is too much for my curent skill set :frowning:

i dont get cloud, i dont get Keys

i am completely lost :frowning:

i tried different youtubes and another online resource, no go

is making gogle maps with API easy to do?

am i missing something?

i have done my research and remain intimadated

dumb it down for me :slight_smile:

please see https://forallthetime.com/BI9/location.html there is a google map that seems fully functunal

how can i wrap text around the map?

are APIs necessary to make a google map work?

i came accross a site that provided the HTML and CSS, nothing about keys, clouds…

any help would be appreciated :slight_smile:

It really depend upon what functionality you need from the map.
If you simply want to embed a map with a single marker on a particular place, as in the example you linked, that’s quite simple without needing the API.
(observe the source code of that site)
If you need something more complex, such as multiple map location markers, custom overlays and other custom map features, you will need to use the API.

1 Like

The same way you would with an image or video.

e.g.

.map iframe{
    width:80%;
    height:auto;
    max-width:800px;
    min-width:280px;
    aspect-ratio:16 / 9;
    float:left;
    margin:0 1rem 1rem 0;
}
@media screen and (max-width:800px){
    .map iframe{
        float:none;
        display:block;
        margin:auto;
    }
}

I suggest that on mobile screens you don’t let the map go edge to edge otherwise the user can get trapped inside the scrolling map and not scroll the page unless there is a gap at the side.

1 Like

great! thank you!

so the the example i linked to will work ok?

understanding:

i do not need someting more complex, i do not need multiple map location markers, i do not need custom overlays and other custom map features

again

yes! thats FINE with me!!

no issues with the example i linked, then?

MANY THANKS!!!

You can get the embed code directly from Google Maps.
Click on a featured place to bring up the info in the side panel.
Click on Share.
In the Share box click “Embed a map”.
Copy the embed code and paste into your HTML page.

I have switched to using OpenStreetMap to avoid possibly having to pay fees for using Google maps:

And the graphics on OpenStreetMap is much better too!

When viewing a map with OpenStreetMap you can get HTML code to embed via the ‘Share’ button on the right hand side, with the option of including a marker.

2 Likes