44

I can't zoom to a marker properly.

I'm trying to switch the view to a specified marker, but can't ge tit to work.

I've tried

map.setCenter(location);
map.setZoom(20);

and

map.fitBounds(new google.maps.latLngBounds(location,location));

but in the first case, I simply get zoomed in without the center change being registered, and in the second case I get this overview over a huge area, not zoomed in at all.

Perhaps this issue could be solved by setting a timout from setcenter to setzoom, but that's an ugly hack to me, so a prettier solution would be preferred.

How do you guys do this?

Also - if the infowindow could be displayed without changing content, that would really be a plus to, but the most important thing is to zoom into the marker at the right spot, close up.

thank you very much.

1
  • Do you have an online demo for us to see and maybe help further? Feb 21, 2011 at 8:09

3 Answers 3

109

The solution turned out to be

map.setZoom(17);
map.panTo(curmarker.position);
1
  • @codebreaker curmaker is just short for "current marker" it's a marker, that's why I just took the position property of the marker.
    – Jakob
    Feb 9, 2013 at 13:03
11

I thought I would post an answer here as people wanted some example code.

I too needed to be able to zoom in and center as soon as a marker was added to the map.

Hope this helps somebody.

function getPoint(postcode) {

    var geocoder = new google.maps.Geocoder();

    geocoder.geocode( { 'address': postcode + ', UK'}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });

            map.setZoom(10);
            map.panTo(marker.position);
        }
        else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}
3

is this a new instance of a map object you are creating? if so you can just have an object which contains the location and zoom and then pass that object to the map when initalising it like so (taken from the Gmaps basics tutorial http://code.google.com/apis/maps/documentation/javascript/basics.html:

function initialize() {
    var myLatlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
3
  • 3
    no it's a map that has several markers on it, and on the click of a link specific to a marker, I would like to zoom in to that marker.
    – Jakob
    Feb 20, 2011 at 0:58
  • ah okay. well if you arent against it I would try setting a timeout on the setCenter location and see if that works then. google does this themselves in the api so i would think its an advisable way to go. the Map Events section here should help you along your way
    – Will Ayd
    Feb 20, 2011 at 1:36
  • @Jakob I think that's exactly what I'm trying to do. I'm not good at JS, but I think it should involve a script on the link that modifies the existing map... but I don't understand how to do that.
    – rschwieb
    Jul 15, 2018 at 23:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.