550 CHAPTER 14 Making your HTML location-aware
Practice exercises
If you encounter a problem completing any of these exercises, the completed projects can be
installed from the Practice Exercises folder that is provided with the companion content.Exercise 1: Map your current positions
In this exercise, you apply your knowledge of the Geolocation API by creating a web applica-
tion that retrieves your current location and displays a map with your location. This exercise
uses the Google Maps API because you don’t need an account to use it, but you can also use
the Bing maps API. The Bing API is different and requires you to get a developer account, but
it’s easy to implement.- Start Visual Studio Express 2012 for Web. Create an ASP.NET Empty Web Application
project called PositionMapper. - Add an HTML file to the project. Name the file default.html.
- Add a CSS file to the project. Name the file default.css.
- Add a folder called Scripts to the project.
- Right-click the Scripts folder and add a new JavaScript file called default.js.
- Add a reference to the jQuery library by right-clicking the project node. Choose
Manage NuGet Packages. Click Online and type jQuery in the search criteria. When
the jQuery library is displayed, click the Install button. - In the default.html file, add a reference to the default.css, jQuery library, and default.js
files. - Above the jQuery reference, add the following reference to the Google Maps API.
- Add a title called Position Mapper to your page.
Your HTML page should look like the following.
<!DOCTYPE html>
Position Mapper
</body>
</html>- In the element, add a element whose id is map.