Permalink
Browse files

Google Maps added for Current Event

  • Loading branch information...
JuweTakeheshi
JuweTakeheshi committed Oct 10, 2011
1 parent 0a2878d commit 4dd92ebe043f8459cabecf3d2bcc168310d56564
View
BIN .DS_Store
Binary file not shown.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -5,6 +5,55 @@
<link rel="stylesheet" href="styles/styles.css" type="text/css" />
<link rel="stylesheet" href="styles/slider.css" type="text/css" />
<script type="text/javascript" src="script/jquery.min.js"></script>
+ <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
+ <script type="text/javascript">
+var poly;
+var map;
+
+function initialize() {
+ var chicago = new google.maps.LatLng(19.396659,-99.141655);
+ var myOptions = {
+ zoom: 14,
+ center: chicago,
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ };
+
+ map = new google.maps.Map(document.getElementById('currentEventMap'), myOptions);
+
+ var polyOptions = {
+ strokeColor: '#000000',
+ strokeOpacity: 1.0,
+ strokeWeight: 3
+ }
+ poly = new google.maps.Polyline(polyOptions);
+ poly.setMap(map);
+
+ // Add a listener for the click event
+ google.maps.event.addListener(map, 'click', addLatLng);
+}
+
+/**
+ * Handles click events on a map, and adds a new point to the Polyline.
+ * @param {MouseEvent} mouseEvent
+ */
+function addLatLng(event) {
+
+ var path = poly.getPath();
+
+ // Because path is an MVCArray, we can simply append a new coordinate
+ // and it will automatically appear
+ path.push(event.latLng);
+
+ // Add a new marker at the new plotted point on the polyline.
+ var marker = new google.maps.Marker({
+ position: event.latLng,
+ title: '#' + path.getLength(),
+ map: map
+ });
+}
+
+</script>
+
<script type="text/javascript">
$(document).ready(function() {
@@ -70,7 +119,7 @@
});
</script>
</head>
-<body>
+<body onload="initialize()">
<div id="header">
<div id="userOptions">
@@ -116,7 +165,9 @@ <h1>
<!--Slider Ends-->
- <div id="currentEvent"></div>
+ <div id="currentEvent">
+ <div id="currentEventMap"></div>
+ </div>
</div>
@@ -132,48 +183,48 @@ <h2>Lugares + populares</h2>
<ul id="placesHome">
<li>
<div class="placesItem">
- <img src="" />
+ <img src="images/placeIcon.png" />
<h3>La Cebolla Morada</h3>
<p>Restaurante</p>
<div class="rating">
- <img src="images/star.png" />
- <img src="images/star.png" />
- <img src="images/star.png" />
- <img src="images/star.png" />
- <img src="images/star.png" />
+ <img src="images/rankingStarActive.png" />
+ <img src="images/rankingStarActive.png" />
+ <img src="images/rankingStarActive.png" />
+ <img src="images/rankingStarActive.png" />
+ <img src="images/rankingStarActive.png" />
</div>
</div>
</li>
<li>
<div class="placesItem">
- <img src="" />
+ <img src="images/placeIcon.png" />
<h3>La Cebolla Morada</h3>
<p>Restaurante</p>
<div class="rating">
- <img src="images/star.png" />
- <img src="images/star.png" />
- <img src="images/star.png" />
- <img src="images/star.png" />
- <img src="images/star.png" />
+ <img src="images/rankingStarActive.png" />
+ <img src="images/rankingStarActive.png" />
+ <img src="images/rankingStarActive.png" />
+ <img src="images/rankingStarActive.png" />
+ <img src="images/rankingStarActive.png" />
</div>
</div>
</li>
<li>
<div class="placesItem">
- <img src="" />
+ <img src="images/placeIcon.png" />
<h3>La Cebolla Morada</h3>
<p>Restaurante</p>
<div class="rating">
- <img src="images/star.png" />
- <img src="images/star.png" />
- <img src="images/star.png" />
- <img src="images/star.png" />
- <img src="images/star.png" />
+ <img src="images/rankingStarActive.png" />
+ <img src="images/rankingStarActive.png" />
+ <img src="images/rankingStarActive.png" />
+ <img src="images/rankingStarActive.png" />
+ <img src="images/rankingStarActive.png" />
</div>
</div>
</li>
View
@@ -0,0 +1,44 @@
+var poly;
+var map;
+
+function initialize() {
+ var chicago = new google.maps.LatLng(41.879535, -87.624333);
+ var myOptions = {
+ zoom: 7,
+ center: chicago,
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ };
+
+ map = new google.maps.Map(document.getElementById('currentEventMap'), myOptions);
+
+ var polyOptions = {
+ strokeColor: '#000000',
+ strokeOpacity: 1.0,
+ strokeWeight: 3
+ }
+ poly = new google.maps.Polyline(polyOptions);
+ poly.setMap(map);
+
+ // Add a listener for the click event
+ google.maps.event.addListener(map, 'click', addLatLng);
+}
+
+/**
+ * Handles click events on a map, and adds a new point to the Polyline.
+ * @param {MouseEvent} mouseEvent
+ */
+function addLatLng(event) {
+
+ var path = poly.getPath();
+
+ // Because path is an MVCArray, we can simply append a new coordinate
+ // and it will automatically appear
+ path.push(event.latLng);
+
+ // Add a new marker at the new plotted point on the polyline.
+ var marker = new google.maps.Marker({
+ position: event.latLng,
+ title: '#' + path.getLength(),
+ map: map
+ });
+}
View
@@ -72,6 +72,11 @@ body{
width: 300px;
}
+#currentEventMap{
+ height: 404px;
+ width: 300px;
+}
+
#menu ul{
margin-right: 30px;
}
@@ -87,37 +92,36 @@ body{
}
#buttonHome{
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078fe', endColorstr='#0053a9'); /* for IE */
- background: -webkit-gradient(linear, left top, left bottom, from(#0078fe), to(#0053a9)); /* for webkit browsers */
- background: -moz-linear-gradient(top, #0078fe, #0053a9); /* for firefox 3.6+ */
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078fe', endColorstr='#0053a9');
+ background: -webkit-gradient(linear, left top, left bottom, from(#0078fe), to(#0053a9));
+ background: -moz-linear-gradient(top, #0078fe, #0053a9);
}
#buttonBus{
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe00d1', endColorstr='#b60091'); /* for IE */
- background: -webkit-gradient(linear, left top, left bottom, from(#fe00d1), to(#b60091)); /* for webkit browsers */
- background: -moz-linear-gradient(top, #fe00d1, #b60091); /* for firefox 3.6+ */
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe00d1', endColorstr='#b60091');
+ background: -webkit-gradient(linear, left top, left bottom, from(#fe00d1), to(#b60091));
+ background: -moz-linear-gradient(top, #fe00d1, #b60091);
}
#buttonCommunity{
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#96ff00', endColorstr='#02a52b'); /* for IE */
- background: -webkit-gradient(linear, left top, left bottom, from(#96ff00), to(#02a52b)); /* for webkit browsers */
- background: -moz-linear-gradient(top, #96ff00, #02a52b); /* for firefox 3.6+ */
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#96ff00', endColorstr='#02a52b');
+ background: -webkit-gradient(linear, left top, left bottom, from(#96ff00), to(#02a52b));
+ background: -moz-linear-gradient(top, #96ff00, #02a52b);
}
#buttonPlaces{
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffef00', endColorstr='#d9a400'); /* for IE */
- background: -webkit-gradient(linear, left top, left bottom, from(#ffef00), to(#d9a400)); /* for webkit browsers */
- background: -moz-linear-gradient(top, #ffef00, #d9a400); /* for firefox 3.6+ */
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffef00', endColorstr='#d9a400');
+ background: -webkit-gradient(linear, left top, left bottom, from(#ffef00), to(#d9a400));
+ background: -moz-linear-gradient(top, #ffef00, #d9a400);
}
#buttonRoutes{
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00d8f2', endColorstr='#007975'); /* for IE */
- background: -webkit-gradient(linear, left top, left bottom, from(#00d8f2), to(#007975)); /* for webkit browsers */
- background: -moz-linear-gradient(top, #00d8f2, #007975); /* for firefox 3.6+ */
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00d8f2', endColorstr='#007975');
+ background: -webkit-gradient(linear, left top, left bottom, from(#00d8f2), to(#007975));
+ background: -moz-linear-gradient(top, #00d8f2, #007975);
}
#menu ul li.active{
-// background: #333;
color: #fff;
-moz-box-shadow:inset 0 0 10px #000;
-webkit-box-shadow:inset 0 0 10px #000;
@@ -144,17 +148,18 @@ body{
}
#rightColumn{
- background: #777;
+ background: #fff;
float: left;
height: 400px;
width: 50%;
}
#placesHome {
- background: #fff;
+
}
#placesHome li{
+ border-bottom: solid 1px #ccc;
height: 100px;
}
#placesHome div.placesItem{
@@ -163,16 +168,21 @@ body{
#placesHome div.placesItem img{
float: left;
height: 90px;
+ margin: 5px;
width: 90px;
}
#placesHome div.placesItem h3{
+ color: red;
+ font-size: 120%;
+ font-weight: bold;
margin: 10px 0 5px 10px;
}
#placesHome div.placesItem p{
-
+ font-variant: small-caps;
+ font-weight: bold;
}
-.rating{
-
+#placesHome li div.rating img{
+ margin: 0!important;
}
.rating img{
height: 20px!important;
@@ -21,6 +21,7 @@
<dict>
<key>ExpandedURLs</key>
<array>
+ <string>file://localhost/Users/JuweTakeheshi/Documents/Wikicleta/vitesse/script</string>
<string>file://localhost/Users/JuweTakeheshi/Documents/Wikicleta/vitesse/styles</string>
</array>
</dict>
@@ -50,6 +51,12 @@
<key>StateType</key>
<string>DefaultTab</string>
</dict>
+ <dict>
+ <key>DocumentURL</key>
+ <string>file://localhost/Users/JuweTakeheshi/Documents/Wikicleta/vitesse/script/currentEventMap.js</string>
+ <key>StateType</key>
+ <string>DefaultTab</string>
+ </dict>
</array>
</dict>
<key>com.macrabbit.Espresso.WorkspaceTabs.DisclosureCollapsed</key>

0 comments on commit 4dd92eb

Please sign in to comment.