Lab 3 : Google Maps API, Bootstrap, JavaScript and AJAX

A fiddle in which we were to use Google Maps API to display a map using AJAX. I used Twitter Bootstrap for the styling.

by Hayden McParlane

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=true"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=weather&amp;sensor=true_or_false"></script>
<h1 style="text-align: center;"> Lab 3 </h1>

<form class="form-horizontal" method="post">
    <div class="form-group">
        <label for="s_addr" class="control-label col-xs-2">Source</label>
        <div class="col-xs-10">
            <input id="s_addr" type="text" class="form-control" placeholder="Enter source address" />
        </div>
    </div>
    <div class="form-group">
        <label for="d_addr" class="control-label col-xs-2">Destination</label>
        <div class="col-xs-10">
            <input id="d_addr" type="text" class="form-control" placeholder="Enter destination address" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-offset-2 col-xs-10">
            <button id="button" type="button" class="btn btn-primary">Pin-point</button>
        </div>
    </div>
</form>
<div id="map_canvas" style="height: 400px; width: 600px"></div>

<!--
<div id="s_weather" class="weatherModule" > 
    <p id="s_curr_conditions" class="s_currentConditions"></p>
    <div class="s_currentIcon"></div>
</div>

<div id="d_weather" class="weatherModule"> 
    <p id="d_curr_conditions" class="d_currentConditions"></p>
    <div class="d_currentIcon"></div>
</div> -->

CSS

.weatherModule {
    background:#f2f2f2;
    height:150px;
    width:250px;
    border: 1px dashed #ccc;
    padding: 1em;
}

JavaScript

var GOOGLE_DOMAIN = "https://maps.googleapis.com/maps/api/directions/json";
var SOURCE_ADDRESS = "?origin=";
var DESTINATION_ADDRESS = "&destination=";
var APT_KEY = "&key=AIzaSyCIh0NxZY_jfII0Jfjzgk98hbpte-5K6RM";
var DIR_MODE = "&mode=";
var WEATHER_DOMAIN_FRONT = 'http://api.wunderground.com/api/36b799dc821d5836/conditions/q/MO.json';
var JSON_EXT = '.json';

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var weatherLayer = new google.maps.weather.WeatherLayer();

var map;

var onClick = function get_directions() {
    initialize();    
};

function initialize() {
    //Get source address from html element
    var s_address = document.getElementById("s_addr").value;
    var d_address = document.getElementById("d_addr").value;

    directionsDisplay = new google.maps.DirectionsRenderer();
    var center = new google.maps.LatLng(0, 0);
    var myOptions = {
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: center
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    weatherLayer.setMap(map);    
    directionsDisplay.setMap(map);

    var start = s_address;
    var end = d_address;

    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    directionsService.route(request, function (response, status) {
        if (status === google.maps.DirectionsStatus.OK) //Check if request is successful.
        {
            directionsDisplay.setDirections(response); //Display the directions result
        }
    });          
    
    s_address = $('#s_addr').val();
    d_address = $('#d_addr').val();
    
    //Place city at end of URL
    var s_url_req = 'http://api.wunderground.com/api/36b799dc821d5836/conditions/q//' + s_address + '.json';
    
    var d_url_req = 'http://api.wunderground.com/api/36b799dc821d5836/conditions/q//' + d_address + '.json';
    
   ...