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

Answer 2

if you want to do this without having to use the API, you can still use the old Google Maps Classic coding. for centering, you can add the following to the "src" code: &ll={latitude}, {longitude}

so for instance "&ll=44.013922, -88.342259". just make sure it is INSIDE the quotes for the src.

you can also set a custom zoom by using &z=#

for example: "&z=20" will get you close to Street View.

who knows how long this will last though, so use at your own risk, and be sure to check on it regularly...