jquery-ui-map how to set zoom level and center the map

Question

how do I set the zoom level in this code

    $(function() {          


                $('#map_canvas').gmap({ 'disableDefaultUI':true,  'callback': function() {
                    var self = this;
                    $.getJSON( 'location1.php', function(data) { 
                        console.log(data);
                        $.each( data[0].markers, function(i, marker) {                              
                                self.addMarker({ 'position': new google.maps.LatLng(marker.latitude, marker.longitude) } ).click(function() {
                                self.openInfoWindow({ 'content': marker.content }, this);
                            });
                        });
                    });



                     self.getCurrentPosition(function(position, status) {
                        if ( status === 'OK' ) {
                             self.set('clientPosition', new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
                             self.addMarker({'position': self.get('clientPosition'), 'bounds': false});
                             self.addShape('Circle', { 'strokeWeight': 0, 'fillColor': "#008595", 'fillOpacity': 0.25, 'center': self.get('clientPosition'), 'radius': 24140.16, clickable: false });                            
                        }
                     });
                }}).load();

        });

i tried adding zoom: 6 but it wont center the map, and i am trying to center the map using geolocation

so i guess my question would be how do i center the map to the geolocation coordinates and set the zoom level

PS i have bounds to false

thanks in advance

Answer 1

try this:

 self.getCurrentPosition(function(position, status) {
                    if ( status === 'OK' ) {
                         var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                         self.addMarker({'position': point, 'bounds': true});
                         self.addShape('Circle', { 'strokeWeight': 0, 'fillColor': "#008595", 'fillOpacity': 0.25, 'center': point, 'radius': 24140.16, clickable: false });
                         self.gmap('option', 'zoom', 12) 
                    }
                 });
            };

Alternatively, you could leave bounds: false and set the map's center by $("#map_canvas").('option', 'center', point);