How to Make a Google Map Overlay

Create a custom map for your website displaying points of interest using the Google Maps overlay function in Google Maps API V3. A Google Maps overlay is a point or set of points that sit on top of a Google map. For example, a website on Barcelona, Spain may use an overlay to show a push-pin marker on the location of popular Barcelona tourist attractions. You define the position of an overlay using the latitude and longitude of the marker's location. Since the overlay is tied to a set of coordinates, Google displays the overlay correctly even if the user zooms in or zooms out on the map.

Instructions

1. Locate the scripts in your HTML file referencing your Google map. Add the overlay code to your map script.

2. Enter the latitude and longitude for the overlay using the ".LatLng" object. For example, to place the Sagrada Familia Cathedral on your Barcelona city map, type:

   var MySFCLatLng = new.google.maps.LatLng (41.403226, 2.174821);

3. Create the point on the overlay by using the ".Marker" function. Continuing the example, type:

   var SFCMarker = new.google.maps.Marker ({
   position: MySFCLatLng,
   title: "Sagrada Familia Cathedral"
   }):

4. Add the marker overlay to the map using the "setMap" function. In this example, type:

   marker.setMap(map);

5. Save your file and upload to your Web server to test your map overlay. In this example, you should see a red push-pin and the label "Sagrada Familia Cathedral" on the location of the cathedral on a Barcelona city map.

Tips & Warnings

• For multiple points on the overlay, enter additional locations using the ".LatLng" object.

References

• Google Maps JavaScript API V3: Adding Overlays