Centering Responsive Google Maps

Question

As you can see from this jsFiddle , I have a responsive google map thanks to this stack overflow question .

Now the problem is to have the map remain centered on the marker on different viewports and browser resizes.

I have found an answer here with the following code:

google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(homeLatlng);
});

However, since I am still not very good with jQuery and javascript, I have no idea how to apply the event listener.

Does anyone know how the event listener would be applied?

Answer 1

I don't think your second code snippet will work in conjunction with the first as you're embedding your map using an iFrame. This means you have no access to the map to manipulate it via its API (which is what the second code snippet is attempting to do).

I'd suggest you take a look at the Google maps API 3 getting started guide which will give you all the information you need to get going. You should be able to combine the 'hello world' example with your responsive CSS and the event handler above to make the map do exactly what you want.

It's a really intuitive API and the documentation is fantastic, so I don't think you'll have any trouble. If you do run into difficulties you know exactly where to come!