Zoom in to marker google.maps

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.

Answers


The solution turned out to be

map.setZoom(17);
map.panTo(curmarker.position);

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);
        }
    });
}

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);
}

Need Your Help

How do I open up my MySQL on my Raspberry Pi for Outside / Remote Connections?

mysql raspberry-pi remote-connection

I have a Raspberry Pi that stores temperature data for homebrewing activity. I am making a Spring MVC application on my computer and I want to tap the data. Both my Pi and my computer are on the lo...