Google 地图 API V3 之 叠加层

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);  
var mapOptions = {  
  zoom: 4,  
  center: myLatlng,  
  mapTypeId: google.maps.MapTypeId.ROADMAP,  
}  
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  
  
var marker = new google.maps.Marker({  
    position: myLatlng,  
    title:"Hello World!"  
});  
  
// To add the marker to the map, call setMap();  
marker.setMap(map);  

function initialize() {  
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);  
  var mapOptions = {  
    zoom: 4,  
    center: myLatlng,  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  }  
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  
  
  var image = ‘beachflag.png‘;  
  var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);  
  var beachMarker = new google.maps.Marker({  
      position: myLatLng,  
      map: map,  
      icon: image  
  });  
}  

function initialize() {  
  var mapOptions = {  
    zoom: 10,  
    center: new google.maps.LatLng(-33.9, 151.2),  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  }  
  var map = new google.maps.Map(document.getElementById("map_canvas"),  
                                mapOptions);  
  
  setMarkers(map, beaches);  
}  
  
/** 
 * Data for the markers consisting of a name, a LatLng and a zIndex for 
 * the order in which these markers should display on top of each 
 * other. 
 */  
var beaches = [  
  [‘Bondi Beach‘, -33.890542, 151.274856, 4],  
  [‘Coogee Beach‘, -33.923036, 151.259052, 5],  
  [‘Cronulla Beach‘, -34.028249, 151.157507, 3],  
  [‘Manly Beach‘, -33.80010128657071, 151.28747820854187, 2],  
  [‘Maroubra Beach‘, -33.950198, 151.259302, 1]  
];  
  
function setMarkers(map, locations) {  
  // Add markers to the map  
  
  // Marker sizes are expressed as a Size of X,Y  
  // where the origin of the image (0,0) is located  
  // in the top left of the image.  
  
  // Origins, anchor positions and coordinates of the marker  
  // increase in the X direction to the right and in  
  // the Y direction down.  
  var image = new google.maps.MarkerImage(‘images/beachflag.png‘,  
      // This marker is 20 pixels wide by 32 pixels tall.  
      new google.maps.Size(20, 32),  
      // The origin for this image is 0,0.  
      new google.maps.Point(0,0),  
      // The anchor for this image is the base of the flagpole at 0,32.  
      new google.maps.Point(0, 32));  
  var shadow = new google.maps.MarkerImage(‘images/beachflag_shadow.png‘,  
      // The shadow image is larger in the horizontal dimension  
      // while the position and offset are the same as for the main image.  
      new google.maps.Size(37, 32),  
      new google.maps.Point(0,0),  
      new google.maps.Point(0, 32));  
      // Shapes define the clickable region of the icon.  
      // The type defines an HTML <area> element ‘poly‘ which  
      // traces out a polygon as a series of X,Y points. The final  
      // coordinate closes the poly by connecting to the first  
      // coordinate.  
  var shape = {  
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],  
      type: ‘poly‘  
  };  
  for (var i = 0; i < locations.length; i++) {  
    var beach = locations[i];  
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);  
    var marker = new google.maps.Marker({  
        position: myLatLng,  
        map: map,  
        shadow: shadow,  
        icon: image,  
        shape: shape,  
        title: beach[0],  
        zIndex: beach[3]  
    });  
  }  
}  

marker = new google.maps.Marker({  
  position: new google.maps.LatLng(-25.363882, 131.044922),  
  icon: {  
    path: google.maps.SymbolPath.CIRCLE,  
    scale: 10  
  },  
  draggable: true,  
  map: map  
});  

function initialize() {  
  var myLatLng = new google.maps.LatLng(0, -180);  
  var mapOptions = {  
    zoom: 3,  
    center: myLatLng,  
    mapTypeId: google.maps.MapTypeId.TERRAIN  
  };  
  
  var map = new google.maps.Map(document.getElementById("map_canvas"),  
      mapOptions);  
  var flightPlanCoordinates = [  
    new google.maps.LatLng(37.772323, -122.214897),  
    new google.maps.LatLng(21.291982, -157.821856),  
    new google.maps.LatLng(-18.142599, 178.431),  
    new google.maps.LatLng(-27.46758, 153.027892)  
  ];  
  var flightPath = new google.maps.Polyline({  
    path: flightPlanCoordinates,  
    strokeColor: "#FF0000",  
    strokeOpacity: 1.0,  
    strokeWeight: 2  
  });  
  
  flightPath.setMap(map);  
}  

