-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdir.html
57 lines (39 loc) · 1.34 KB
/
dir.html
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
<!doctype html>
<html>
<head>
<style>
.maps-link {
margin: 0 auto;
width: 150px;
padding: 20px 0;
img { width: 150px; }
}
.details {
width: 600px;
margin: 0 auto;
font-family: "Open Sans";
}
</style>
<script>
function mapsSelector() {
if /* if we're on iOS, open in Apple Maps */
((navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPod") != -1) ||
(navigator.platform.indexOf("iPad") != -1))
window.open("maps://maps.google.com/maps?daddr=lat,long&ll=");
else /* else use Google */
window.open("https://maps.google.com/maps?daddr=lat,long&ll=");
}
</script>
</head>
<body>
<div class="maps-link">
<img style="cursor: pointer;" onclick="mapsSelector()" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/747/maps-icon.png" />
</div>
<div class="details">
<p>The above icon is liked to Google Maps. It uses a small library to detect whether or not the user is on iOS.</p>
<p>By doing this, we can ensure that all users on iOS and Android will have this link open in their native maps app. If the user is on desktop, they will get Google Maps on desktop.</p>
<p>Before implimenting this code, you would want to update the lat and long to the variables used in your application.</p>
</div>
</body>
</html>