-
Notifications
You must be signed in to change notification settings - Fork 9
/
event_listeners.php
109 lines (92 loc) · 3.45 KB
/
event_listeners.php
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<?php
// Autoloader stuff
require( '_system/autoload.php' );
// This is just for my examples
require( '_system/config.php' );
$relevant_code = array(
'\PHPGoogleMaps\Event\EventListener',
'\PHPGoogleMaps\Event\DomEventListener',
'\PHPGoogleMaps\Event\EventListenerDecorator'
);
// Create new map
$map = new \PHPGoogleMaps\Map;
// Create 2 events
$event1 = new \PHPGoogleMaps\Event\EventListener( $map, 'idle', 'function(){alert("the map is loaded");}', true );
$event2 = new \PHPGoogleMaps\Event\EventListener( $map, 'click', 'add_marker');
// Create a DOM event
$dom_event1 = new \PHPGoogleMaps\Event\DomEventListener( 'add_random_marker', 'click', 'add_random_marker' );
$map->addObjects( array( $event1, $dom_event1 ) );
// Add this event with addObject() so we can use the return value to remove the event
$event2_map = $map->addObject( $event2 );
// Set map options
$map->setCenter( 'San Diego, CA' );
$map->setZoom( 14 );
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Event Listeners - <?php echo PAGE_TITLE ?></title>
<link rel="stylesheet" type="text/css" href="_css/style.css">
<script type="text/javascript">
function add_marker( event ) {
markers = [];
var marker = new google.maps.Marker({
position: event.latLng,
animation: google.maps.Animation.DROP,
map: <?php echo $map->getJsVar() ?>
});
markers.push(marker);
var info_window = <?php echo $map->getInfoWindowJsVar() ?>;
google.maps.event.addListener(
marker,
'click',
function() {
info_window.setContent('You clicked: ' + event.latLng.lat() + ', ' + event.latLng.lng());
info_window.open(<?php echo $map->getJsVar() ?>,marker);
}
);
return false;
}
function add_random_marker() {
lat_sw = <?php echo $map->getJsVar() ?>.getBounds().getSouthWest().lat();
lng_sw = <?php echo $map->getJsVar() ?>.getBounds().getSouthWest().lng();
lat_ne = <?php echo $map->getJsVar() ?>.getBounds().getNorthEast().lat();
lng_ne = <?php echo $map->getJsVar() ?>.getBounds().getNorthEast().lng();
lat_diff = lat_ne - lat_sw;
lng_diff = lng_ne - lng_sw;
new_lat = lat_sw + Math.random()*lat_diff;
new_lng = lng_sw + Math.random()*lng_diff;
var marker = new google.maps.Marker({
position: new google.maps.LatLng( new_lat, new_lng ),
animation: google.maps.Animation.DROP,
map: <?php echo $map->getJsVar() ?>
});
var info_window = <?php echo $map->getInfoWindowJsVar() ?>;
google.maps.event.addListener(
marker,
'click',
function() {
info_window.setContent('Random marker added: ' + new_lat + ', ' + new_lng);
info_window.open(<?php echo $map->getJsVar() ?>,marker);
}
);
return false;
}
</script>
<?php $map->printHeaderJS() ?>
<?php $map->printMapJS() ?>
</head>
<body>
<h1>Event Listeners</h1>
<?php require( '_system/nav.php' ) ?>
<p>This page has 3 event listeners added:</p>
<ol>
<li>An alert box will appear when the map is done loading (idle event).</li>
<li>When the map is clicked a marker will be added at that location.</li>
<li>When the link under the map is clicked a marker will be placed on the map in a random location.</li>
</ol>
<?php $map->printMap() ?>
<a href="#" id="add_random_marker">Add a random marker</a>, <a href="#" onclick="google.maps.event.removeListener(<?php echo $event2_map->getJsVar() ?>);alert('Map click listener has been removed')">Remove map click listener</a>
</body>
</html>