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 type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA&libraries=places"></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 type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA&libraries=places"></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 let's 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 have a marker with animation. Here is an example of how we can create a marker and set animation on it.

<!DOCTYPE html>
<html>
   <head>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA&libraries=places"></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 a 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 a 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 type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA&libraries=places"></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>

Practice Your Knowledge

What are the possible methods to create a marker in Google Maps using JavaScript according to the content of the given URL?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?