Javier Álvarez Medina
14 years ago
parent
06ad2adbc4
commit
bc2c50b1fc
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 762 B |
|
After Width: | Height: | Size: 340 B |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,235 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset=utf-8 />
|
||||||
|
<title>Clubs - Mashup</title>
|
||||||
|
<link rel="shortcut icon" href="/favicon/favicon_32x32.ico" />
|
||||||
|
<link href="/stylesheets/reset.css" media="screen" rel="stylesheet" type="text/css" />
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
body {position:relative; background:#2D3451;}
|
||||||
|
/*HEADER*/
|
||||||
|
header {width:900px; height:100px; margin:0 auto; padding:20px 0 50px 0; background:none;}
|
||||||
|
header a.logo {float:left; width:200px; height:100px; margin:21px 0 0 0; background:url('/images/admin/others/logo_mashup.png') no-repeat 0 0; text-indent:-9999px;}
|
||||||
|
section.map {position:relative; margin:0 auto; width:900px; height:600px; -wekit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; border:1px solid black;}
|
||||||
|
section.map div#map {float:left; width:900px; height:600px;}
|
||||||
|
section.map span.top-left {position:absolute; width:5px; height:5px; background-image:url('/images/admin/others/corners_mashup.png');top:-1px; left:-1px; background-position:0 0;}
|
||||||
|
section.map span.top-right {position:absolute; width:5px; height:5px; background-image:url('/images/admin/others/corners_mashup.png');top:-1px; right:-1px; background-position:-5px 0;}
|
||||||
|
section.map span.bottom-left {position:absolute; width:5px; height:5px; background-image:url('/images/admin/others/corners_mashup.png');bottom:-1px; left:-1px; background-position:0 -5px;}
|
||||||
|
section.map span.bottom-right {position:absolute; width:5px; height:5px; background-image:url('/images/admin/others/corners_mashup.png');bottom:-1px; right:-1px; background-position:-5px -5px;}
|
||||||
|
section.map p.loading {position:absolute; display:none; top:10px; left:50%; margin:0 0 0 -47px; padding:5px 30px 5px 10px; background:url('/images/admin/others/activity_indicator.gif') no-repeat 68px 5px rgba(0,0,0,0.9);
|
||||||
|
-wekit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; font:normal 15px Arial; color:white;}
|
||||||
|
/*Infowindow*/
|
||||||
|
a.clubMarker {float:left; display:block; width:25px; height:25px; background:url("/images/admin/others/marker.png") no-repeat 0 0; text-indent:-9999px;}
|
||||||
|
a.clubMarker:hover {cursor:pointer;}
|
||||||
|
div.hidden {position:absolute; top:-200px; left:-105px; display:none; width:233px; height:207px; margin:0; padding:0; background:url("/images/admin/others/infowindow.png") no-repeat 0 0;}
|
||||||
|
div.hidden a.close {position:absolute; right:1px; top:0px; width:21px; height:21px; background:url("/images/admin/others/close.png") no-repeat 0 0; text-indent:-9999px;}
|
||||||
|
div.hidden a.close:hover {background-position:0 -21px;}
|
||||||
|
div.hidden h3 {float:left; width:193px; margin:20px 0 0 20px; font:bold 16px "Helvetica",Arial; color:#333333; letter-spacing:-1px;}
|
||||||
|
div.hidden div.content {float:left; width:193px; margin:0 0 0 20px;}
|
||||||
|
div.hidden div.content img {float:left; width:50px; margin:10px 10px 10px 0; border:1px solid black;}
|
||||||
|
div.hidden div.content p {float:none; padding:8px 0 0 0; font:normal 14px Arial; color:#666666;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script src="/javascripts/plugins/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
|
||||||
|
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false®ion=ES&language=ES"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<a class="logo" href="/">CartoDB</a>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="map">
|
||||||
|
<div id="map"></div>
|
||||||
|
<span class="top-right"></span>
|
||||||
|
<span class="top-left"></span>
|
||||||
|
<span class="bottom-left"></span>
|
||||||
|
<span class="bottom-right"></span>
|
||||||
|
<p class="loading">Loading</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
var map;
|
||||||
|
var bounds = new google.maps.LatLngBounds();
|
||||||
|
|
||||||
|
jQuery(function($) {
|
||||||
|
showLoader();
|
||||||
|
|
||||||
|
var myOptions = {
|
||||||
|
zoom: 6,
|
||||||
|
center: new google.maps.LatLng(40.4166909, -3.7003454),
|
||||||
|
disableDefaultUI: true,
|
||||||
|
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||||
|
}
|
||||||
|
map = new google.maps.Map(document.getElementById("map"),myOptions);
|
||||||
|
|
||||||
|
var current_position;
|
||||||
|
|
||||||
|
if (google.loader.ClientLocation) {
|
||||||
|
current_position = new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);
|
||||||
|
getNearClubs(current_position);
|
||||||
|
} else {
|
||||||
|
if (navigator.geolocation){
|
||||||
|
navigator.geolocation.getCurrentPosition(function(position){
|
||||||
|
current_position = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
|
||||||
|
getNearClubs(current_position);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function showLoader() {
|
||||||
|
$('p.loading').fadeIn();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function hideLoader() {
|
||||||
|
$('p.loading').fadeOut();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function getNearClubs(position) {
|
||||||
|
//Marker with user position
|
||||||
|
map.setCenter(position);
|
||||||
|
bounds.extend(position);
|
||||||
|
map.setZoom(15);
|
||||||
|
var marker = new google.maps.Marker({position: position, map: map,title:"Your position!"});
|
||||||
|
|
||||||
|
|
||||||
|
//Club Markers
|
||||||
|
//Get other markers
|
||||||
|
// example - 40.41356139992232, -3.695676326751709
|
||||||
|
var club_marker = new ClubMarker(new google.maps.LatLng(40.4222594, -3.6996326),'',map);
|
||||||
|
bounds.extend(new google.maps.LatLng(40.4222594, -3.6996326));
|
||||||
|
map.fitBounds(bounds);
|
||||||
|
|
||||||
|
|
||||||
|
hideLoader();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function ClubMarker(latlng, info, map) {
|
||||||
|
this.latlng_ = latlng;
|
||||||
|
this.inf = info;
|
||||||
|
this.map_ = map;
|
||||||
|
|
||||||
|
this.offsetVertical_ = -12;
|
||||||
|
this.offsetHorizontal_ = -13;
|
||||||
|
this.height_ = 25;
|
||||||
|
this.width_ = 25;
|
||||||
|
|
||||||
|
this.setMap(map);
|
||||||
|
}
|
||||||
|
|
||||||
|
ClubMarker.prototype = new google.maps.OverlayView();
|
||||||
|
|
||||||
|
ClubMarker.prototype.draw = function() {
|
||||||
|
|
||||||
|
var me = this;
|
||||||
|
var num = 0;
|
||||||
|
|
||||||
|
var div = this.div_;
|
||||||
|
if (!div) {
|
||||||
|
div = this.div_ = document.createElement('DIV');
|
||||||
|
$(div).addClass('clubMarker');
|
||||||
|
div.style.border = "none";
|
||||||
|
div.style.position = "absolute";
|
||||||
|
div.style.width = '25px';
|
||||||
|
div.style.height = '25px';
|
||||||
|
|
||||||
|
|
||||||
|
var content = ""+
|
||||||
|
"<a class='clubMarker'>marker</a>"+
|
||||||
|
"<div class='hidden'>"+
|
||||||
|
"<a href='#close' class='close'>close</a>"+
|
||||||
|
"<h3>Bonito var gay chuequeño</h3>"+
|
||||||
|
"<div class='content'>"+
|
||||||
|
"<img src='http://chengdu.zonalibre.org/archives/bar%20gay%20patrocinado%20por%20Barcadi.JPG'/>"+
|
||||||
|
"<p>En esta pequeña y humilde oficina se va celebrar una de las mayores fiestas gay del año, como anticipo el Love Gay Parade 2011. Fiestón padre.</p>"+
|
||||||
|
"</div>"+
|
||||||
|
"</div>";
|
||||||
|
|
||||||
|
$(div).append(content);
|
||||||
|
|
||||||
|
$('a.close').live('click',function(ev){
|
||||||
|
ev.stopPropagation();
|
||||||
|
ev.preventDefault();
|
||||||
|
$('div.hidden').hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
$('a.clubMarker').live('click',function(ev){
|
||||||
|
ev.stopPropagation();
|
||||||
|
ev.preventDefault();
|
||||||
|
me.moveMaptoOpen();
|
||||||
|
$('div.hidden').hide();
|
||||||
|
$(this).parent().children('div.hidden').show();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var panes = this.getPanes();
|
||||||
|
panes.floatPane.appendChild(div);
|
||||||
|
}
|
||||||
|
|
||||||
|
var pixPosition = me.getProjection().fromLatLngToDivPixel(me.latlng_);
|
||||||
|
if (pixPosition) {
|
||||||
|
div.style.width = me.width_ + 'px';
|
||||||
|
div.style.left = (pixPosition.x + me.offsetHorizontal_) + 'px';
|
||||||
|
div.style.height = me.height_ + 'px';
|
||||||
|
div.style.top = (pixPosition.y + me.offsetVertical_) + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
ClubMarker.prototype.remove = function() {
|
||||||
|
if (this.div_) {
|
||||||
|
this.div_.parentNode.removeChild(this.div_);
|
||||||
|
this.div_ = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ClubMarker.prototype.hide = function() {
|
||||||
|
if (this.div_) {
|
||||||
|
$(this.div_).find('div').fadeOut();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ClubMarker.prototype.getPosition = function() {
|
||||||
|
return this.latlng_;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
ClubMarker.prototype.moveMaptoOpen = function() {
|
||||||
|
var left = 0;
|
||||||
|
var top = 0;
|
||||||
|
|
||||||
|
var pixPosition = this.getProjection().fromLatLngToContainerPixel(this.latlng_);
|
||||||
|
|
||||||
|
|
||||||
|
if ((pixPosition.x + this.offsetHorizontal_) < 110) {
|
||||||
|
left = (pixPosition.x + this.offsetHorizontal_ - 110);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (($('div#map').width() - pixPosition.x + this.offsetHorizontal_) < 105) {
|
||||||
|
left = 105 - $('div#map').width() + pixPosition.x - this.offsetHorizontal_;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((pixPosition.y + this.offsetVertical_) < 205) {
|
||||||
|
top = pixPosition.y + this.offsetVertical_ -205;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.map_.panBy(left,top);
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue