How to Change the Marker in a Google Maps API

A marker is a push-pin icon that Google Maps displays on top of a specific location. By default, when you click on a marker, Google Maps opens a small informational window. For example, a map of New York state shows a push-pin marker on Albany. When you click on the marker, a window appears stating that Albany is the capital of New York. In your Google Maps JavaScript code, you can change the appearance and actions of the marker using the google.maps.Marker constructor.

Instructions

1. Open your HTML file and move to your Google Maps code.

2. Create an animated drop marker that drops on a map and bounces up and down on a location by typing:

   marker = new google.maps.Marker ( {
   map: map,
   animation: google.maps.Animation.DROP
   position: CityExample
   });

   google.maps.event.addListener (marker, 'click', toggleBounce);
   marker.setAnimation (google.maps,Animation.BOUNCE ); }

3. Change the marker icon to an image by defining the image file as the marker in the map options. For example, add:

   var photo = 'monumentPhoto.jpg';
   var exLatLng = new google.maps.LatLng (41.403226, 2.174821);
   var monumentMarker = new.google.maps.Marker ({
   position: exLatLng,
   map: map,
   icon: image });

4. Create a draggable marker by adding the draggable method to the Marker constructor. Continuing the example from Step 3, add the method to the monumentMarker variable.

   var photo = 'monumentPhoto.jpg';
   var exLatLng = new google.maps.LatLng (41.403226, 2.174821);
   var monumentMarker = new.google.maps.Marker ({
   position: exLatLng,
   draggable:true,
   map: map,
   icon: image });

References

• Google Code: Google Maps Javascript API V3 Overlays