jquery-ui-map set zoom level

Question

I have the following code to how a map. Everything works fine except the zoom parameter. No matter what I set for zoom, it always shows the same zoom level. What can I do?

$('#pagemap').live("pageshow", function() {

            $('#map_canvas').gmap().bind('init', function(evt, map) {

                $('#map_canvas').gmap('getCurrentPosition', function(position, status) {

                        if ( status === 'OK' ) {

                            var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                            $('#map_canvas').gmap('option', 'mapTypeId', google.maps.MapTypeId.SATELLITE);

                            $('#map_canvas').gmap('option', 'zoom', 13);            

                            $('#map_canvas').gmap('addMarker', {'position': clientPosition, 'bounds': true});

                        }
                });   
            });
      });

Answer 1

Try this,look at this " zoom: 9" in code for zoom level ...

<div id="MyDivScrolling">
    <div>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC8KY7rkZP7Xyq5oVM0nssUc4OPIP7MQtw&callback=initMap"></script>
        <script type="text/javascript">
            var markers = [{
            "title": 'Havana',
            "lat": '23.1330200',
            "lng": '-82.3830400',
            "description": 'José Martí International Airport, Havana'
        }
    ,
         {
             "title": 'Tampa',
             "lat": '27.964157',
             "lng": '-82.452606',
             "description": 'Tampa International Airport, Tampa'
         }
    ,
         {
             "title": 'Orlando',
             "lat": '28.538336',
             "lng": ' -81.379234',
             "description": 'Orlando International Airport, Orlando'
         }
    ,
        {
            "title": 'Havana',
            "lat": '23.1330200',
            "lng": '-82.3830400',
            "description": 'José Martí International Airport, Havana'
        }

    ,
        {
            "title": 'Havana',
            "lat": '23.1330200',
            "lng": '-82.3830400',
            "description": 'José Martí International Airport, Havana'
        }
      ,
        {
            "title": 'Miami',
            "lat": '25.7742700',
            "lng": '-80.1936600',
            "description": 'Miami International Airport, Miami'
        }
    ,
        {
            "title": 'Camagüey-Ignacio Agramonte',
            "lat": '21.416666666667',
            "lng": '-77.866666666667 ',
            "description": 'Camagüey-Ignacio Agramonte Airport, Camagüey'
        }


         ,
          {
              "title": 'Camagüey-Ignacio Agramonte',
              "lat": '21.416666666667',
              "lng": '-77.866666666667 ',
              "description": 'Camagüey-Ignacio Agramonte Airport, Camagüey'
          }
           ,
         {
             "title": 'Tampa',
             "lat": '27.964157',
             "lng": '-82.452606',
             "description": 'Tampa International Airport, Tampa'
         }];
            window.onload = function () {
                var mapOptions = {
                    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                    zoom: 9,
                    mapTypeId: google.maps.MapTypeId.Streapmap
                };
                var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                var infoWindow = new google.maps.InfoWindow();
                var lat_lng = new Array();
                var latlngbounds = new google.maps.LatLngBounds();
                for (i = 0; i < markers.length; i++) {
                    var data = markers[i]
                    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                    lat_lng.push(myLatlng);
                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map,
                        title: data.title
                    });
                    latlngbounds.extend(marker.position);
                    (function (marker, data) {
                        google.maps.event.addListener(marker, "click", function (e) {
                            infoWindow.setContent(data.description);
                            infoWindow.open(map, marker);
                        });
                    })(marker, data);
                }
                map.setCenter(latlngbounds.getCenter());
                map.fitBounds(latlngbounds);

                //***********ROUTING****************//

                //Intialize the Path Array
                var path = new google.maps.MVCArray();

                //Intialize the Direction Service
                var service = new google.maps.DirectionsService();

                //Set the Path Stroke Color
                var poly = new google.maps.Polyline({ map: map, strokeColor: 'Blue' });

                //Loop and Draw Path Route between the Points on MAP
                for (var i = 0; i < lat_lng.length; i++) {
                    if ((i + 1) < lat_lng.length) {
                        var src = lat_lng[i];
                        var des = lat_lng[i + 1];
                        path.push(src);
                        poly.setPath(path);
                        service.route({
                            origin: src,
                            destination: des,
                            travelMode: google.maps.DirectionsTravelMode.DRIVING
                        }, function (result, status) {
                            if (status == google.maps.DirectionsStatus.OK) {
                                for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                                    path.push(result.routes[0].overview_path[i]);
                                }
                            }
                        });
                    }
                }
            }
        </script>
        <div class="MainSliderItem2 ImagesContainerItem">
            <div id="dvMap" style="width: 100%;height: 490px;position: relative;overflow: hidden;background-color: rgb(229, 227, 223);max-width: 80%;margin: 98px auto;">
            </div>
        </div>
    </div>
</div>

Answer 2

I was facing a problem with that solution. If I set bounds to false, the map remains centered in its initial center coordinates. Ok that. So why my map was centered at a point with a pin far away? Ok, no problem. But if I still want to set a specific zoom level after adding a marker?

$("your-selector").gmap('addMarker', { 
    'position': latlng, 
    'bounds': true
}, function(map, marker) {
    map.set('zoom', 12);
}).click(function() {
    $(this.container).gmap('openInfoWindow', { 'content': 'TEXT_AND_HTML_IN_INFOWINDOW' }, this);
});

You just callback gmap function. But people, isn't it time to correct all broken links on API documentation for this plugin? Isn't it time to write well specified and clear Javascript documentation for any plugin? Let's help each other, this way is quite complicated. We are losing much time.

Answer 3

you need to change the 'bounds' option of the marker to false.

$('#map_canvas').gmap('addMarker', {'position': clientPosition, 'bounds': false});

If you set the property bounds to true the map will calculate the viewport and zoom automagically, overriding any zoom set in the contructor Blockquote

this is a link for more informations