Defining a different default zoom for JQuery UI map even with marker

Question

I have been scavenging the web for an answer to this question but basically, I want the code below to do exactly what it's doing....

        $(function() {

            $('#map_canvas').gmap().bind('init', function(ev, map) {
                $('#map_canvas').gmap('addMarker', { 'position': '57.7973333,12.0502107', 'bounds': true }).click(function() {
                    $('#map_canvas').gmap('openInfoWindow', { 'content': '134 Some Street Name, postcode and such' }, this);
                });
            });

        });

    </script>

However, this map view is to zoomed in and I want to be able to control it yet keep it within the bounds. I have tried using:

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

below function but it makes no different whatsoever. How can I control the default zoom of the map before the user has clicked or dragged anything?

Thanks!

Answer 1

Set the zoom in the contructor gmap({zoom:7}). If you set the bounds property to true in the addMarker method, it will override any previous zoom set anywhere alse (by options or in the constructor). Example of setting the zoom and setting the bounds to false:

$('#map_canvas').gmap({'zoom':7, 'center': '57.7973333,12.0502107'}).bind('init', function(ev, map) {
                $('#map_canvas').gmap('addMarker', { 'position': map.getCenter(), 'bounds': false}).click(function() {
                    $('#map_canvas').gmap('openInfoWindow', { 'content': '134 Some Street Name, postcode and such' }, this);
                });
            });