Search code examples
google-mapsgoogle-maps-api-3

Set title for Google Maps embed

I am embedding a Google Map using their 'Embed this map' code off the Google Maps page.

It works fine, but it always comes up as 'untitled'

<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!4v1699102345389!6m8!1m7!1sGgTmBPHhKtgAAAQ0MEzJZQ!2m2!1d51.50336287082302!2d-0.1275790069079221!3f336.56!4f-8.700000000000003!5f0.7820865974627469" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

Width and height are defined with CSS

I tried adding a title to the iframe but it didn't do anything.

I also tried using a Google maps API (thinking I might have more flexibility) - the code below, but it doesn't work either. It always says untitled.

<iframe
  frameborder="0" style="border:0"
  title="test"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed?pb=!4v1699102345389!6m8!1m7!1sGgTmBPHhKtgAAAQ0MEzJZQ!2m2!1d51.50336287082302!2d-0.1275790069079221!3f336.56!4f-8.700000000000003!5f0.7820865974627469?key=my-key-is-here&PARAMETERS"
  allowfullscreen>
</iframe>

I have read through lots of documentation but it's quite confusing.

What I really want it this

https://artsandculture.google.com/streetview/10-downing-street-entrance-hallway-10-downing-street/XAFQY90e99utPA?hl=en-GB&sv_lng=-0.12758047836109654&sv_lat=51.50335969885072&sv_h=-39.31408793346178&sv_p=-6.8567992325994&sv_pid=HMzgivzbj30AAAQ0MExxLg&sv_z=0.33265191522677273

But it doesn't appear that you can embed street views from Google Arts and Culture - only if you navigate there yourself.

I have tried looking at the 'Street View service' in Google developers, but I can't wok out what it is specifically and was hoping there was an easier way as I have lots a street view maps to put on the same page.

I also tried making my own map in 'My Maps' - but the streetview option is not part of it

I'm a bit lost, so really just a point in the right direction would be much appreciated.

Solution

  • Google Arts and Culture is a custom website that's not directly related to the Google Maps or its APIs.

    You likely obtained the <iframe> embed code from google.com/maps: enter image description here Please note that not everything google.com/maps shows is available through the Google Maps Platform APIs.

    What is available, though, is embedding street view (and indoor view, if applicable) programmatically via the Maps Embed API.

    Now, you can specify the camera angle, pitch, etc — but you cannot easily control the "embed title". The <iframe> itself may contain the title attribute — but that's mostly for accessibility purposes.

    Your best bet it to place your own HTML on top of the embed:

    .google-maps {
  position: relative;
}

.google-maps h2 {
  margin: 0;
  left: 0;
  top: 10px;
  position: absolute;
  background: white;
}
    <div class="google-maps">
  <h2>Embed Title</h2>
  <iframe title="hello world" src="https://www.google.com/maps/embed?pb=!4v1699102345389!6m8!1m7!1sGgTmBPHhKtgAAAQ0MEzJZQ!2m2!1d51.50336287082302!2d-0.1275790069079221!3f336.56!4f-8.700000000000003!5f0.7820865974627469" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

    Here's a video quickstart into the The Maps Embed API.