center parameter not working in new google maps embed

Question

I have used the new embed code for the new google maps as documented here:

https://developers.google.com/maps/documentation/embed/guide

My code is:

<iframe width="500"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=KEY&q=Space+Needle,Seattle+WA">
</iframe>

This works fine and displays the map correctly

When I try to add the "center" parameter using the below code it zooms the map out to the whole world view

<iframe width="500"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=KEY&q=Space+Needle,Seattle+WA&center=47.620467,-122.349116">
</iframe>

What I ultimately want to do is move the map so it is not centered on the actual marker, but at the moment I am testing with a lat and long that are very close to the marker.

Am I using the &center parameter correctly? Has anyone else got the &center parameter working?

I have checked that the lat and long I used are in the map displayed

Answer 1

Alas this seems to be a bug with the current Embed API. The documentation indicates that it's possible to use 'center=' with /place but in practise this doesn't work.

I ran into the same problem, adding 'center=' to the iframe URL broke the map. It worked flawlessly when I changed '/place' into '/view' and removed the 'q=...' part. I've sent feedback to Google about this. You can do this through the 'Feedback on this document' link on this page:

https://developers.google.com/maps/documentation/embed/guide#optional_parameters

To work around this I've switched to the Google Maps Javascript API v3. This API is quite a bit more flexible and as a bonus it also rids you of the iframe.

In your case this should do the trick:

Put this just before

<script type="text/javascript">
var map;
function initialize() {
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(47.620467,-122.349116),
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var myLatlng = new google.maps.LatLng(47.620614, -122.348880);

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Space Needle, Seattle WA'
  });
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?key={API_KEY}&callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

</script>

And add

<div id="map-canvas" style="width: 500px; height: 450px;"></div>

to your HTML somewhere.

A disadvantage is that you need to manually adjust the Lat/Lon for the marker by searching Google Maps, right click and then "What's here". You already need to do this for the center coordinates so this shouldn't be a big problem. If you want to automate this you can use the Google Maps Geocoding service but that would happen on every view:

https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple