-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
205 lines (193 loc) · 13.5 KB
/
Copy pathindex.html
File metadata and controls
205 lines (193 loc) · 13.5 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3MM1YSPXX2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-3MM1YSPXX2');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Instantly convert Google Maps links to Waze navigation links with one tap. Extract exact coordinates and navigate directly in Waze.">
<meta name="keywords" content="Google Maps, Waze, converter, navigation, maps, coordinates">
<title>Google Maps to Waze Converter</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="logo.png">
</head>
<body>
<header>
<div class="container header-content">
<img src="logo.png" alt="Google Maps to Waze Converter Logo" class="logo">
<div class="header-text">
<h1>Google Maps to Waze Converter</h1>
<p class="tagline">Navigate smarter with instant link conversion</p>
</div>
</div>
</header>
<main>
<section class="converter-compact">
<div class="container">
<div class="converter-form">
<input type="text" id="mapsInput" placeholder="https://maps.google.com/..." class="maps-input">
<button id="convertBtn" class="convert-button">Convert</button>
</div>
<div id="result" class="result-container" style="display: none;">
<div class="result-success">
<h3 id="resultTitle">Your links!</h3>
<div id="singleResult">
<div class="result-item">
<strong>Coordinates:</strong>
<p id="coordinates"></p>
</div>
<div class="result-item">
<strong>Navigation Links:</strong>
<div class="waze-links">
<a id="wazeUrl" href="#" target="_blank" rel="noopener" class="waze-link">Open in Waze</a>
<a id="googleMapsUrl" href="#" target="_blank" rel="noopener" class="waze-link gmaps-link">Open in Google Maps</a>
</div>
</div>
</div>
<div id="routeResult" style="display: none;">
<ol id="routeSteps" class="route-steps"></ol>
<div class="result-item route-full-link-wrapper">
<div class="waze-links">
<a id="routeFullLink" href="#" target="_blank" rel="noopener" class="waze-link">Open full route in Waze</a>
<a id="routeGoogleMapsUrl" href="#" target="_blank" rel="noopener" class="waze-link gmaps-link">Open in Google Maps</a>
</div>
</div>
</div>
<div class="result-share">
<button id="shareBtn" class="share-button">Share</button>
</div>
</div>
</div>
<div id="error" class="error-container" style="display: none;">
<p class="error-message"></p>
</div>
</div>
</section>
<section class="hero">
<div class="container">
<h2>Convert Google Maps links to Waze navigation link with one tap!</h2>
<p class="hero-description">
Transform any Google Maps location into a Waze-ready navigation link in seconds.
Perfect for quick route planning and seamless navigation.
</p>
<a href="https://t.me/gMapsToWazeBot" class="hero-button" target="_blank" rel="noopener">
<img src="Telegram-icon.png" alt="Telegram" class="button-icon">
Open Telegram Bot
</a>
</div>
</section>
<section class="example">
<div class="container">
<div class="example-content">
<a href="example.png" target="_blank" class="example-link">
<img src="example.png" alt="how to use google maps to waze" class="example-image">
<p class="click-to-enlarge">Click to view full size</p>
</a>
</div>
</div>
</section>
<section class="how-to-use">
<div class="container">
<h2>How to Use</h2>
<div class="steps">
<div class="step">
<div class="step-number">1</div>
<h3>Send Maps Link</h3>
<p>Send any Google Maps link (short or full URL)</p>
</div>
<div class="step">
<div class="step-number">2</div>
<h3>Get Coordinates</h3>
<p>Get instant response with coordinates</p>
</div>
<div class="step">
<div class="step-number">3</div>
<h3>Navigate</h3>
<p>Tap "Open in Waze" to navigate</p>
</div>
</div>
</div>
</section>
<section class="features">
<div class="container">
<h2>Features</h2>
<ul class="features-list">
<li>
<span class="feature-icon">📍</span>
<div>
<h3>Extracts exact location coordinates</h3>
<p>Accurately parses Google Maps URLs to extract precise GPS coordinates</p>
</div>
</li>
<li>
<span class="feature-icon">🔗</span>
<div>
<h3>Works with all Google Maps link formats</h3>
<p>Supports both shortened (goo.gl/maps) and full Google Maps URLs</p>
</div>
</li>
<li>
<span class="feature-icon">🚗</span>
<div>
<h3>Direct Waze navigation link</h3>
<p>One-tap access to start navigation in the Waze app</p>
</div>
</li>
</ul>
</div>
</section>
<section class="help">
<div class="container">
<h2>Need Help?</h2>
<p class="help-description">
Having issues or questions? We're here to help! Report bugs, request features,
or ask questions on our GitHub issue tracker.
</p>
<a href="https://github.com/gbitcode/gmap2waze-web/issues" class="help-button" target="_blank" rel="noopener">
Get Help on GitHub
</a>
</div>
</section>
<section class="cta">
<div class="container">
<h2>Just send a Maps link and drive!</h2>
<a href="https://t.me/gMapsToWazeBot" class="cta-button" target="_blank" rel="noopener">Try It Now</a>
</div>
</section>
</main>
<footer>
<div class="container">
<p>Google Maps to Waze Converter</p>
<p class="footer-links">
<a href="https://github.com/gbitcode/gmap2waze-web/issues" target="_blank" rel="noopener">Help</a>
<span class="separator">•</span>
<a href="https://gbitcode.com/" target="_blank" rel="noopener">GbitCode.com</a>
</p>
</div>
</footer>
<div id="shareModal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="modalTitle" hidden>
<div class="modal-dialog">
<div class="modal-header">
<h4 id="modalTitle">Share</h4>
<button id="modalClose" class="modal-close" aria-label="Close share dialog">×</button>
</div>
<div class="modal-body">
<input id="shareUrl" type="text" class="share-url-input" readonly aria-label="Shareable link">
<button id="copyBtn" class="copy-button">Copy link</button>
</div>
<div class="modal-channels">
<a id="shareTelegram" href="#" target="_blank" rel="noopener" class="channel-btn channel-telegram" aria-label="Send to Telegram">Send to <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="channel-icon"><path fill="currentColor" d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg></a>
<a id="shareWhatsapp" href="#" target="_blank" rel="noopener" class="channel-btn channel-whatsapp" aria-label="Send to WhatsApp">Send to <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="channel-icon"><path fill="currentColor" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg></a>
<a id="shareViber" href="#" class="channel-btn channel-viber" aria-label="Send to Viber">Send to <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="channel-icon"><path fill="currentColor" d="M11.4 0C9.473.028 5.333.344 3.02 2.467 1.302 4.187.696 6.7.633 9.817.57 12.933.488 18.776 6.12 20.36h.003l-.004 2.416s-.037.977.61 1.177c.777.242 1.234-.5 1.98-1.302.407-.44.972-1.084 1.397-1.58 3.85.326 6.812-.416 7.15-.525.776-.252 5.176-.816 5.892-6.657.74-6.02-.36-9.83-2.34-11.546-.596-.55-3.006-2.3-8.375-2.323 0 0-.395-.025-1.037-.017zm.058 1.693c.545-.004.88.017.88.017 4.542.02 6.717 1.388 7.222 1.846 1.675 1.435 2.53 4.868 1.906 9.897v.002c-.604 4.878-4.174 5.184-4.832 5.395-.28.09-2.882.737-6.153.524 0 0-2.436 2.94-3.197 3.704-.12.12-.26.167-.352.144-.13-.033-.166-.188-.165-.414l.02-4.018c-4.762-1.32-4.485-6.292-4.43-8.895.054-2.604.543-4.738 1.996-6.173 1.96-1.773 5.474-2.018 7.11-2.03zm.38 2.602c-.167 0-.303.135-.304.302 0 .167.133.303.3.305 1.624.01 2.946.537 4.028 1.592 1.073 1.046 1.62 2.468 1.633 4.334.002.167.14.3.307.3.166-.002.3-.138.3-.304-.014-1.984-.618-3.596-1.816-4.764-1.19-1.16-2.692-1.753-4.447-1.765zm-3.96.695c-.19-.032-.4.005-.616.117l-.01.002c-.43.247-.816.562-1.146.932-.002.004-.006.004-.008.008-.267.323-.42.638-.46.948-.008.046-.01.093-.007.14 0 .136.022.27.065.4l.013.01c.135.48.473 1.276 1.205 2.604.42.768.903 1.5 1.446 2.186.27.344.56.673.87.984l.132.132c.31.308.64.6.984.87.686.543 1.418 1.027 2.186 1.447 1.328.733 2.126 1.07 2.604 1.206l.01.014c.13.042.265.064.402.063.046.002.092 0 .138-.008.31-.036.627-.19.948-.46.004 0 .003-.002.008-.005.37-.33.683-.72.93-1.148l.003-.01c.225-.432.15-.842-.18-1.12-.004 0-.698-.58-1.037-.83-.36-.255-.73-.492-1.113-.71-.51-.285-1.032-.106-1.248.174l-.447.564c-.23.283-.657.246-.657.246-3.12-.796-3.955-3.955-3.955-3.955s-.037-.426.248-.656l.563-.448c.277-.215.456-.737.17-1.248-.217-.383-.454-.756-.71-1.115-.25-.34-.826-1.033-.83-1.035-.137-.165-.31-.265-.502-.297zm4.49.88c-.158.002-.29.124-.3.282-.01.167.115.312.282.324 1.16.085 2.017.466 2.645 1.15.63.688.93 1.524.906 2.57-.002.168.13.306.3.31.166.003.305-.13.31-.297.025-1.175-.334-2.193-1.067-2.994-.74-.81-1.777-1.253-3.05-1.346h-.024zm.463 1.63c-.16.002-.29.127-.3.287-.008.167.12.31.288.32.523.028.875.175 1.113.422.24.245.388.62.416 1.164.01.167.15.295.318.287.167-.008.295-.15.287-.317-.03-.644-.215-1.178-.58-1.557-.367-.378-.893-.574-1.52-.607h-.018z"/></svg></a>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>