blob: e009e26642a11e03a62c9c53d712ccca71908798 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
/**
* LatLngControl class displays the LatLng and pixel coordinates
* underneath the mouse within a container anchored to it.
* @param {google.maps.Map} map Map to add custom control to.
*/
function LatLngControl(map) {
/**
* Offset the control container from the mouse by this amount.
*/
this.ANCHOR_OFFSET_ = new google.maps.Point(8, 8);
/**
* Pointer to the HTML container.
*/
this.node_ = this.createHtmlNode_();
// Add control to the map. Position is irrelevant.
map.controls[google.maps.ControlPosition.TOP].push(this.node_);
// Bind this OverlayView to the map so we can access MapCanvasProjection
// to convert LatLng to Point coordinates.
this.setMap(map);
// Register an MVC property to indicate whether this custom control
// is visible or hidden. Initially hide control until mouse is over map.
this.set('visible', false);
}
// Extend OverlayView so we can access MapCanvasProjection.
LatLngControl.prototype = new google.maps.OverlayView();
LatLngControl.prototype.draw = function() {};
/**
* @private
* Helper function creates the HTML node which is the control container.
* @return {HTMLDivElement}
*/
LatLngControl.prototype.createHtmlNode_ = function() {
var divNode = document.createElement('div');
divNode.id = 'latlng-control';
divNode.index = 100;
divNode.style.backgroundColor = "#ffc";
divNode.style.border = "1px solid #676767";
divNode.style.fontFamily = "arial, helvetica, sans-serif";
divNode.style.fontSize = "0.7em";
divNode.style.padding = "2px 4px";
divNode.style.position = "absolute";
return divNode;
};
/**
* MVC property's state change handler function to show/hide the
* control container.
*/
LatLngControl.prototype.visible_changed = function() {
this.node_.style.display = this.get('visible') ? '' : 'none';
};
/**
* Specified LatLng value is used to calculate pixel coordinates and
* update the control display. Container is also repositioned.
* @param {google.maps.LatLng} latLng Position to display
*/
LatLngControl.prototype.updatePosition = function(latLng) {
var projection = this.getProjection();
var point = projection.fromLatLngToContainerPixel(latLng);
// Update control position to be anchored next to mouse position.
this.node_.style.left = point.x + this.ANCHOR_OFFSET_.x + 'px';
this.node_.style.top = point.y + this.ANCHOR_OFFSET_.y + 'px';
// Update control to display latlng and coordinates.
this.node_.innerHTML = [
latLng.toUrlValue(4),
'<br/>',
point.x,
'px, ',
point.y,
'px'
].join('');
};
|
