Open GoogleCodeExporter opened 9 years ago
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
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
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
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
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
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
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
[deleted comment]
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
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
[deleted comment]
[deleted comment]
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
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
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
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
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
Use addBounds() to add some offset ...
Original comment by lordm...@googlemail.com
on 15 Jul 2013 at 1:26
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
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
Original issue reported on code.google.com by
david.c....@gmail.com
on 18 Jun 2012 at 9:05