New zoom level sets, but there is no visual change to the map.

[GoogleCodeExporter]

What steps will reproduce the problem?
1.  Create a map with a single marker using the example code (shown below).
2.  Set the "zoom" MapOption using the example code.
3.  An alert shows the zoom level has changed, but visually the map is at the 
default zoom level.

What is the expected output? What do you see instead?

A single marker map that shows more surrounding area... aka: "zoomed out"

What version of the product are you using? On what operating system?

jQuery UI Google map v3 version 3.0-rc1

Windows 7
Chrome 20.0.1132.34 beta-m ...and/or... Firefox 12.0

Please provide any additional information below.

I am rather green with jQuery so this may just be a novice mistake, but I 
cannot seem to figure it out.  I tried setting the zoom option before and after 
initalizing the map, but nothing seems to make any changes to the zoom level.

var zoom = $('#map_canvas').gmap('option', 'zoom');
alert(zoom);  /* this alert shows... 5 */

$('#map_canvas').gmap('option', 'zoom', 7);
var zoom2 = $('#map_canvas').gmap('option', 'zoom');
alert(zoom2); /* this alert shows... 7 */

$('#map_canvas').gmap('addMarker', {'position':'33.6390990,-112.39575760', 
'bounds':true}).click(function() {
    $('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World'}, this);
});
$('#map_canvas').gmap('refresh'); /* I tried this but it did nothing for me */

$('#map_canvas').gmap('option', 'zoom', 7);
var zoom3 = $('#map_canvas').gmap('option', 'zoom');
alert(zoom3); /* this alert shows... 7 */

Original issue reported on code.google.com by david.c....@gmail.com on 18 Jun 2012 at 9:05

[GoogleCodeExporter]

I solved my problem almost instantly after posting it here.  Such is life.

Solution: Create the map and set both zoom and center before adding a marker.  
Also, set 'bounds' to false.

Example that DOES work:
.............

$('#map_canvas').gmap({'zoom':15, 
'center':'33.6390990,-112.39575760'}).bind('init', function() {
    $('#map_canvas').gmap('addMarker', {'position':'33.6390990,-112.39575760', 'bounds':false}).click(function() {
        $('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World'}, this);
    });
});

.............

Notes:
1) "bounds" must be set to false
2) If center is not set it defaults to 0,0

If anyone has a cleaner or more appropriate way to write this code I would 
genuinely appreciate the guidance.

Thank You
~ Kirkland

Original comment by david.c....@gmail.com on 18 Jun 2012 at 9:21

[GoogleCodeExporter]

The zoom problem hung me up for a while too, but after reading Kirkland's post, 
and a little messing around I think I have a solution.

........................

$(function() { 
                demo.add(function() {
                    $('#map_canvas').gmap({'disableDefaultUI':false, 'callback': function() {
                        var self = this;
                        $.getJSON( 'map_details.json', function(data) { 
                            $.each( data.markers, function(i, marker) {
                                self.addMarker({ 'position': new google.maps.LatLng(marker.lat, marker.lng), 'bounds':false } ).click(function() {
                                    self.openInfoWindow({ 'content': 
                                                            '<div class="post">'+
                                                            '<h1>'+marker.title+'</h1>'+
                                                            '<p>'+marker.description+'</p>'+
                                                            '<p>Lattitude: <em>'+marker.lat+'</em></p>'+
                                                            '<p>Longitude: <strong>'+marker.lng+'</strong></p>'+
                                                            '</div>'}, this);
                                });
                            });
                        });
                    }}); 
                }).load();
            });

................

1)  Set "bounds" to false 
2)  Go into "query.ui.map.js" and find this little block-o-code

................

_latLng: function(latLng) {
            if ( !latLng ) {
                return new google.maps.LatLng(0.0, 0.0);
            }
            if ( latLng instanceof google.maps.LatLng ) {
                return latLng;
            } else {
                latLng = latLng.replace(/ /g,'').split(',');
                return new google.maps.LatLng(latLng[0], latLng[1]);
            }
        },

