How to Display Google Map with Marker using Latitude & Longitude

In this blog, I am going to show you how to display the google map with the marker on the webpage. Here I will show the marker on the google map by using latitude and longitude.

Setting up the google map:

First of all, we need to include the google map API on the web page. This is done by adding the following line within the <head> element,

<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR-GOOGLE-API-KEY>&language=en&callback=initMap" async defer></script>

GOOGLE-API-KEY: We may need to get the google API key from google API console to display the google map on the webpage. Click here to get the Google API Key.

Language: This is optional. By using this parameter value we can set different type of language as follows,

language=en -> For English
language=ar -> For Arabic
language=ja -> For Japanese 
language=fr -> For French

Then create the Javascript function initMap().

In this Javascript function initMap(), put the latitude and longitude and then initialize map by using new google.maps.Map() as follows,

var latitude = 13.0826802;
var longitude = 80.2707184;
var latlng = {lat: latitude, lng: longitude};
map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

Where,

  • zoom indicates the zoom level of the map
  • center is set to the latitude and longitude position that we defined
  • mapTypeId is set to the type of map that we wish to display initially
    • MapTypeId.ROADMAP displays the default road map view
    • MapTypeId.SATELLITE displays Google Earth satellite images
    • MapTypeId.HYBRID displays a mixture of normal and satellite views
    • MapTypeId.TERRAIN displays a physical map based on terrain information

Here is the full source code to display google map with marker:

In the below example, I will be using HTML and Javascript to display the google Map.

<html>
    <head>
        <title>Display Google Map with Marker using Latitude & Longitude</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <script src="https://maps.googleapis.com/maps/api/js?key=XXXYYYZZZ&language=en&callback=initMap" async defer></script>
        <script type="text/javascript">
            var map;

            function initMap() {
                var latitude = 13.0826802;
                var longitude = 80.2707184;

                var latlng = {lat: latitude, lng: longitude};

                map = new google.maps.Map(document.getElementById('map'), {
                                          center: latlng,
                                          zoom: 14,
                                          mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                var marker = new google.maps.Marker({
                                        position: latlng,
                                        map: map,
                                        title: latitude + ', ' + longitude
                });
            }
        </script>
    </head>
    <body>
        <div style="padding:10px">
            <div id="map" style="width: 600px; height: 300px;"></div>
        </div>
    </body>
</html>

Read: How to Customize Google Map Marker Icon

Hope this helps.

Leave a Reply

Your email address will not be published. Required fields are marked *