Search code examples
jquerygoogle-mapsjquery-ui-map

jquery-ui-map how to set zoom level


I have the following code working fine, but I'm unable to add a zoom level. According to the docs it should work with 'option', 'zoom', 7 but this gives an error: "$("#map_canvas").gmap("option", "zoom", 7).bind is not a function"

Working code, sans zoom, edited. Zoom is always at 1.

$("#map_trigger").click(function(){
        var prop_id = $("#map_canvas").attr("rel");
        $('#map_canvas').gmap({'zoom':6}).bind('init', function(evt, map) {
            $.getJSON( basepath+'properties/get_gps_coords/'+prop_id, function(data) {
                $.each( data.markers, function(i, m) {
                    lat = m.latitude;
                    longitude = m.longitude;
                    $('#map_canvas').gmap(
                        'addMarker', { 'position': new google.maps.LatLng(lat, m.longitude), 'bounds':true }
                    );
                });
            });
        });
    });

How can I add a zoom level to this snippet?


Solution

  • Use:

    $("#map_canvas").gmap({'zoom':7})
    

    The option-method can be used when the map is already initialized and will not return a jQuery-object, so it's not chainable(what will explain the error you got).