You can use some ideas from this code. There isn't anything fancy.
- Refactoring
- Make a jQuery plugin
var Map = { | |
markers : [], | |
init : function(settings) { | |
Map.config = { | |
mapOptions : { zoom: 5, | |
center: new google.maps.LatLng(-8.82, -76.41), | |
minZoom: 5, | |
mapTypeId: google.maps.MapTypeId.ROADMAP | |
}, | |
mapPlace : document.getElementById('map'), | |
urlBase : '', | |
shadowUrl : 'http://127.0.0.1/js/map/img/shadow.png', | |
pickerId: '#_escoger' | |
}; | |
$.extend(Map.config, settings); | |
Map.setup(); | |
}, | |
setup : function() { | |
var map = new google.maps.Map(Map.config.mapPlace, Map.config.mapOptions); | |
Map.setMarkers(map); | |
$(Map.config.pickerId).click(function() { | |
$(this).hide(); | |
$('#file_upload, #titulo_verano, #cuerpo_verano, #cuidad_verano').removeAttr('disabled'); | |
Map.showPicker(map); | |
return false; | |
}); | |
google.maps.event.addListener(map, 'bounds_changed', function() { | |
Map.checkBounds(map); | |
}); | |
}, | |
setMarkers : function(map) { | |
var infowindow; | |
//var shadow = new google.maps.MarkerImage(Map.config.shadowUrl); | |
$.getJSON('/static/data/data.json', function(data){ | |
$.each(data.locations, function(i, loc) { | |
var myLatLng = new google.maps.LatLng(loc.lat, loc.lng); | |
var marker = new google.maps.Marker({ | |
position: myLatLng, | |
map: map, | |
title: loc.title, | |
//icon: loc.image, | |
//shadow: shadow | |
}); | |
Map.markers.push(marker); | |
(function(i, marker) { | |
google.maps.event.addListener(marker, 'click', function() { | |
if (!infowindow) { | |
infowindow = new google.maps.InfoWindow(); | |
} | |
infowindow.setContent(loc.description); | |
infowindow.open(map, marker); | |
}); | |
})(i, marker); | |
}); | |
}); | |
}, | |
showPicker : function(map) { | |
Map.clearMakers(); | |
var marker = new google.maps.Marker({ | |
position: map.getCenter(), | |
map: map, | |
draggable: true, | |
animation: google.maps.Animation.DROP, | |
}); | |
$('#lat').val(marker.getPosition().lat()) | |
$('#lng').val(marker.getPosition().lng()) | |
google.maps.event.addListener(marker, 'dragend', function() { | |
$('#lat').val(marker.getPosition().lat()) | |
$('#lng').val(marker.getPosition().lng()) | |
}); | |
}, | |
clearMakers : function() { | |
if (Map.markers) { | |
for (i in Map.markers) { | |
Map.markers[i].setMap(null); | |
} | |
} | |
}, | |
showMarkers : function(map) { | |
if (Map.markers) { | |
for (i in Map.markers) { | |
Map.markers[i].setMap(map); | |
} | |
} | |
}, | |
deleteMarkers : function() { | |
if (Map.markers) { | |
for (i in Map.markers) { | |
Map.markers[i].setMap(null); | |
} | |
Map.markers.length = 0; | |
} | |
}, | |
checkBounds : function(map) { | |
// Getting the idea from http://econym.org.uk/gmap/range.htm | |
// Mike Williams | |
var southWest = new google.maps.LatLng(-20.07, -93.24); | |
var northEast = new google.maps.LatLng(0.05, -62.24); | |
var allowedBounds = new google.maps.LatLngBounds(southWest, northEast); | |
if (allowedBounds.contains(map.getCenter())) { | |
return; | |
} | |
var C = map.getCenter(); | |
var X = C.lng(); | |
var Y = C.lat(); | |
var AmaxX = allowedBounds.getNorthEast().lng(); | |
var AmaxY = allowedBounds.getNorthEast().lat(); | |
var AminX = allowedBounds.getSouthWest().lng(); | |
var AminY = allowedBounds.getSouthWest().lat(); | |
if (X < AminX) {X = AminX;} | |
if (X > AmaxX) {X = AmaxX;} | |
if (Y < AminY) {Y = AminY;} | |
if (Y > AmaxY) {Y = AmaxY;} | |
//alert ("Restricting "+Y+" "+X); | |
map.setCenter(new google.maps.LatLng(Y,X)); | |
// map.fitBounds(bondary); | |
// Fix the map | |
} | |
}; |