...............

3)  Replace the "(0.0,0.0)" with a lat,lng for the general area your markers 
will be.  This is what I have.

..............

if ( !latLng ) {
                return new google.maps.LatLng(35.483292, -80.959892);

.............

Now you can adjust the zoom in "jquery.ui.map.js"  to whatever you like, and 
your map won't open in the middle of the ocean somewhere.

Good Luck!

-c

Original comment by RobertsJ...@gmail.com on 24 Aug 2012 at 3:51

[GoogleCodeExporter]

Kirkland, you are a lifesaver! Your code works like a charm...on my desktop.  
When I try to open it in Safari on my iPhone, it gets stuck loading, and 
loading, and...no error, no timeout, just loading. Did you get your code to run 
on a mobile device?

Thanks again for your solution!
Ali

Original comment by ali.will...@gmail.com on 30 Aug 2012 at 9:44

[GoogleCodeExporter]

Answered my own question -- helps if you publish the plugin files properly. 
Duh. 
Thanks!

Original comment by ali.will...@gmail.com on 30 Aug 2012 at 10:10

[GoogleCodeExporter]

Have either of you had a problem where your marker becomes uncentered after the 
first display? I have tried resizing, refreshing etc.

Original comment by ali.will...@gmail.com on 31 Aug 2012 at 11:39

[GoogleCodeExporter]

No, but what do you mean by "first display".  Are you refreshing the page via 
AJAX, or is it a full page reload, or... ?

Original comment by david.c....@gmail.com on 31 Aug 2012 at 11:52

[GoogleCodeExporter]

I have an website that returns a list of facilities based upon the user's 
lat/long, with the ability to view a map for any of the listed facilities.

When I click one in the list, it returns the correct map with the marker at 
center.  When I return to the list and click on a different facility map, the 
correct map returns, but the marker is off to the left and I have to drag it 
over in order to see it.  It is a full page reload for every map click.  Here 
is the code (your code, actually):  :-) 

<script type="text/javascript">

$(function () {

     $('#map_canvas').gmap({ 'zoom': 16, 'center': new google.maps.LatLng(Form1.lat.value, Form1.lon.value) }).bind('init', function () {
     $('#map_canvas').gmap('addMarker', { 'position': new google.maps.LatLng(Form1.lat.value, Form1.lon.value), 'bounds': false }).click(function () {
    $('#map_canvas').gmap('openInfoWindow', { 'content': '' }, this);
      });
    });
  });

});

</script>
<div id="map_canvas" style="width:250px;height:250px"></div>

Original comment by ali.will...@gmail.com on 4 Sep 2012 at 6:12

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

So it is the correct marker and general location, but the map is not centered 
properly, correct?  Is it in the top-left corner, or centered vertically?  Have 
you tried to refresh?

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

You can also try clearing the markers, so that the data you pass along through 
the form is "new" each time...

$('#map_canvas').gmap('clear', 'markers');

Original comment by david.c....@gmail.com on 4 Sep 2012 at 7:20

[GoogleCodeExporter]

Yes, the correct marker and general location, just not centered. It is off to 
the top left corner.

Adding $('#map_canvas').gmap('refresh'); and/or 
$('#map_canvas').gmap('clear', 'markers'); to the beginning of the code block 
put me off the coast of Africa, with no marker at all.  Putting it at the end 
of the code block did not appear to do anything at all.

<script type="text/javascript">

    $(function () {

        $('#map_canvas').gmap('refresh');
        $('#map_canvas').gmap('clear', 'markers');
        $('#map_canvas').gmap({ 'zoom': 16, 'center': new google.maps.LatLng(Form1.lat.value, Form1.lon.value) }).bind('init', function () {
        $('#map_canvas').gmap('addMarker', { 'position': new google.maps.LatLng(Form1.lat.value, Form1.lon.value), 'bounds': false }).click(function () {
        $('#map_canvas').gmap('openInfoWindow', { 'content': '' }, this);

            });
        });
    });   
