2

I'm working on a mobile app using jQuery Mobile. I also you the plugin "jquery-ui-map" to do my map (that helped alot with display issues using only GMap with jQM).

I'm able to add polyline on the map and it works just fine. But when I try to use the fitBounds method, it doesn't work. In fact, it zoom out alot. But not on my bounds.

Here is my code :

// Added some data, so you can understand the structure
// of variable "plan"
plan[0].lat_a = 45.4681;    plan[0].lng_a = -73.7414;
plan[0].lat_b = 45.6797;    plan[0].lng_b = -74.0386;
plan[1].lat_a = 45.6797;    plan[1].lng_a = -74.0386;
plan[1].lat_b = 48.7753;    plan[1].lng_b = -64.4786;

var polylinesCoords = new Array();
var bounds = new google.maps.LatLngBounds();

// Starting point
var LatLng = new google.maps.LatLng(plan[0].lat_a, plan[0].lng_a);
bounds.extend(LatLng);

// Building the polyline coords and bounds
for (var x=0; x<plan.length; x++) {
    polylinesCoords.push(new google.maps.LatLng(plan[x].lat_a, plan[x].lng_a), new google.maps.LatLng(plan[x].lat_b, plan[x].lng_b));
    LatLng = new google.maps.LatLng(plan[x].lat_b, plan[x].lng_b);
    bounds.extend(LatLng);
}

// Drawing polyline on map
$('#map_canvas').gmap('addShape', 'Polyline', {
    'path': polylinesCoords,
    'strokeColor': '#c00',
    'strokeThickness': 5
});

// «Focus» map on polyline with bounds
var map = $("#map_canvas").gmap("get", "map");
map.fitBounds(bounds);

Everything in this snippet seems to works fine, except for the very last line.

Any ideas ?

Éric Senterre
  • 161
  • 1
  • 1
  • 8
  • I've looked at the vanilla fitBounds and found out that it forces at least a 45-pixel padding between your "bounds" variable and the edge of the map. I'm not sure what this padding is for mobile, but it might be why it is zooming out. – Heitor Chang Apr 05 '12 at 15:03
  • Interesting, I'll try to set a bigger map. I'm at a point where I try anything. But my viewport has 200px in height (and way more large). Even if I remove 45 pixel padding, I still have 110px left. What I see when it's fully zoomed out, may be at most 10 px width & height. Mostly a small spot on the World Map. – Éric Senterre Apr 05 '12 at 18:20
  • Even with a map of 450px x 450px that didn't worked. :( – Éric Senterre Apr 09 '12 at 12:30
  • Sorry it didn't work. I really don't work with maps on mobile, just tried a suggestion. – Heitor Chang Apr 09 '12 at 13:15

1 Answers1

0

You might've missed to center the map to any of your pin. I got your code working with this line of code

$('#map_canvas').gmap('option', 'center', (new google.maps.LatLng(plan[0].lat_a,plan[0].lng_a)));
Hammad
  • 1,268
  • 15
  • 27