--> Skip to main content

Display location's information on the marker of Google Maps

The popularity of digital maps and the use of digital mapping tools have grown rapidly in recent years. Google maps is one of most commonly used by web developers and still the undisputed king when it comes to digital maps.

In this tutorial, we will learn how to add google map to website, then create marker for one location. When the marker is clicked, it will present a certain information.

Here is the final result we will discuss in this tutorial, as shown in Figure 1 below:
(Figure.1)

Step by Step Guide: Create Marker Google Maps

1. Loading the Google Maps JavaScript API 
In order to connect to google maps server, the following script should be included on your website:
<script 
 src="http://maps.google.com/maps/api/js?sensor=trueorfalse">
</script>

At the end of the script there are sensor parameters: true or false which aims to notify google in determining the location of the user. Because in this tutorial we will make its own location, then for sensor parameter set: false.

2. Set position coordinates of location (latitude and longitude)
Here we need to know the coordinates of the location we want to mark it. For that please open url: https: //www.google.com/maps, then click the desired location / position, then copy the coordinates and place on the latitude and longtitude in the following script:
var position = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

Suppose we have the coordinates of latitude and longitude (5.550176, 95.319263), then the script becomes:
var position = new google.maps.LatLng(5.550176, 95.319263)

3. Add property to map object
var myOptions = {
 zoom: 8,
 center: position,
 mapTypeId: google.maps.MapTypeId.ROADMAP
}

There are many options for map objects, but we just need three properties in this tutorial :
  • Center: object google.maps.LatLng is used to set the center of the original map.
  • MapTypeId: object google.maps.MapTypeId, which is used to set the map type. For example, you can see a map with a road map or satellite map.
  • Zoom: a positive number that sets the initial zoom of the map (value from 0 s.d 18)

4. Create a map
In step 4 we will display the map after we set the position and properties of the map option:
var map = new google.maps.Map(
 document.getElementById("map_canvas"),
 myOptions);

5. Make the marker in the selected position
var marker = new google.maps.Marker({
 position: position,
 map: map,
 title:"This is the place."
});

6. Adding information when marker is clicked
var contentString = 'Ibukota<strong> Provinsi Aceh</strong>!';
var infowindow = new google.maps.InfoWindow({
content: contentString
});

7. Add event click on marker
google.maps.event.addListener(marker, 'click', function() {
 infowindow.open(map,marker);     
});
This script responds to markers when clicked, then displays the information contained in the infowindow variable.

Complete Source Code

In this example, we will create a marker for the coordinate position of Banda Aceh city. Once clicked on the marker section, it will display information "The Capital of Aceh Province" as Figure 1 above:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="ilmu-detil.blogspot.com">
    <title>Load Map </title>
    <!-- Bagian css -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/ilmudetil.css">
    
    <!-- Bagian js -->
    <script src='assets/js/jquery-1.10.1.min.js'></script>       
    
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- akhir dari Bagian js -->
    <script 
        src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script>
        function initialize() {
        var position = new google.maps.LatLng(5.550176, 95.319263);
        
        var myOptions = {
          zoom: 8,
          center: position,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        var map = new google.maps.Map(
            document.getElementById("map_canvas"),
            myOptions);

        var marker = new google.maps.Marker({
            position: position,
            map: map,
            title:"This is the place."
        });  

        var contentString = 'Ibukota<strong> Provinsi Aceh</strong>!';
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
          
        });

      }
    </script>
</head>
<body onload="initialize()">
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">
            Pusat Ilmu Secara Detil</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li class="clr1 active"><a href="index.html">Home</a></li>
                <li class="clr2"><a href="">Programming</a></li>
                <li class="clr3"><a href="">English</a></li>
            </ul>
        </div>
    </div>
</nav>
</br></br></br></br>
<!--- Bagian Judul-->   
<div class="container" style="margin-top:10px"> 

    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">Marker Google Maps</div>
                    <div class="panel-body">
                        <div id="map_canvas" style="width:700px; height:500px"></div>
                    </div>
            </div>
        </div>  
    </div>
</div>  
</body>
</html>
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar