Google Maps Markers

Intro

Google Maps is a great product, which gives as many actions to do.In this chapter we will talk about Google Maps Markers.Will know how to prepare, how to create, move etc.As you know, if we want to use Google APIs, we have to connect a script in our html file.So for Google Maps we have to connect the following script.

<script src="//maps.googleapis.com/maps/api/js"></script>

After connection, we have to initialize the maps.Google Maps Api lets us to initialize the map very easily.In general we create a map on div or canvas.Remember, that before initializing, your html tag must contain geometric properties.Specially width and height.Lets see how we're going to do that.

<!DOCTYPE html>
<html>
   <head>
    <script src="//maps.googleapis.com/maps/api/js"></script>

    <script>
     function initialize() {
      var mapProp = {
       center: new google.maps.LatLng(51.508742,-0.120850),
       zoom: 5,
       mapTypeId: google.maps.MapTypeId.ROADMAP
       };
      var map = new google.maps.Map(document.getElementById("map"),mapProp);
     }

     google.maps.event.addDomListener(window, 'load', initialize);
    </script>
   </head>

  <body>
  <div id="map" style="width:500px;height:300px;"></div>

  </body>
</html>

Google Maps Markers

So we sow how to initialize a Google Maps,now lets talk a little about Google Maps Markers.As you know,Google has a kind of overlays.One of that is Marker.We can create a marker like by this way.

var Marker = new google.maps.Marker({
   position: markerCenter,
});

Marker.setMap(map);

But Google lets us to have a marker with animation.Here is an example how we can create marker and set animation on it.

<!DOCTYPE html>
<html>
   <head>
    <script src="//maps.googleapis.com/maps/api/js"></script>

    <script>
      var markerCenter = new google.maps.LatLng(20.2547,44.2658);
      var marker = null;

     function initialize() {
      var mapProp = {
       center: markerCenter,
       zoom: 5,
       mapTypeId: google.maps.MapTypeId.ROADMAP
       };
      var map = new google.maps.Map(document.getElementById("map"),mapProp);
      
       var marker = new google.maps.Marker({
         position: markerCenter,
         animation: google.maps.Animation.BOUNCE
       });
       marker.setMap(map);
     }

     google.maps.event.addDomListener(window, 'load', initialize);
    </script>
   </head>

  <body>
  <div id="map" style="width:500px;height:300px;"></div>

  </body>
</html>

If you want to use your custom icon, you can do that like

var Marker = new google.maps.Marker({
  position: markerCenter,
  icon: iconPath
});

So when we decide to move the marker, we can do it with special function.In general, google objects have some functionality inside the prototype.Marker has that functions too.If you will console the object or will see the prototypes,you understand that google gives us very comfortable thing.

Google Maps Marker Events

Now lets talk a little about marker's events.Google has some events for markers, polygon, polyline etc.The events are click, center changed, hover etc.

Now lets see a little example about how to use click event on google maps marker.

<!DOCTYPE html>
<html>
   <head>
    <script src="//maps.googleapis.com/maps/api/js"></script>

    <script>
      var markerCenter = new google.maps.LatLng(20.2547,44.2658);
      var marker = null;

     function initialize() {
      var mapProp = {
       center: markerCenter,
       zoom: 5,
       mapTypeId: google.maps.MapTypeId.ROADMAP
       };
      var map = new google.maps.Map(document.getElementById("map"),mapProp);
      
       var marker = new google.maps.Marker({
         position: markerCenter,
         animation: google.maps.Animation.BOUNCE
       });
       marker.setMap(map);
       google.maps.event.addListener(marker,'click',function() {
          alert("You clicked on the marker");
       });
     }

     google.maps.event.addDomListener(window, 'load', initialize);
    </script>
   </head>

  <body>
  <div id="map" style="width:500px;height:300px;"></div>

  </body>
</html>