Google Maps

Add a marker in Google Maps

Google Maps - Overlays

Overlays are objects on the map that are bound to longitude/latitude coordinates, and move when you drag or zoom the map.

The Google Maps API has the following types of overlays:

  • Points on the map are displayed using markers, which usually display custom icons. A marker is an object of type GMarker, and you can use an object of type GIcon to customize the icon.
  • Lines on the map are displayed using polylines (which represent a collection of points). A line is an object of type GPolyline.
  • Areas on the map are displayed as polygons (if they are arbitrarily shaped regions) or ground overlays (if they are rectangular regions). A polygon is similar to a closed polyline, so it can be any shape. Ground overlays are commonly used for regions on the map that are directly or indirectly associated with tiles.
  • The map itself is displayed using tile overlays. If you have your own set of tiles, you can use the GTileLayerOverlay class to change the existing tiles on the map, or even use GMapType to create your own map type.
  • An info window is also a special kind of overlay. Note, however, that the info window is added to the map automatically, and the map can only have one object of type GInfoWindow added.

Google Maps - Adding Markers

Markers identify points on the map. By default, they use G_DEFAULT_ICON (you can also specify a custom icon). The GMarker constructor takes GLatLng and GMarkerOptions (optional) objects as arguments.

Markers are designed to be interactive. For example, by default they receive a "click" event, which is often used to open an info window in an event listener.

Add a marker to the map using the setMap() method:

Example

var marker=new google.maps.Marker({ position:myCenter, }); marker.setMap(map);

Try it Yourself »

Google Maps - Draggable Markers

The following example will show how to use the animation property to drag markers:

Example

marker=new google.maps.Marker({ position:myCenter, animation:google.maps.Animation.BOUNCE }); marker.setMap(map);

Try it Yourself »

Google Maps - Icons

Markers can be displayed with a new custom icon to replace the default icon:

Example

var marker=new google.maps.Marker({ position:myCenter, icon:'pinkball.png' }); marker.setMap(map);

Try it Yourself »

Google Maps - Polylines

A GPolyline object can create linear overlays on the map. GPolyline contains a series of points and creates a series of ordered line segments connecting these points.

Polylines support the following properties:

  • path - Specifies the latitude/longitude coordinates of multiple lines.
  • strokeColor - Specifies the hexadecimal color value of the line (format: "#FFFFFF")
  • strokeOpacity - Specifies the opacity of the line (value ranges from 0.0 to 1.0)
  • strokeWeight - Defines the width of the line, in pixels.
  • editable - Defines whether the user can edit the line (true/false)

Example

var myTrip = [stavanger,amsterdam,london]; var flightPath = new google.maps.Polyline({ path:myTrip, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2 });

Try it Yourself »

Google Maps - Polygons

A GPolygon object is similar to a GPolyline object because they both contain a series of ordered points. However, unlike a polyline, a polygon does not have two endpoints; instead, it is designed to define a region forming a closed loop.

As with polylines, you can customize the color, weight, and transparency of a polygon's edges (lines), as well as the color and transparency of the enclosed fill area. Colors should be hexadecimal numbers in HTML style.

Polygons support the following properties:

  • path - Specifies the coordinates of multiple line latitudes (the first and last coordinates are equal)
  • strokeColor - Specifies the hexadecimal color value of the line (format: "#FFFFFF")
  • strokeOpacity - Specifies the opacity of the line (value ranges from 0.0 to 1.0)
  • strokeWeight - Defines the width of the line, in pixels.
  • fillColor - Specifies the hexadecimal color value of the closed region (format: "#FFFFFF")
  • fillOpacity - Specifies the opacity of the fill color (value ranges from 0.0 to 1.0)
  • editable - Defines whether the user can edit the line (true/false)

Example

var myTrip = [stavanger,amsterdam,london,stavanger]; var flightPath = new google.maps.Polygon({ path:myTrip, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor:"#0000FF", fillOpacity:0.4 });

Try it Yourself »

Google Maps - Circle

Circles support the following properties:

  • center - Specifies the center point of the circle as a google.maps.LatLng parameter
  • radius - Specifies the radius of the circle, in meters.
  • strokeColor - Specifies the hexadecimal color value of the arc (format: "#FFFFFF")
  • strokeOpacity - Specifies the opacity of the arc (value ranges from 0.0 to 1.0)
  • strokeWeight - Defines the width of the line, in pixels.
  • fillColor - Specifies the hexadecimal color fill value of the circle (format: "#FFFFFF")
  • fillOpacity - Specifies the opacity of the fill color (value ranges from 0.0 to 1.0)
  • Defines whether the user can edit the line (true/false)

Example

var myCity = new google.maps.Circle({ center:amsterdam, radius:20000, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor:"#0000FF", fillOpacity:0.4 });

Try it Yourself »

Google Maps - Info Windows

Display a text info window on a marker:

Example

var infowindow = new google.maps.InfoWindow({ content:"Hello World!" }); infowindow.open(map,marker);

Try it Yourself »

Google Maps - Overlays Reference Manual

Google Maps API Reference Manual.

other extensions