Google Maps JavaScript API V3のカスタムコントロール

Google Maps JavaScript API V3のblog貼り付け4

カスタムコントロールの追加

昨日のつづき。
ガイドによると自分でコントロールを追加できるっぽい。

CSS と DOM 構図についてはまったく解らないがとりあえず作ってみた。

それで、少しカスタマイズしました。
最初に表示されるところを福井市、「Home」の場所を金沢市にしてあります。

ソースは以下の通り

var map;
var fukui = new google.maps.LatLng(36.0651779, 136.2215269);
var kanazawa = new google.maps.LatLng(36.5946816, 136.6255726);

/**
* The HomeControl adds a control to the map that simply
* returns the user to Chicago. This constructor takes
* the control DIV as an argument.
*/

function HomeControl(controlDiv, map) {

// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';

// Set CSS for the control border
var controlUI = document.createElement('DIV');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);

// Set CSS for the control interior
var controlText = document.createElement('DIV');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = 'Home';
controlUI.appendChild(controlText);

// Setup the click event listeners: simply set the map to Chicago
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(kanazawa)
});
}

function initialize4() {
var mapDiv = document.getElementById('map_canvas4');
var myOptions = {
zoom: 12,
center: fukui,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);

// Create the DIV to hold the control and call the HomeControl() constructor
// passing in this DIV.
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);

homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
google.maps.event.addDomListener(window, 'load', initialize4);