Monday, February 29, 2016

How To: Add Marker/Pin on Google Map

In this lesson we will learn how to add pin/market on google map at specific point (coordinates: latitude and longitude). Add following code to add google map in html page with basic map properties.


<html>

<head>

    <title>Google Map!</title>



    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

    <script type="text/javascript">

        var map = null;



        function initialize() {

            var latlng = new google.maps.LatLng(31.536648, 74.343443);

            var myOptions = {

                zoom: 12,

                center: latlng,

                mapTypeId: google.maps.MapTypeId.ROADMAP

            }



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



        }



    </script>

</head>

<body onload="initialize()" style="width: 98%; height: 100%;">

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

    </div>



</body>

</html>

Now create another java script function AddMarker() to add pin on google map, in this function we will set basic properties of pin like its position ( coordinate: latitude and longitude) and its title. Add following code in <script> </script> tag inside head section of web page.


        function AddMarker() {           

            var myLatlng = new google.maps.LatLng(31.5136648, 74.343443);

            var marker = new google.maps.Marker({

                position: myLatlng,

                map: map,

                title: 'Lahore, Pakistan.'

            });

        }

Now create a new button in html and call this function on onclick event of button. Add following code immediately before </bode> tag.


<input type="submit" onclick="AddMarker()" name="button" title="Add marker" />

Complete code of all steps is

Add Marker/Pin on Google Map

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

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.


<html>

<head>

    <title>Google Map!</title>



</head>

<body style="width: 98%; height: 100%;">

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

    </div>

</body>

</html>

Now add following google api reference in page head section.


<script src="http://maps.google.com/maps/api/js?sensor=false" 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);



        }

    </script>

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;">

    </div>

  

</body>

Complete code of all setps will look like:

Add Google Map in Html Page

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