Google Maps Zoom in on Marker with One Click Multiple Markers

javascript google-maps google-maps-api-3 google-maps-markers dom-events

28,647

Solution 1

Looks like you have a scope problem.

Try this as eventlistener:

google.maps.event.addListener(marker, 'click', function() {
map.panTo(this.getPosition());
});

this works here:

http://jsfiddle.net/iambnz/mQEwh/

Solution 2

Try This to get the smoothZoom to work:

Remove the "self" from the line in the smoothZoom function i.e

else {
                y = google.maps.event.addListener(map, 'zoom_changed', function(event){
                    google.maps.event.removeListener(y);
                    smoothZoom(map, max, cnt + 1);

Basically It wasn't working for me, so I brought up the error console on my browser and so it was erroring at this point saying that self.smoothZoom wasn't a function.

I removed the "self" and it works. Had some playing to do with the setTimeout variable to make it smoother. But at least it works :)

28,647

Author by

Charles Williams

I am a Software Developer and freelancer who has knowledge of C++, C#, ASP.NET Python, PHP, HTML, CSS, JavaScript, and multiple JS/Python frameworks. My past projects include front-end development, SaaS software solutions, MEAN.js, Ember.js, Semantic-UI, React, Bootstrap 4, Moment.js, FullCalendar, Umbraco CMS, and working with the Django framework. I am currently "Solving Water" as a Front-End Engineer. I am always trying to learn more. #SOreadytohelp

Updated on July 01, 2022

Comments

Charles Williams almost 2 years

I have read a lot of other posts here on StackOverflow and in Google Search, and I still cannot get this to work correctly. I think it has something to do with my for loop. I already set a mouseover event for the info windows, but what I want is for the map to zoom in on a marker when you click it and center it in the map. I have tried:

google.maps.event.addListener(marker,'click',function(e) {
                map.setZoom(9);
                map.setCenter(e.latLng);
            });

Which has worked the best but still doesn't always center on the marker, especially after multiple clicks. Sometimes the marker is not even in view.

The code snippet that I really wanted to use is this:

// add the double-click event listener
            google.maps.event.addListener(marker, 'dblclick', function(event){
                map = marker.getMap();

                map.setCenter(overlay.getPosition()); // set map center to marker position
                smoothZoom(map, 12, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level
            })


            // the smooth zoom function
            function smoothZoom (map, max, cnt) {
                if (cnt >= max) {
                        return;
                    }
                else {
                    y = google.maps.event.addListener(map, 'zoom_changed', function(event){
                        google.maps.event.removeListener(y);
                        self.smoothZoom(map, max, cnt + 1);
                    });
                    setTimeout(function(){map.setZoom(cnt)}, 80);
                }
            }

Because it is suppose to have smooth zoom. However I can't get this one to work hardly at all. Most clicks on the markers go to Long Island NY or nowhere.

My code follow:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=(api)&sensor=false">
</script>
<script type="text/javascript">
google.maps.visualRefresh = true;

function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(42, -97),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var jobs = [
        ['Taylor', 'Texas', 30.570155, -97.409649, 'machine install and training'],
        ['Fort Riley', 'Kansas', 39.104172, -96.735558, 'machine install and training'],
        ['Toronto', 'Ontario, Canada', 43.653226, -79.383184, 'machine install and training'],
        ['Spokane', 'Washington', 47.658780, -117.426047, 'Machine install and training'],
        ['New Paris', 'Indiana', 41.504848, -85.826487, 'machine install'],
        ['Charleston', 'Mississippi', 34.00711, -90.055194, 'machine install and training'],
        ['Tinley Park', 'Illinois', 41.596405, -87.785119, 'training.'],
        ['Savannah', 'Georgia', 32.08078, -81.090719, 'machine install and training'],
        ['Long Island', 'New York', 40.852505, -73.135849, 'Machine install and training']
    ];

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    var infoWindow = new google.maps.InfoWindow;

        for (var i = 0; i < jobs.length; i++) {
            var city = jobs[i][0];
            var state = jobs[i][1];
            var lat = jobs[i][2];
            var lng = jobs[i][3];
            var desc = jobs[i][4];
            var z = i;
            var myLatLng = new google.maps.LatLng(lat, lng);

            var content = '<div class="map-content"><h3>' + city + ', ' + state +
                 '</h3>' + desc + '</div>';

            var marker = new google.maps.Marker({
                map: map,
                title: city + state,
                position: myLatLng,
                zIndex: z
            });

            google.maps.event.addListener(marker, 'mouseover', (function(marker, content) {
                return function() {
                    infoWindow.setContent(content);
                    infoWindow.open(map, marker);
                }
            })(marker, content));

            // add the double-click event listener
            google.maps.event.addListener(marker, 'dblclick', function(event){
                map = marker.getMap();

                map.setCenter(overlay.getPosition()); // set map center to marker position
                smoothZoom(map, 12, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level
            })


            // the smooth zoom function
            function smoothZoom (map, max, cnt) {
                if (cnt >= max) {
                        return;
                    }
                else {
                    y = google.maps.event.addListener(map, 'zoom_changed', function(event){
                        google.maps.event.removeListener(y);
                        self.smoothZoom(map, max, cnt + 1);
                    });
                    setTimeout(function(){map.setZoom(cnt)}, 80);
                }
            }
        }
}

  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
    <div id="map-canvas"/>
</body>
</html>

If I remove the code for attempting a zoom click event and take it out of the loop, it only works for my long island marker (since that is the last information in the array that is processed). Any help on how to get this to center on the markers on click would be great. I can't really find anything searching that has been implemented on arrays and loops. I am new to the Google API, and I have only done basic Javascript on top of that.

EDIT: An example of this is here.

Charles Williams almost 11 years

So simple. I tried another variation earlier with .panTo, but it didn't work correctly either. I just added map.setZoom(9); to this above and it works great. However I cannot get the smoothZoom function to work. Tried many variations of that too, but as long as I can zoom in I guess with the marker centered, I can make this work. Thanks!