Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to show google map on web application.

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 92
    Comment on it

    Hello Readers ,

    Below are the simple steps to follow to show the google map.

    Add the Goggle API

    <!DOCTYPE html>
    <html>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <body>
    
    <h1>My First Google Map</h1>
    
    <div id="map" style="width:400px;height:400px;background:yellow"></div>
    
    </body>
    </html>
    

    Create the Map Using JavaScript

    <script>
    var mapCanvas = document.getElementById("map");
    var mapOptions = {
        center: new google.maps.LatLng(51.5, -0.2), zoom: 10
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
    </script>
    

    Combining both steps:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    </head>
    <body>
    
    <h1>My First Google Map</h1>
    
    <div id="map" style="width:400px;height:400px"></div>
    
    <script>
    var mapCanvas = document.getElementById("map");
    var mapOptions = {
        center: new google.maps.LatLng(51.5, -0.2), zoom: 10
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
    </script>
    
    </body>
    </html>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: