I've got this simple mapModule that works just fine:
mapModule = function(canvasId){
var _canvas,
_gmap,
_geocoder,
_markers = [],
_mapOpts = {
center: new google.maps.LatLng(51.919438, 19.14513599999998),
zoom: 6
};
_init();
//private
function _init(){
_canvas = document.getElementById(canvasId);
_gmap = new google.maps.Map(_canvas, _mapOpts);
//debug/convenience
google.maps.event.addListener(_gmap, 'click', function(event) {
console.log(event.latLng);
});
}
function _checkMarker(marker){
if(typeof marker != 'object' || marker === null)
throw new Error('Marker is not an object')
if(!marker.label)
throw new Error("Marker has no label.")
}
function _rememberMarker(m){
if(!m){
throw new Error("Failed to add marker");
}else{
_markers.push(m);
}
}
//public
var addMarkerByLatLen = function(m){
_checkMarker(m);
if(isNaN(m.lat) || isNaN(m.len))
throw new Error("Invalid position. Lat: "+m.lat+" Len:"+m.len)
var marker = new google.maps.Marker({
position: new google.maps.LatLng(m.lat,m.len),
map: _gmap,
title: m.label
});
_rememberMarker(marker);
},
addByLatLen = function(markersArr){
for(var i = 0; i < markersArr.length; i++){
try{
addMarkerByLatLen(markersArr[i]);
}catch(err){
console.log(err)
}
}
},
updateBounds = function(){
var bounds = new google.maps.LatLngBounds();
for(var i = 0; i < _markers.length; i++){
bounds.extend(_markers[i].getPosition())
}
_gmap.fitBounds(bounds);
if(_gmap.getZoom()> 15){
_gmap.setZoom(15);
}
};
return {
getMap: function(){return _gmap},
getMarkers: function(){return _markers},
addMarkerByLatLen: addMarkerByLatLen,
addByLatLen: addByLatLen,
updateBounds: updateBounds
}
}
but I have a Jasmine 2.0 test that fails:
describe("mapModule", function(){
var mm, $canvas;
beforeEach(function(){
$canvas = $('<div>').attr("id", "map-canvas");
$(document.body).append($canvas);
mm = mapModule("map-canvas");
});
afterEach(function(){
$canvas.remove();
$canvas = null;
mm = null;
})
it("should encompass all added markers", function(done){
var mapModule = mm;
var idleListener = google.maps.event.addListener(mapModule.getMap(), 'idle', function() {
idleListener.remove(); //don't fire again when bounds are updated
mapModule.addByLatLen([
{label:"My marker", lat: 40, len: 20},
{label:"My marker", lat: 42, len: 23},
{label:"My marker2", lat: 47, len: 19},
{label:"My marker3", lat: 59, len: 12}
]);
google.maps.event.addListener(mapModule.getMap(), 'bounds_changed', function() {
console.log("bounds_changed", mapModule.getMap().getBounds().toString())
expect(typeof mapModule.getMap().getBounds()).toBe("object");
expect(isNaN(mapModule.getMap().getBounds().pa.j)).toBe(false);
expect(mapModule.getMap().getBounds().pa.j < 12).toBe(true);
expect(mapModule.getMap().getBounds().pa.k > 23).toBe(true);
expect(mapModule.getMap().getBounds().xa.j < 40).toBe(true);
expect(mapModule.getMap().getBounds().xa.k > 59).toBe(true);
done();
})
mapModule.updateBounds();
});
})
});
I use the module within my application: I add the exact same markers as in the test, call mm.updateBounds(), and the map boundaries include the added markers.
But the test fails:
Expected false to be true.
outputing mm.getMap().getBounds().toString()
revealed that the bounds are broken. They should be:
"((34.865862155014426, -3.857421875), (62.17459747407728, 38.857421875))"
while the test receives:
"((50.44192744802642, -180), (50.44192744802642, 180))"
I know that (-180, 180) means that the map is zoomed out completely, but I still don't know what's wrong with the test (or the code).
The strangest thing is that now I can see the "bounds_changed is fired twice,
Another issue, that Appeared when I introduced "bounds_changed" listener is that apparently there's:
TypeError: currentSpec is null
This happens when the done() once function is executed;
I'm new to both Jasmine and google API so any input would be appreciated.
This Question is not a duplicate of this because the answer to the allegedly duplicated question is already incorporated in the jasmine test code like this:
google.maps.event.addListener(mapModule.getMap(), 'bounds_changed', function() {
besides the problem is not that getBounds() is empty, but that it's broken.