<div id="map_canvas" style="width:100%; height:500px; background-color: Red"> </div>
<div id="mapError"> </div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function() {
var latlng = new google.maps.LatLng(33.8778954, -117.575043);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListenerOnce(map, 'idle', function(){
update(map);
});
google.maps.event.addListener(map, 'zoom_changed', update(map));
GEvent.addListener(map, "dragend", function() { update(); });*/
});
function update(map) {
var latLng = map.getCenter();
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var input = { lineage: '0,6,', left: southWest.lng(), right: northEast.lng(), bottom: southWest.lat(), top: northEast.lat() };
$("#mapError").hide();
$.getJSON('<url>/List?&jsoncallback=?', input, function(data) {
if (data.error) {
$("#mapError").text(data.error).show().css({ top:$('#map').offset().top, left:$('#map').offset().left });
return false;
}
$.each(data.places, function() {
var place = this;
var posn = new google.maps.LatLng(place.Latitude, place.Longitude);
var txt = '<a href="/Place/Index/' + place.Id + '/' + place.FriendlyUrlName + '">' + place.Name + '</a><br/>' + place.MeetCount + ' Upcoming Meets<br/><a href="/Meet/New/6?placeId=' + place.Id + '">Add Meet</a>';
var marker = new google.maps.Marker({
position: posn,
map: map,
text: place.Name
});
var infowindow = new google.maps.InfoWindow({
content: txt
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map,marker);
});
});
});
}
</script>
|
