whole weather code

<!DOCTYPE html>
<html>
<ul>
<li><a href = 'homepage.php'>Home</a></li>
<li><a href = 'csd 2550 html website contact us.php'>Contact Us</a></li>
<li><a href = 'website about us.php'>About Us</a></li>
</ul>


<link rel="stylesheet" type="text/css" href="styleupload.css">
<head>
<body background = "aurora-borealis-background.jpg"/>
  <title>Weather Forecast Center</title>

  <h1> Weather Details </h1>

</head>
<br>
<br>
<body>
    <form>
        <p><b><font color = "blue">Type in City or Postcode: </p></b></font> <input type="text" name="GetCity" id="city">
        <br>
        <br>
       <input type="button" value="Submit" id="findcity">
    </form>

    <div id='infoSummary'>
       <!-- Info will come here -->
    </div>

    <div id='infoDetails'>
       <!-- Info will come here -->
    </div>

  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 90%;
        margin: 0px;
        padding: 0px
      }
      .controls {
        margin-top: 16px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

      #pac-input {
        background-color: #fff;
        font-family: Verdana;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      .pac-container {
        font-family: Verdana;
      }

      #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
      }

      #type-selector label {
        font-family: Verdana;
        font-size: 13px;
        font-weight: 300;
      }

    </style>
    <title>Places search box</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
    <script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.

function initialize() {

  var markers = [];
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-33.8902, 151.1759),
      new google.maps.LatLng(-33.8474, 151.2631));
  map.fitBounds(defaultBounds);

  // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));

  // [START region_getplaces]
  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }
    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      // Create a marker for each place.
      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location

      });

      markers.push(marker);

      bounds.extend(place.geometry.location);
    }


    map.fitBounds(bounds);
  });
  // [END region_getplaces]

  // Bias the SearchBox results towards places that are within the bounds of the
  // current map's viewport.
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
  });
}


google.maps.event.addDomListener(window, 'load', initialize);

    </script>
    <style>
      #target {
        width: 345px;
      }
    </style>
  </head>
  <body>
    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map-canvas"></div>
</body>


    <!-- In your application, you may want to put the javascript code in a separate file -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        serviceLocation = "http://api.worldweatheronline.com/free/v2/weather.ashx";
        key = "dcf7208c86e37f2fa995d28084a03";

        //Bulid the components of the request
        //(currently I chose some fixed data; but it could be taken from the user via a form)
        myQuery = {};
        myQuery.format = "json";
        //myQuery.q = "London";
        myQuery.num_of_days = "10";

        $("#findcity").click(function () {
            //The next will be executed when the button is clicked.
          myQuery.q = document.getElementById("city").value;
            //Build the request to the service: service URL + query string
            req = serviceLocation + "?";
            $.each(myQuery, function (k, v) {
            req += k + '=' + v + '&';
            });

            //For most APIs, when making calls you will need to add your key to the query string
            //(the one you receive after registering to the service)
            req += 'key' + '=' + key;


            //alert(myQuery.q);

            //The getJson function takes two arguments:
                //(1) the http request to the service
                //(2) a function showing what to do with the result
            //(see http://www.w3schools.com/jquery/ajax_getjson.asp)
            $.getJSON(req, function (res){
                //Below we access the data from the JSON response, available as
                //a javascript object (see http://www.w3schools.com/jquery/ajax_getjson.asp).
                //(The structure of the response is shown in the particlar API documentation,
                //in this case http://www.worldweatheronline.com/api/docs/)
                var weatherIconUrl = res.data.current_condition[0].weatherIconUrl[0].value;
                var observation_time = res.data.current_condition[0].observation_time;
                var temp_C = res.data.current_condition[0].temp_C;
                var cloudcover = res.data.current_condition[0].cloudcover;

                //Finally, we can put this data on the page, for example by accessing
                //elements by ID and altering their html content
                //(see http://www.w3schools.com/jquery/jquery_dom_set.asp)
                $('#infoSummary').html('<img src="' + weatherIconUrl + '" height="342" width="342">');
                $('#infoDetails').html(
                    "At the time <b>" + observation_time + "</b>" +
                           " the " + myQuery.q + " temperature was <b>" + temp_C + " &deg;C </b>" +
                           " with cloud cover of <b>" + cloudcover + "%</b>.");
            });
        });
    </script>

</body>
</html>