Creating the page and interface
In our first task we can add the different containers for the map, and the initial UI elements needed by the page. We can also add some basic styling to lay things out as we want.
Engage Thrusters
We should add the following elements to the <body> element in the google-map.html page that we just set up:
<div id="map"></div>
<div id="ui">
<h1>I Am Mover</h1>
<p>Enter the weight of your goods below and click on two
different places on the map to see the distance between
them and the cost of moving your goods.</p>
<h3>Our charges</h3>
<dl class="clearfix">
<dt>Base rate (per mile)</dt>
<dd>£3</dd>
<dt>Cost per kg per mile</dt>
<dd>£0.25</dd>
</dl>
<input id="weight" placeholder="Weight (kg)" />
</div>For some basic styling and to lay out the page ready...
