Google Maps API v3 recenter the map to a marker

Question

i am searching for a way to recenter (focus) the map if an marker is outside the map. For example if you click on a marker which is not in your viewarea ... Marker 1: New York Marker 2: SanFransisco

in V2 i make this way...but for v3 the containsLatLng needs an extra libary and did not work for me ...(see my other post: Google Maps v3 map.getBounds().containsLatLng is not a function) is they any other way to focus to a marker position??

update:

        if ((!map.getBounds().contains(marker.getPosition())) & (showAllCategoryElements == 0)) {
        var newCenterPointLng = (map.getBounds().getCenter().lng() + marker.getPosition().lng()) / 2;
        var newCenterPointLat = (map.getBounds().getCenter().lat() + marker.getPosition().lat()) / 2;

        map.panTo(marker.getPosition());
        //map.setCenter(new google.maps.LatLng(newCenterPointLat, newCenterPointLng));

        if (!map.getBounds().contains(marker.getPosition())){
            map.zoomOut();
        } 
    }

Reluct

Are you asking for code which works in Version 3 or Version 2? You have both tags and Version 2 code. – Germangermana

Answer 1

The method you want is contains(), not containsLatLng(). map.getBounds().contains(marker.getPosition())

You could use either the setCenter() or panTo() methods of the map to center on the marker position: map.setCenter(marker.getPosition()) or map.panTo(marker.getPosition())

So if I understand correctly what you are trying to do, it should look like this:

if ((!map.getBounds().contains(marker.getPosition())) && (showAllCategoryElements == 0)) { //Note the double &  
    map.setCenter(marker.getPosition());  
    //OR map.panTo(marker.getPosition());  
}

Amazonite

with your tips i changed it (see the top of my post)...map.setCenter is not required if i use PanTo? Now i have an "a is undefined" in "maps.gstatic.com/cat_js/intl/de_de/mapfiles/api-3/9/2/… file" – Reluct

Updated code above. You may need to post more code if you continue to get an error. – Amazonite

Answer 2

Its actually not that complex, its just a bit tricky.

When creating your click event on a marker you can get the long and latitude which you declared to make the points and pan to this location.

In my code its like this, long and lat are declared as variables gotten from html:

    var longitude = item.querySelector('#longitude').innerText;
    var latitude = item.querySelector('#latitude').innerText;

    const marker = new google.maps.Marker({
            title: titel,
            icon: "[url to marker]",
            position: new google.maps.LatLng(longitude, latitude),
            map: map
        });

and then for the panning to location on long lat.

        google.maps.event.addListener(marker, "click", function() {
            // JQuery to close all other markers before opening this one
            jQuery(".gm-ui-hover-effect").click();

            // Pan to long lat defined inside the marker locations
            var laLatLng = new google.maps.LatLng(longitude, latitude);
            map.panTo(laLatLng);
            map.setZoom([place value for zoom level here]);


            infowindow.open(map, this);
        });

        infowindow.close();

Note: in my code this is done in a for loop to get all the marker locations, this should not matter for most of the code but is worth to note if you directly copy paste this code.

Rosiorosita