View video tutorial

HTML Google Map


Google map provides locations and other information to users.

Find your location

You can find your geographical position using Geolocation API on HTML page.

Since it it a privacy and security issue, the position will not be not available unless the you approve the permission.

Google Map

Google map gives information to user.

User can get the coordinates of a place.

Developers need Google API key to use in the website.

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.


<!DOCTYPE html>
    <title>HTML Map Example</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
        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;
        button:hover {
            background-color: rgb(235, 75, 12);
            color: white;
    <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>
        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
        async defer></script>
Try it Now »

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