Initial Commit

application.css

@@ -0,0 +1,155 @@
+body{
+    font-family: Helvetica, sans-serif;
+    padding: 10px;
+    font-size: 14px;
+    line-height: 16px;
+    width: 600px;
+    margin: 0 auto;
+}
+
+::-moz-selection {
+    background-color: #FFC22C;
+    text-shadow: 0 1px 1px #fff;
+}
+
+::selection {
+    background-color: #FFC22C;
+    text-shadow: 0 1px 1px #fff;
+}
+
+a{
+    color: #0CB225;
+    text-decoration: none;
+    background: #fff;
+}
+a:hover{
+    text-decoration: underline;
+}
+a:visited{
+    background: #f0f0f0 !important;
+}
+
+p{
+    line-height: 18px;
+}
+
+p.note{
+    font-size: 11px;
+    font-style: italic;
+}
+
+h1, h2, h3{
+    font-family: 'Lato', sans-serif;
+    font-style: italic;
+    font-weight: bold;
+}
+
+h1{
+    color: #E1182F;
+    font-size: 16px;
+}
+
+h1.title{
+    font-size: 34px;
+    margin-bottom: 40px;
+    border-top: 0;
+    padding-top: 0;
+    background: transparent;
+    text-shadow: 0 2px #AD001E;
+}
+
+h2{
+    color: #4A76E6; /*0CB225*/
+    padding-top: 15px;
+    font-size: 24px;
+}
+
+#nav{
+    list-style: none;
+    padding: 0;
+    height: 25px;
+}
+#nav li{
+    float: left;
+    height: 20px;
+}
+#nav li a{
+    position: relative;
+    top: 0;
+    display: block;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 20px;
+    margin: 0 5px 0 0;
+    background: #0CB225 !important;
+    font-family: 'Lato', sans-serif;
+    font-style: italic;
+    font-size: 16px;
+    font-weight: bold;
+    color: #fff;
+    border-radius: 2px;
+    -moz-transition: 	all 0.1s linear;
+    -webkit-transition: all 0.1s linear;
+    transition: 		all 0.1s linear;
+    -webkit-box-shadow: 0 0 0 #17961A;
+    -moz-box-shadow: 0 0 0 #17961A;
+    box-shadow: 0 0 0 #17961A;
+}
+#nav li a:hover{
+    background-color: #1AC018 !important;
+    text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
+    top: -2px;
+    text-decoration: none;
+    -webkit-box-shadow: 0 2px 0 #17961A;
+    -moz-box-shadow: 0 2px 0 #17961A;
+    box-shadow: 0 2px 0 #17961A;
+}
+#nav li a:active{
+    top: 0;
+    -webkit-box-shadow: 0 0 0 #17961A;
+    -moz-box-shadow: 0 0 0 #17961A;
+    box-shadow: 0 0 0 #17961A;
+}
+
+#map{
+    width: 458px;
+    height: 500px;
+    border: 1px solid #000;
+    margin-bottom: 20px;
+}
+
+#map p{
+    margin: 10px;
+    color: #333;
+}
+
+#panel {width:400px; height:500px;}
+
+pre{
+    border-radius: 3px;
+    font-size: 12px;
+    padding: 10px;
+    /*word-wrap: break-word;*/
+    overflow: auto;
+    -moz-transition: all 0.2s linear;
+    -webkit-transition: all 0.2s linear;
+    transition: all 0.2s linear;
+}
+pre:hover{
+    background-color: #F2F7F8;
+    border-color: #D2DFEA;
+}
+pre,
+code{
+    border: 1px solid #ddd;
+    background-color: #f6f6f6;
+}
+
+#footer{
+    padding: 5px 0 0;
+    border-top: 1px solid #ccc;
+    font-size: 12px;
+}
+#footer p{
+    margin: 5px 0;
+}

application.js

@@ -0,0 +1,93 @@
+// Place your application-specific JavaScript functions and classes here
+// This file is automatically included by javascript_include_tag :defaults
+
+$(document).ready(function(){
+
+	// HTML for pop up bubble
+	var maesycoed = "<h1>Maesycoed Motors</h1><address>Heol Groeswen,<br />Pontypridd<br /></address>";
+
+	// Initialize Map
+
+	var myOptions = {
+    zoom:7,
+    mapTypeId: google.maps.MapTypeId.ROADMAP,
+    center: chicago
+  }
+
+
+	var map = new google.maps.Map(document.getElementById("map"));
+
+
+	// map.gMap(
+	// 	{ 
+	// 		markers: [{ latitude: 51.575296, longitude: -3.289676, html: maesycoed }],
+	// 		zoom: 14,
+	// 		scrollwheel: false,
+	// 		controls: {
+	//          panControl: true,
+	//          zoomControl: true,
+	//          mapTypeControl: false,
+	//          scaleControl: false,
+	//          streetViewControl: true,
+	//          overviewMapControl: false
+	// 		}
+	// 	}
+	// );
+	// 
+	// // Adjust Center
+	// map.gMap('centerAt',
+	// 	{
+	// 		latitude: 51.578296,
+	// 		longitude: -3.299999,
+	// 		zoom: 14
+	// 	}
+	// );
+
+
+	// Get Users Location
+	//   if(navigator.geolocation) {
+	//     browserSupportFlag = true;
+	//  
+	//    	navigator.geolocation.getCurrentPosition(function(position) {
+	//       initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+	// 
+	// 		map.gMap('addMarker', 
+	// 			{
+	// 						latitude: initialLocation.lat(),
+	// 						longitude: initialLocation.lng(),
+	// 						zoom: 14
+	// 			});
+	//     }, function() {
+	//       handleNoGeolocation(browserSupportFlag);
+	//     });
+	// }
+
+	// Direction Service
+	var directionsService = new google.maps.DirectionsService();
+	var directionsDisplay = new google.maps.DirectionsRenderer();
+
+	// Locations
+	var maesycoed = new google.maps.LatLng(51.575296, -3.289676);
+	var chicago = new google.maps.LatLng(52.575296, -3.289676);
+
+  directionsDisplay.setMap(map);
+
+	var request = {
+    origin: maesycoed,
+    destination: chicago,
+    travelMode: google.maps.TravelMode.DRIVING
+  };
+
+  directionsService.route(request, function(result, status) {
+		alert(result);
+    if (status == google.maps.DirectionsStatus.OK) {
+      directionsDisplay.setDirections(result);
+    }
+  });
+
+
+
+});
+
+
+

maps.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>Maps</title>
+	<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
+	<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
+	<script src="jquery.gmap.min.js"></script>
+	<script src="application.js"></script>
+	<link rel="stylesheet" href="application.css" type="text/css" >
+</head>
+
+<body>
+
+    <div id="map">
+
+    </div>
+
+		<div id="panel">
+
+		</div>
+
+</body>
+</html>