Tijden veranderen
Google Maps API
Als ik de website volg dan komt er niks daarnaast wil ik het zonder javascript.
De map moet boven het contactformulier over de gehele breedte.
Kan iemand mij helpen?
** niet relevant linkje verwijderd **
Code (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
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
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - Roadtrippy</title>
<link rel="stylesheet" href="layout.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<script defer src="js/script.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=JOUW_API_SLEUTEL&callback=initMap" async defer></script>
</head>
<body>
<header>
<div class="logo">
<img src="Media/Logo.png" alt="Roadtrippy Logo" width="128" height="128">
<h1>Roadtrippy</h1>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="roadtrips.html">Roadtrips</a>
<ul class="submenu">
<li><a href="locaties.html">Locaties</a></li>
<li><a href="tips.html">Tips</a></li>
</ul>
</li>
<li><a href="tips.html">Huren</a></li>
<li><a href="contact.html" class="active">Contact</a></li>
</ul>
</nav>
</header>
<!-- Google Maps API -->
<section class="map-container">
<div id="map" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</section>
<main>
<section class="contact-form">
<h2>Neem contact met ons op</h2>
<form action="https://jkorpela.fi/cgi-bin/echo.cgi" method="post">
<label for="name">Naam *</label>
<input type="text" id="name" name="name" required>
<label for="email">E-mail *</label>
<input type="email" id="email" name="email" required>
<label for="phone">Telefoonnummer</label>
<input type="tel" id="phone" name="phone">
<label for="message">Bericht *</label>
<textarea id="message" name="message" required></textarea>
<p id="demo" style="display:none">Bedankt voor je vraag.</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Verstuur</button>
</form>
</section>
</main>
<footer>
<p>© 2025 Roadtrippy. Alle rechten voorbehouden.</p>
</footer>
</body>
</html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - Roadtrippy</title>
<link rel="stylesheet" href="layout.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<script defer src="js/script.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=JOUW_API_SLEUTEL&callback=initMap" async defer></script>
</head>
<body>
<header>
<div class="logo">
<img src="Media/Logo.png" alt="Roadtrippy Logo" width="128" height="128">
<h1>Roadtrippy</h1>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="roadtrips.html">Roadtrips</a>
<ul class="submenu">
<li><a href="locaties.html">Locaties</a></li>
<li><a href="tips.html">Tips</a></li>
</ul>
</li>
<li><a href="tips.html">Huren</a></li>
<li><a href="contact.html" class="active">Contact</a></li>
</ul>
</nav>
</header>
<!-- Google Maps API -->
<section class="map-container">
<div id="map" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</section>
<main>
<section class="contact-form">
<h2>Neem contact met ons op</h2>
<form action="https://jkorpela.fi/cgi-bin/echo.cgi" method="post">
<label for="name">Naam *</label>
<input type="text" id="name" name="name" required>
<label for="email">E-mail *</label>
<input type="email" id="email" name="email" required>
<label for="phone">Telefoonnummer</label>
<input type="tel" id="phone" name="phone">
<label for="message">Bericht *</label>
<textarea id="message" name="message" required></textarea>
<p id="demo" style="display:none">Bedankt voor je vraag.</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Verstuur</button>
</form>
</section>
</main>
<footer>
<p>© 2025 Roadtrippy. Alle rechten voorbehouden.</p>
</footer>
</body>
</html>
Gewijzigd op 19/03/2025 11:38:57 door - Ariën -
Gewijzigd op 19/03/2025 11:40:31 door - Ariën -
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<section class="map-container">
<div id="map" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp = {
center: new google.maps.LatLng(51.508742, -0.120850),
zoom: 5,
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</section>
<div id="map" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp = {
center: new google.maps.LatLng(51.508742, -0.120850),
zoom: 5,
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</section>
De juiste id (map) moet in zowel de HTML als de JavaScript-code worden gebruikt.
De link die ging naar de website, is dat niet relevant?
@Jesper S
Ah, ik had het section stukje van een een website gehaald om te kijken hoe het eruit moest zien maar over het hoofd gezien dat er een link is met de id.
Nu krijg ik trouwens "Oeps! Er is iets misgegaan." en ik wilde natuurlijk mijn eigen coördinaten.
Dat wilde ik ook weten hoe ik dat moest doen.
Kan dan hierin iets wijzigen of moet ik dan via google developers dat aanmaken?
Ik stel het meer op prijs als mensen, als ze een link willen delen, dat het een eenvoudige testcase is, en niet een link naar een hele site. Maar gebruik van JSfiddle juich ik zeker toe met bonuspunten.
Voor Google Maps heb je inderdaad een API-key nodig. Zonder deze key zal je een melding krijgen. Of je kan natuurlijk ook gebruiken maken van OSM (Open Street Maps) met bijv. de Leaflet JS library.
Ik vind het een verademing: https://leafletjs.com/examples/quick-start/
En daarnaast is deze up-to-dater dan Google Maps. Zo heeft het serieus 2 jaar geduurd voordat een nieuwe straat op de kaart werd opgenomen. Bij OSM duurde het heel kort.
Gewijzigd op 20/03/2025 14:03:37 door - Ariën -
- Ariën - op 20/03/2025 13:59:22:
De code had je al geplaatst! Dan is de link niet echt interessant meer, en komt het een beetje spammerig over.
Ik stel het meer op prijs als mensen, als ze een link willen delen, dat het een eenvoudige testcase is, en niet een link naar een hele site. Maar gebruik van JSfiddle juich ik zeker toe met bonuspunten.
Voor Google Maps heb je inderdaad een API-key nodig. Zonder deze key zal je een melding krijgen. Of je kan natuurlijk ook gebruiken maken van OSM (Open Street Maps) met bijv. de Leaflet JS library.
Ik vind het een verademing: https://leafletjs.com/examples/quick-start/
En daarnaast is deze up-to-dater dan Google Maps. Zo heeft het serieus 2 jaar geduurd voordat een nieuwe straat op de kaart werd opgenomen. Bij OSM duurde het heel kort.
Ik stel het meer op prijs als mensen, als ze een link willen delen, dat het een eenvoudige testcase is, en niet een link naar een hele site. Maar gebruik van JSfiddle juich ik zeker toe met bonuspunten.
Voor Google Maps heb je inderdaad een API-key nodig. Zonder deze key zal je een melding krijgen. Of je kan natuurlijk ook gebruiken maken van OSM (Open Street Maps) met bijv. de Leaflet JS library.
Ik vind het een verademing: https://leafletjs.com/examples/quick-start/
En daarnaast is deze up-to-dater dan Google Maps. Zo heeft het serieus 2 jaar geduurd voordat een nieuwe straat op de kaart werd opgenomen. Bij OSM duurde het heel kort.
Ok dan weet ik dat voor de volgende keer.
Ik ga is kijken naar OSM want ik vind die google maar niks hoe dat werkt.