google地圖區域顏色的改變 var map = new google.maps.Map(document.getElementById("map_canvas"), myOpt

可以用overlayView來實現，如：

NameOverlay.prototype = new google.maps.OverlayView(); // 擴展OverlayView

function initialize() {

var mapCenter = new google.maps.LatLng(39.917, 116.397);

var mapOptions = {

zoom: 14,

center: mapCenter,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

// 顯示地圖

var marker1LatLng = new google.maps.LatLng(39.927, 116.387);

var marker1 = new google.maps.Marker({

position: marker1LatLng, map: map, title:"北海"

});

// 定義壹個NameOverlay，顯示在指定位置

var name1View = new NameOverlay(marker1LatLng, "北海", map);

var marker2LatLng = new google.maps.LatLng(39.937, 116.387);

var marker2 = new google.maps.Marker({

position: marker2LatLng, map: map, title:"北師大"

});

var name2View = new NameOverlay(marker2LatLng, "北師大", map);

}

// NameOverlay定義

function NameOverlay(point, name, map) {

// 初始化參數：坐標、文字、地圖

this.point_ = point;

this.name_ = name;

this.map_ = map;

// 到onAdd時才需要創建div

this.div_ = null;

// 加入map

this.setMap(map);

}

NameOverlay.prototype.onAdd = function() {

// 創建壹個div，其中包含了當前文字

var div = document.createElement('DIV');

div.style.borderStyle = "none";

div.style.borderWidth = "0px";

div.style.position = "absolute";

var span = document.createElement("span");

var text = document.createTextNode(this.name_);

span.appendChild(text);

div.appendChild(span);

// Set the overlay's div_ property to this DIV

this.div_ = div;

// We add an overlay to a map via one of the map's panes.

// We'll add this overlay to the overlayImage pane.

var panes = this.getPanes();

panes.overlayImage.appendChild(div);

}

NameOverlay.prototype.draw = function() {

// 利用projection獲得當前視圖的坐標

var overlayProjection = this.getProjection();

var center = overlayProjection.fromLatLngToDivPixel(this.point_);

// 為簡單，長寬是固定的，實際應該根據文字改變

var div = this.div_;

div.style.left = center.x + 'px';

div.style.top = center.y + 'px';

div.style.width = '100px';

div.style.height = '10px';

}

NameOverlay.prototype.onRemove = function() {

this.div_.parentNode.removeChild(this.div_);

this.div_ = null;

}