/
embedmap.php
207 lines (157 loc) · 5.82 KB
/
embedmap.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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create embeddable traffic maps</title>
<style>
input[type=text]{
padding:0.5em;
width:20em;
}
input[type=submit]{
padding:0.4em;
}
#map_canvas{
width:100%;
height: 30em;
}
#iframecode {
background-color: #e5eecc;
}
</style>
</head>
<body>
<?php
if($_GET){
//get user-submitted address and chosen zoom level
//no local database involved so need to sanitize the input (Google likely does this on their end)
$data = geocode($_GET['address']);
$zoom = $_GET['zoom'];
//default zoom if user does not enter one
if (!$zoom) {
$zoom = 14;
}
//encode address
$mapaddress = urlencode($_GET['address']);
//create iframe link with encoded address and zoom level. Link refers to a separate page that displays
//only the map without any additional elements for better embedding.
//you must add your domain below
$mapurl = "http://[ADD YOUR DOMAIN HERE]/embedmap_display.php?address={$mapaddress}&zoom={$zoom}";
// proceeds only if address is geocoded
if($data){
$latitude = $data[0];
$longitude = $data[1];
$address = $data[2];
?>
<!-- google map will be shown here -->
<div id="map_canvas">Geocoding address...</div><br>
COPY AND PASTE THE ENTIRE IFRAME CODE THAT IS BOLDED BELOW<br>
The iframe below will embed at a smaller size than the map above. If you want to change the size, after cutting and pasting the code below, edit the values for width and height. If the map is not centered exactly where you want it, look at the map for a better or more appropriate intersection and enter it to create another map. Note: in rare cases, Google may not be able to find an address or intersection. If so, try another nearby location.<br><br>
<?php
//display iframe link
if($mapurl) {
echo "<div id='iframecode'>";
echo "<b><iframe width="320" height="320" frameborder="0" style="border:0" scrolling='no' src="$mapurl"><iframe></b>";
}
echo "</div>";
?>
<br><br>
This is what the embed will look like below if you do not edit the width and height values. To create another map scroll down and enter a new address.<br>
<?php
if($mapurl) {
echo "<iframe width='320' height='320' frameborder='0' style='border:0' scrolling='no' src=" . $mapurl . "></iframe>";
}
?>
<!-- JavaScript to show google map -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init_map() {
var options = {
zoom: <?php echo $zoom; ?>,
center: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
mapTypeId: google.maps.MapTypeId.ROADMAP,
//styles code to turn off points of interest on map
styles:
[
{
featureType: "poi",
elementType: "labels",
stylers:
[
{
visibility: "off"
}
]
}
]
};
map = new google.maps.Map(document.getElementById("map_canvas"), options);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
//map.panBy(0, 60);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
<?php
// mapping address error
}else{
echo "Can not find address/intersection.";
}
}
?>
<div>
<H1>Traffic map embed</H1>
<div>Enter an address, intersection, zip code, place name, point of interest or road name below to generate a traffic map of the surrounding area you can embed.</div><br>
<div>Examples:</div>
<div>1. 1 Gannett Drive, White Plains, NY</div>
<div>2. Hutchinson River Parkway, New Rochelle, NY</div>
<div>3. I-87 and 9W, West Nyack, NY</div>
<div>4. Tappan Zee Bridge</div>
<br>
</div>
<!-- address form -->
<form action="embedmap.php" method="get">
<input type='text' name='address' placeholder='Enter location' /><br>
<input type='text' name='zoom' placeholder='Zoom level - enter a number' /> (typically a number from 8 to 14; higher numbers zoom in more)<br>
<input type='submit' value='Submit' />
</form>
<?php
// function to geocode address, it will return false if unable to geocode address
function geocode($address){
// url encode the address
$address = urlencode($address);
// google map geocode api url
$url = "http://maps.google.com/maps/api/geocode/json?sensor=false&address={$address}";
// get the json response
$resp_json = file_get_contents($url);
// decode the json
$resp = json_decode($resp_json, true);
// response status will be 'OK', if able to geocode given address
if($resp['status']='OK'){
// get the important data
$lati = $resp['results'][0]['geometry']['location']['lat'];
$longi = $resp['results'][0]['geometry']['location']['lng'];
$formatted_address = $resp['results'][0]['formatted_address'];
// verify if data is complete
if($lati && $longi && $formatted_address){
// put the data in the array
$data_arr = array();
array_push(
$data_arr,
$lati,
$longi,
$formatted_address
);
return $data_arr;
}else{
return false;
}
}else{
return false;
}
}
?>
</body>
</html>