O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – getting geolocation data

In this section we will add some code to our weather widget example to access the Geolocation API. You can find the code for this section in chapter8/example8.3.

First let's go into weather.html and add a section to show the user's location next to the Check Weather button:

<div id="controls">
    <div>
        Latitude: <input id="latitude" type="text"/><br/>
        Longitude: <input id="longitude" type="text"/>
    </div>
    <button id="getWeather">Check Weather</button>
    <div class="error">
        Error: <span></span>
    </div>
</div>

We add a <div> element with text fields to show the user's latitude and longitude that we got from the Geolocation API. We also add a <div class="error"> element to show the error message if geolocation fails. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required