Google Maps overlay

Google Maps<span class="color_h1" Overlay

Add a marker in Google Maps

Google Maps - Overlays

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

The Google Maps API has the following overlays:

Points on the map are displayed using markers, often displaying custom icons. Markers are objects of type GMarker, and icons can be customized using objects of type GIcon.
Lines on the map are displayed using polylines (representing collections of points). Lines are objects of type GPolyline.
Areas on the map appear as polygons (in the case of free-form areas) or as base overlays (in the case of rectangular areas). A polygon is similar to a closed polyline, so it can be any shape. Ground overlays are typically used for areas of the map that are directly or indirectly associated with tiles.
The map itself is displayed using tile overlays. If you have your own series of tiles, you can use the GTileLayerOverlay class to alter existing tiles on the map, or even use GMapType to create your own map type.
The information window is also a special overlay. However, please note that the information window is automatically added to the map, and the map can only add an object of type GInfoWindow.

Google Maps - Add markers

markers to 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 parameters.

Markers are designed to be interactive. For example, by default they receive "click" events, which are often used to open information windows in event listeners.

Through setMap() Method to add a mark on the map:

Instance

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

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

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Run Instance»

Click the "Run Instance" button to view online Example

Google Maps - Draggable Marker

The following example will introduce how to use the animation attribute to drag the marker:

Instance

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var marker;

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

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

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Google Maps - Icon

Markers can be displayed with a custom new icon instead of the default icon:

Example

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

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

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Google Maps - Polyline

The GPolyline object creates a linear overlay on the map. GPolyline takes a series of points and creates an ordered series of line segments connecting those points.

Polylines support the following properties:

path - specifies the latitude/longitude coordinates of multiple straight lines
strokeColor - specifies The hexadecimal color value of the line (format: "#FFFFFF")
strokeOpacity - specifies the transparency of the line (the value is 0.0 to 1.0)
strokeWeight - Defines the width of the line, in pixels.
editable - Define whether the user can edit the straight line (true/false)

Example

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:x,
  zoom:4,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

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

flightPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

##Google Maps - Polygon

GPolygon objects are similar to GPolyline objects in that they consist of an ordered series of points. However, instead of having two endpoints like a polyline, a polygon is designed to define an area that forms a closed loop.

Like polylines, you can customize the color, thickness, and transparency of polygon edges (lines), as well as the color and transparency of enclosed filled areas. Color should be a hexadecimal number HTML style.

Polygons support the following properties:

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

Example

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:x,
  zoom:4,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

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
  });

flightPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

Google Maps - Circle

Circle supports the following attributes:

##center - Specifies the center point parameter of the circle google.maps.LatLng
radius - specifies the radius of the circle in meters
strokeColor - specifies the hexadecimal color value of the arc (format: " #FFFFFF")
strokeOpacity - Specifies the transparency of the arc (the value is 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 - specifies the fill color transparency (the value is 0.0 to 1.0)
Define whether the user can edit the straight line (true/false)

Example

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
function initialize()
{
var mapProp = {
  center:amsterdam,
  zoom:7,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

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

myCity.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

Google Maps - Information Window

Display a text message window on a tag:

Instance

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

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

marker.setMap(map);

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

infowindow.open(map,marker);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Run Instance»Click " Run Example" button to view the online example

Google Maps - Overlay Reference Manual

Google Maps API Reference Manual.

← Google Maps Basics

Google Maps events →

Google Maps overlay

Google Maps<span class="color_h1" Overlay