jquery-ui-map controlling zoom level

Question

I need some help in controlling the zoom level in a google map. I'm using the jquery-ui-map plugin but everything I searched for and found doesn't seem to work. Here is what i came up with in following some examples they have.

<script type="text/javascript">
  $(function() {
    // Also works with: var yourStartLatLng = '59.3426606750, 18.0736160278';
    var yourStartLatLng = new google.maps.LatLng();
    $('#map_canvas').gmap('addMarker', {'position': '32.311042,-106.781458', 'bounds': true});
    $('#map_canvas').gmap('zoom', 15);
  });
</script>

Thanks for the help.

Answer 1

You have to setup map and then add marker. For example:

$(document).ready(function(){
    var lat = 32.311042; 
    var lng = -106.781458; 
    var center = new google.maps.LatLng(lat, lng); 

    var mapOpt = {
        center: center, 
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    $('#map_canvas').gmap(mapOpt);

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

And changing zoom parameter you will get different level of details.

Update: example at jsbin