javascript - Zooming to center on a map in Google Maps API V3 - Stack Overflow

admin管理员组

文章数量:1321240

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>

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>

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow asked Dec 1, 2011 at 1:17 W0lf7W0lf7 75911 gold badge88 silver badges1515 bronze badges 1

• Have a look at this: stackoverflow./questions/2818984/… – Flukey Commented Dec 1, 2011 at 1:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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 plain
• 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.

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

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./apis/maps/documentation/javascript/examples/index.html

本文标签： javascriptZooming to center on a map in Google Maps API V3Stack Overflow