Google Map Overlays

Adding a marker in Google Maps

Google Maps - Overlays

Overlays are objects bound to the latitude / longitude coordinates on the map, drag or zoom the map will move with you.

Google Maps API are the following overlays:

Point using markers on the map to show the often display a custom icon. Markers are objects GMarker type, and can be used to customize the types of objects GIcon icon.
Lines on the map using polylines (representing a collection of points) to be displayed. GPolyline line of type object.
Areas on the map is displayed as polygons (if the area is an arbitrary shape) or bottom overlay (if it is a rectangular area). Polygon similar to a closed polyline, it can be any shape. Ground overlays are commonly used to map the area with tiles directly or indirectly associated.
The map itself is displayed using a tile overlay. If you own a series of tiles, you can use GTileLayerOverlay class to change the existing tiles on the map, you can even use GMapType to create your own map types.
Information window is also a special kind of overlay. Note, however, the information window will be automatically added to the map, and the map can only add one type GInfoWindow object.

Google Maps - Add tag

Map identifies points on the record. By default, they use G_DEFAULT_ICON (You can also specify a custom icon). GMarker constructor GLatLng and GMarkerOptions (optional) object as a parameter.

Tags designed to be interactive. For example, by default, they receive "click" events, often used to open the info window in the event listeners.

By setMap () method to add markers on the map:

Examples

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

marker.setMap(map);

try it"

Google Maps - draggable marker

The following example describes how to use the animation property to drag the marker:

Examples

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

marker.setMap(map);

try it"

Google Maps - icon

Tag can be defined from the new icon is displayed in place of the default icon:

Examples

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

marker.setMap(map);

try it"

Google Maps - polyline

GPolyline object can create a linear overlay on the map. GPolyline include a series of points and creates a series of orderly lines connecting these points.

Polyline supports the following attributes:

path - specify more than one line of latitude / longitude coordinates
strokeColor - specifies the hexadecimal color value of the line (format: "#FFFFFF")
strokeOpacity - Transparency designated line (the value 0.0 to 1.0)
strokeWeight - Defines the width of the line, in pixels.
editable - whether the user can edit the definition of a straight line (true / false)

Examples

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

try it"

Google Maps - Polygon

GPolygon objects are similar GPolyline objects because they include a series of ordered points. However, the polygons are two endpoints, but the design of the closed loop area is defined formation.

And the line, you can customize the color and transparency of the polygon edges (lines) color, thickness and transparency, as well as the closure of the filled area. Colors should be in hexadecimal numeric HTML style.

Polygon supports the following attributes:

path - specify multiple linear latitude coordinates (first and last coordinates are equal)
strokeColor - specifies the hexadecimal color value of the line (format: "#FFFFFF")
strokeOpacity - Transparency designated line (the value 0.0 to 1.0)
strokeWeight - Defines the width of the line, in pixels.
fillColor - closed area designated hexadecimal color values (format: "#FFFFFF")
fillOpacity - Transparency specify the fill color (which is 0.0 to 1.0)
editable - whether the user can edit the definition of a straight line (true / false)

Examples

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"

Google Maps - Round

Round supports the following attributes:

center - the center point of the circle specified parameters google.maps.LatLng
radius - specifies the radius of the circle, in meters
strokeColor - Specifies the arc hexadecimal color values (format: "#FFFFFF")
strokeOpacity - Transparency designated arc (the value 0.0 to 1.0)
strokeWeight - Defines the width of the line, in pixels.
fillColor - specifies the hexadecimal color value of the circle fill value (format: "#FFFFFF")
fillOpacity - Transparency specify the fill color (which is 0.0 to 1.0)
Defines whether the user can edit a straight line (true / false)

Examples

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

try it"