CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
W0lf7
W0lf7

Reputation: 759

Zooming to center on a map in Google Maps API V3

I'm new to using google maps and am trying to find out how to restrict the zoom function so that it does not zoom anywhere except of the center of the map and not zoom to the mouse point. Basically it zooms to the center of the returned map no matter where your mouse pointer is on the map as opposed to zooming where the mouse pointer is located on the map. I don't even know if this is possible currently, some help would be appreciated.

<script type="text/javascript">
        function initialize() {
        var latlng = new google.maps.LatLng(51.285583, 1.091045);
        var myOptions = {
        zoom: 15,
        center: latlng,
        scrollwheel: true,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        draggable: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(51.285826, 1.089973),
            map: map,
            title: 'Run of The Mill',
            clickable: true
            });
        }
    </script>

Upvotes: 5

Views: 3813

Answers (3)

here
here

Reputation: 2859

Or handle this by re-centering the map on zoom change. This preserves the expected functionality on double click and scroll wheel.

google.maps.event.addListener(map,'zoom_changed',function () {
  map.setCenter(new google.maps.LatLng(47.61388802057299,-122.31870898147581));
})

Upvotes: 2

Tomas
Tomas

Reputation: 59435

There are several zoom types:

  • using zoom control - that zooms to the center of the map
  • using scroll wheel - that zooms to the mouse pointer as you complain
  • using double click - that first centers the place under the mouse pointer and then zooms

So if you want only the first zoom type, you can disable the other two by setting disableDoubleClickZoom and scrollwheel map options to false.

Moreover, you might handle dblclick map event (scroll wheel event is not so straightforward, but maybe you'll find a way how to handle the scroll wheel in javascript too) and in this handler just change the map scale using map.setZoom(). The map center will stay the same. Fairly easy.

Upvotes: 5

Bill Blankenship
Bill Blankenship

Reputation: 3356

From what I can see in your code you are zooming on the latlng variable that you declared above. That is correct. You myOptions variable is then passed into your new maps declaration. So you should be centered on 51.285583, 1.091045, which is Caterbury Kent in the UK.

If that is where your mouse is pointing it is working, if this doesn't help I would suggest copying an example from the google examples and cutting out what you don't need for your first demo.

http://code.google.com/apis/maps/documentation/javascript/examples/index.html

Upvotes: 0

Related Questions