How to place markers on Google maps using google maps JavaScript API with example


        In the last blog we went through an in depth discussion about how to incorporate Google map in a website, web app as per our requirements of width and height, this article uses code of this previous (Using Google Maps Javascript API with example) article and make sure you read the first article before reading this.

Why we need markers on a map?
        We need markers in order to indicate certain places like your office, school and home and any other place that you want to show on your web app, website. Markers intuitively identifies location on a map.

How to add markers to a Map?
          By using google.maps.Marker class of the google maps JavaScript API we can add markers to our map, all we need is the latitude and longitude of the place.

var markerpos = new google.maps.LatLng(16.5062, 80.6480);
var marker = new google.maps.Marker({
    position: markerpos,
    map: map,
    title: 'center of map'
  });

Let us place above code inside the intMap() function.
The google.maps.Marker’s constructor takes a single Marker options object literal, specifying the initial properties of the marker.

Position:
       As the name says this specifies the initial position of the marker on the map. This should be latitude longitude object.

Map:
       Let us assume that we didn't specify this property, then what would happen?  Think about this and scroll below.
In the above questioned case, Marker is created but it doesn't know where to display it, so no marker gets displayed. This is an important property of the marker. We can again make it to appear by setting  setMap property to setMap(map). Remember this!!!

Title:
         We pass title of the marker as a string to this attribute. This is the text that is shown when you place the mouse pointer near the marker for about 3 seconds.

Let us put together all the pieces and see the result with marker displayed on map:

  You learnt about how to place marker on the screen but this has less use unless there is a way to hide/show the marker. Now we will discuss how to add this functionality.

We will use checkbox for this purpose.

<div id = "input">
<input type="checkbox" id="showmarker" onclick="checkclick()"> show marker
</div>

The above code adds a checkbox with id as showmarker and with onclick method as checkclick(). The JavaScript part of our final code is as follows.

<script> 
// javascript program starts from here
var location_1;
var map;
var markerpos;
var marker;

function initMap()
{
location_1 = new google.maps.LatLng(16.5062, 80.6480);
       map = new google.maps.Map(document.getElementById('mapdivid'), {
        center: location_1,
        zoom: 13
    });
}
function checkclick(){
if(document.getElementById('showmarker').checked)
{
showmarker();
}
else
{
clearmarker();
}
}
function showmarker()
{
markerpos = new google.maps.LatLng(16.5062, 80.6480);
marker = new google.maps.Marker({
    position: markerpos,
    map: map,
    title: 'center of map'
  });
}
function clearmarker()
{
marker.setMap(null);
}
//End of the javascript program
</script>


I told you before that we can use setMap() to set map canvas on which our marker gets displayed , we used this property in order to clear our marker from the map.

checkclick() function:
This function is used inorder to know whether the checkbox is ticked or unticked. 
document.getElementById(‘showMarker’) returns the element with ID as showMarker, on which we are calling checked property.

Showmarker() function:
This is responsible for showing the marker.

clearmarker() function:
This function is responsible for clearing the marker from the map using setMap() function of google.maps.Map class and by setting Markers map attribute as null, setMap(null).

Final result of the map is shown below - with show marker checkbox.

 Hope this example better explains how to place markers on Google maps using JavaScript API.
You can download the complete code below :

Download code here




Reactions:

0 comments :

Post a Comment