CODEWITHSUNDEEP
jquery-uimapszooming
Chimp
Chimp

Reputation: 51

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

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!

Upvotes: 5

Views: 7578

Answers (3)

Gaurav
Gaurav

Reputation: 21

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

Change the 'bounds' to false whenever you add a marker. Then you can set whatever zoom level you like.

Upvotes: 2

johansalllarsson
johansalllarsson

Reputation: 927

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);
                });
            });

Upvotes: 8

Jeffrey S. Benson
Jeffrey S. Benson

Reputation: 11

The easiest way I found was to go into jquery.ui.map.js and change the default set there. It's easy. I set mine to 15.

options: {
center: (google.maps) ? new google.maps.LatLng(0.0, 0.0) : null,
mapTypeId: (google.maps) ? google.maps.MapTypeId.ROADMAP : null,
zoom: 15
},

Upvotes: 1

Related Questions