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.
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>