View video tutorial

HTML Web APIs

HTML

API - Application Programming Interface.

Web APIs


Application Programming Interfaces (APIs) are interfaces available in programming languages allow developers to create complex functionality more easily.

It Generalize more complex code into simple code and provides easyer syntax for the same.

Developers don't even need to know the internal complexity details, just simple systax provided by API.

Client-side JavaScript APIs


JavaScript has many APIs available to it — these are not part of the JavaScript language, rather these are built on top of the core JavaScript language.

There are two categories of APIs in JavaScript, Browser APIs and Third-party APIs.

Browser APIs are built into the web browser and are able to access data from the browser and computer environment.

Third-party APIs are not pre-built into the browser by default, and need to available to work with from the providers.

Common tasks of Browser APIs and Third-party APIs


Can manipulate the documents loaded into the browser.

Fetch data from the server and manipulate data.

Draw and manipulate graphics objects.

Can manage Client-side storage

Manage and play Audio and Video.

HTML Map Example

Click Show Map button to get the map.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Map Example</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            height: 400px;
        }
        button {
            width: 150px;
            height: 50px;
            background-color: rgb(235, 105, 53);
            font-size: 14pt;
            color: white;
            border-radius: 10px;
            margin:10px;
        }
        button:hover {
            background-color: rgb(235, 75, 12);
            color: white;
        }
    </style>
</head>
<body>
    <h2>HTML Map Example</h2>
    <p>Click Show Map button to get the map.</p>
    <button onclick="showMap()">Show Map</button>
    <div id="map"></div>
    <script>
        var center;
        function initialize() {
            // Initialize a location
            // Create a LatLng object 
            // Now use this LatLng object to center the map and position the marker
            center = new google.maps.LatLng(46.227638, 2.216749);
        }
        function showMap() {
            // Set your map options
            var mapOptions = {
                zoom: 4,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            // Now create a map in the #map HTML element, using the declared options
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);
            // Create a marker and place it on the map
            var marker = new google.maps.Marker({
                position: center,
                map: map
            });
        }
    </script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize"
        async defer></script>
</body>
</html>
Try it Now »

Click on the "See output" button to see how it works.