Untitled

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map-canvas {
        width: 500px;
        height: 400px;
      }
    </style>

<head><center>Find your Cinema</center></head>


    Location:
<input type="text" name="location">
<button>Search</button><br><br><br>

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

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

    <!-- 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 = "b052bc3d2dc4decc5b81e8e5ba1f3";

        //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";

        //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;

        $(document).ready(function (){
            //The next will be executed when the page has finished loading.
</script>

<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=odeon,+london&amp;aq=&amp;sll=53.426328,-3.15254&amp;sspn=0.931206,2.469177&amp;ie=UTF8&amp;hq=odeon&amp;hnear=&amp;t=m&amp;ll=51.481224,-0.100811&amp;spn=0.147155,0.272538&amp;output=embed"></iframe><br /><small><a href="https://www.google.co.uk/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=odeon,+london&amp;aq=&amp;sll=53.426328,-3.15254&amp;sspn=0.931206,2.469177&amp;ie=UTF8&amp;hq=odeon&amp;hnear=&amp;t=m&amp;ll=51.481224,-0.100811&amp;spn=0.147155,0.272538" style="color:#0000FF;text-align:left">View Larger Map</a></small>
            <body>
    <div id="map-canvas"></div>
  </body>

  </head>
</html>