Try my app Expense Manager @ google play and amazon store.

Monday, February 29, 2016

How To: Add Google Map in Html Page

Adding google map to html page is very easy and a common practice now a days. In this tutorial we will learn how to add google map in web page step by step.
First create a basic structure of html page.
Open any text editor, paste following code there and save it as GoogleMap.html file.

    <title>Google Map!</title>

<body style="width: 98%; height: 100%;">
    <div id="map_area" style="width: 100%; height: 520px;">

Now add following google api reference in page head section.

<script src="" type="text/javascript"></script>

Now we will create a java script function to initialize google map.  We will set basic map properties in this function while initialization. Add following function in page head section inside <script> </script> tags.

<script type="text/javascript">
        var map = null;

        function initialize() {
            var latlng = new google.maps.LatLng(31.536648, 74.343443);
            var myOptions = {
                zoom: 15,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP

            map = new google.maps.Map(document.getElementById("map_area"), myOptions);


Now call this function on onload event of body of web page.

<body onload="initialize()" style="width: 98%; height: 100%;">
    <div id="map_canvas" style="width: 100%; height: 520px;">

Complete code of all setps will look like:

Add Google Map in Html Page
Add Google Map in Html Page

This is all. You have done. Save file and view in browser.

No comments:

Post a Comment

Follow by Email

Google+ Badge