var poly;  
var map;  
  
function initialize() {  
  var chicago = new google.maps.LatLng(41.879535, -87.624333);  
  var mapOptions = {  
    zoom: 7,  
    center: chicago,  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  };  
  
  map = new google.maps.Map(document.getElementById(‘map_canvas‘), mapOptions);  
  
  var polyOptions = {  
    strokeColor: ‘#000000‘,  
    strokeOpacity: 1.0,  
    strokeWeight: 3  
  }  
  poly = new google.maps.Polyline(polyOptions);  
  poly.setMap(map);  
  
  // Add a listener for the click event  
  google.maps.event.addListener(map, ‘click‘, addLatLng);  
}  
  
/** 
 * Handles click events on a map, and adds a new point to the Polyline. 
 * @param {MouseEvent} mouseEvent 
 */  
function addLatLng(event) {  
  
  var path = poly.getPath();  
  
  // Because path is an MVCArray, we can simply append a new coordinate  
  // and it will automatically appear  
  path.push(event.latLng);  
  
  // Add a new marker at the new plotted point on the polyline.  
  var marker = new google.maps.Marker({  
    position: event.latLng,  
    title: ‘#‘ + path.getLength(),  
    map: map  
  });  
}  

var lineCoordinates = [  
  new google.maps.LatLng(22.291, 153.027),  
  new google.maps.LatLng(18.291, 153.027)  
];  
  
var lineSymbol = {  
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW  
};  
  
var line = new google.maps.Polyline({  
  path: lineCoordinates,  
  icons: [{  
    icon: lineSymbol,  
    offset: ‘100%‘  
  }],  
  map: map  
});  

var lineCoordinates = [  
  new google.maps.LatLng(22.291, 153.027),  
  new google.maps.LatLng(18.291, 153.027)  
];  
  
var lineSymbol = {  
  path: ‘M 0,-1 0,1‘,  
  strokeOpacity: 1,  
  scale: 4  
};  
  
var line = new google.maps.Polyline({  
  path: lineCoordinates,  
  strokeOpacity: 0,  
  icons: [{  
    icon: lineSymbol,  
    offset: ‘0‘,  
    repeat: ‘20px‘  
  }],  
  map: map  
});  

var lineCoordinates = [  
  new google.maps.LatLng(22.291, 153.027),  
  new google.maps.LatLng(18.291, 153.027)  
];  
  
var symbolOne = {  
  path: ‘M -2,0 0,-2 2,0 0,2 z‘,  
  strokeColor: ‘#F00‘,  
  fillColor: ‘#F00‘,  
  fillOpacity: 1  
};  
  
var symbolTwo = {  
  path: ‘M -2,-2 2,2 M 2,-2 -2,2‘,  
  strokeColor: ‘#292‘,  
  strokeWeight: 4  
};  
  
var symbolThree = {  
  path: ‘M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3‘,  
  strokeColor: ‘#00F‘,  
  rotation: 0  
};  
  
var line = new google.maps.Polyline({  
  path: lineCoordinates,  
  icons: [{  
    icon: symbolOne,  
    offset: ‘0%‘  
    },{  
      icon: symbolTwo,  
      offset: ‘50%‘  
    },{  
      icon: symbolThree,  
      offset: ‘100%‘  
    }  
  ],  
  map: map  
});  

var line;  
  
function initialize() {  
  var mapOptions = {  
    center: new google.maps.LatLng(20.291, 153.027),  
    zoom: 6,  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  };  
    
  var map = new google.maps.Map(document.getElementById("map_canvas"),  
      mapOptions);  
        
  var lineCoordinates = [  
    new google.maps.LatLng(22.291, 153.027),  
    new google.maps.LatLng(18.291, 153.027)  
  ];  
  
  var lineSymbol = {  
    path: google.maps.SymbolPath.CIRCLE,  
    scale: 8,  
    strokeColor: ‘#393‘  
  };  
  
  line = new google.maps.Polyline({  
    path: lineCoordinates,  
    icons: [{  
      icon: lineSymbol,  
      offset: ‘100%‘  
    }],  
    map: map  
  });  
}  
  
function animateCircle() {  
    var count = 0;  
    offsetId = window.setInterval(function() {  
      count = (count + 1) % 200;  
  
      var icons = line.get(‘icons‘);  
      icons[0].offset = (count / 2) + ‘%‘;  
      line.set(‘icons‘, icons);  
  }, 20);  
}