</script>

Original comment by ali.will...@gmail.com on 4 Sep 2012 at 9:36

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Try...

$('#map_canvas').gmap('refresh');
and/or
$('#map_canvas').gmap('clear', 'markers');

...on the page with the form, not the page with the map.  That way, when the 
user clicks the back button is clears the data and starts new again when they 
submit the form (click the link).

Usually when the marker is in the top left corner it means that data from the 
last map load is being used with the current map load.  In most cases 
.gmap('refresh') is the fix, its just a matter of figuring out the sequence of 
events and refreshing at the right time.

Also clear your browser cache between tests.

Original comment by david.c....@gmail.com on 4 Sep 2012 at 9:46

[GoogleCodeExporter]

Well, apparently I can't find the magical sequence of events.  I've got the 
refresh and the clear markers in the listing of facilities and the map still 
won't display correctly.  Grrrrr....

Original comment by ali.will...@gmail.com on 4 Sep 2012 at 10:53

[GoogleCodeExporter]

It doesn't appear that the data from the last map load is the problem. I tried 
setting the zoom to 10 (which is city view) and picking two facilities that are 
next to each other. The second map still was off to the left, not even showing 
the city name.

Original comment by ali.will...@gmail.com on 4 Sep 2012 at 11:31

[GoogleCodeExporter]

I looked over the code again and I think I just realized the problem.  To 
recenter the map you need to use...

.gmap('option', 'center', new google.maps.LatLng(Form1.lat.value, 
Form1.lon.value)

...or something like that.  Basically the center of the map is cached when it 
first loads.  Since its technically the same map (same selector) with different 
data you need to use 'option' to re-declare the center.  I may have the exact 
syntax incorrect since I'm going off memory and its been awhile.  Check the 
docs for how to update options.

Hopefully the third time is a charm... I'm crossing fingers for you.

P.S. I would still clear the markers on the listing facilities page even though 
it doesn't seem to have a direct impact in regards to this specific issue.

Original comment by david.c....@gmail.com on 4 Sep 2012 at 11:34

[GoogleCodeExporter]

I will try that...thank you so much for your help.

Original comment by ali.will...@gmail.com on 4 Sep 2012 at 11:44

[GoogleCodeExporter]

Use addBounds() to add some offset ...

Original comment by lordm...@googlemail.com on 15 Jul 2013 at 1:26

[GoogleCodeExporter]

Finally found a way around this, by setting the zoom level at the callback of 
the marker that has the bounds attribute to true.
self.addMarker({'position': '33.6390990,-112.39575760', 'bounds': true}, 
function(){self.option('zoom',7)});

set the bounds attribute of the marker you want to center at to true, this will 
move the map to that position and in its callback change the zoom level you 
want (adding it after will not change the map zoom level unless you redraw the 
map).

Usage Example:
This will create a map
set a marker at the user's current location
center it on the map
and set its zoom level to 7

$('#map_canvas').gmap({'mapTypeControl':false, 'disableDefaultUI':false, 
'callback': function() {
        var self = this;
    self.getCurrentPosition(function(position, status) {
    if ( status === 'OK' ) {
        $clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        self.set('clientPosition', $clientPosition);
        self.addMarker({'position': self.get('clientPosition'), 'bounds': true}, function(){self.option('zoom',7)});
    }
    });   
}});

Original comment by hpa...@gmail.com on 6 Dec 2013 at 12:06

[GoogleCodeExporter]

Hai,
                        $('#map_canvas').gmap('openInfoWindow', {'content': 'NTL Taxi( NON AC, 4)'}, this);

 For this coding.I need to insert button on content. When i click the button, a new page will open. ls give sollution for this

Original comment by srivasanthan143 on 9 May 2014 at 5:08