Google Maps niet altijd zichtbaar
Eerst het doel:
Ik heb een formulier proberen te maken waarbij mensen iets kunnen melden over iets in hun omgeving. Het is een testje voor een waterschap. Ik wil graag dat mensen hun gegevens invullen; voornaam, achternaam en op de kaart het gebied waar het probleem zich afspeeld. In vier tekstboxen onder de kaart verschijnen de lengte- en breedtegraad van de noord-oosthoek en die van de zuid-westhoek. Met deze coördinaten wil ik uiteindelijk alle meldingen in een GIS-kaart verwerken.
Nu mijn vragen:
1.op één of andere manier kan ik de kaart niet zien wanneer ik de code opsla als een htm of html bestand, maar wel zien wanneer ik de code stop in een online html code editor (http://htmlcodeeditor.com/). Hoe kan dit?
2.Ik wil graag de form verzenden met de ingevulde gegevens. Op één of andere manier lukt het mij niet om de functie 'mailto' goed te gebruiken. Wanneer ik op deze knop druk, verschijnt er een lege mail. Hoe kan dit?
bij voorbaat dank,
Wouter
code:
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
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
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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Rectangle Events</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 50%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<form action= "mailto:[email protected]" methode = "post"
<em>voornaam:</em>
<input type="text" size="20" maxlength="40" name="voornaam">
<em>achternaam</em>
<input type="text" size="20" maxlength="40" name="achternaam">
<div id="map" height="460px" width="100%"></div>
<div id="form">
<table>
<Br> Noordoosthoek lengte</em>   <input type="text" size="20" maxlength="40" id = L1 name="x1">
<em>breedte</em>   <input type="text" size="20" maxlength="40" id = B1 name="x1" id = b1 <Br>
<br> Zuidwesthoek   lengte</em>   <input type="text" size="20" maxlength="40" id = L2 name="L2">
<em>breedte</em>  <input type="text" size="20" maxlength="40" ID = B2 name="B2">
<br>
<br>
Type melding:</td> <td><select type = "text" maxlengte = 40 id='Type meding'>
<option value='waterkwaliteit' SELECTED>waterkwaliteit</option>
<option value='waterkwantiteit'>waterkwantiteit</option>
<br>
<br>
<em><Input type = "submit" value = "verzenden"
ef
<div id="form">
<div id="map"></div>
</form>
<script>
// This example adds a user-editable rectangle to the map.
// When the user changes the bounds of the rectangle,
// an info window pops up displaying the new bounds.
var rectangle;
var map;
var infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 52.164575, lng: 4.465390},
zoom: 10
});
var bounds = {
north: 52.180,
south: 52.150,
east: 4.500,
west: 4.449
};
// Define the rectangle and set its editable property to true.
rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true,
draggable: true
});
rectangle.setMap(map);
// Add an event listener on the rectangle.
rectangle.addListener('bounds_changed', showNewRect);
// Define an info window on the map.
infoWindow = new google.maps.InfoWindow();
}
// Show the new coordinates for the rectangle in an info window.
/** @this {google.maps.Rectangle} */
function showNewRect(event) {
var ne = rectangle.getBounds().getNorthEast();
var sw = rectangle.getBounds().getSouthWest();
var contentString = '<b>geselecteerd.</b><br>' +
'Noordoosthoek ' + ne.lat() + ', ' + ne.lng() + '<br>' +
'Zuidwesthoek ' + sw.lat() + ', ' + sw.lng()
L1.value = ne.lat()
L2.value = sw.lat()
B1.value = ne.lng()
B2.value = sw.lng()
// Set the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(ne);
infoWindow.open(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqU7L7uS9NRjZRwcRDEOp1CXDYsO0vM9Y&callback=initMap">
</script>
</body>
</html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Rectangle Events</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 50%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<form action= "mailto:[email protected]" methode = "post"
<em>voornaam:</em>
<input type="text" size="20" maxlength="40" name="voornaam">
<em>achternaam</em>
<input type="text" size="20" maxlength="40" name="achternaam">
<div id="map" height="460px" width="100%"></div>
<div id="form">
<table>
<Br> Noordoosthoek lengte</em>   <input type="text" size="20" maxlength="40" id = L1 name="x1">
<em>breedte</em>   <input type="text" size="20" maxlength="40" id = B1 name="x1" id = b1 <Br>
<br> Zuidwesthoek   lengte</em>   <input type="text" size="20" maxlength="40" id = L2 name="L2">
<em>breedte</em>  <input type="text" size="20" maxlength="40" ID = B2 name="B2">
<br>
<br>
Type melding:</td> <td><select type = "text" maxlengte = 40 id='Type meding'>
<option value='waterkwaliteit' SELECTED>waterkwaliteit</option>
<option value='waterkwantiteit'>waterkwantiteit</option>
<br>
<br>
<em><Input type = "submit" value = "verzenden"
ef
<div id="form">
<div id="map"></div>
</form>
<script>
// This example adds a user-editable rectangle to the map.
// When the user changes the bounds of the rectangle,
// an info window pops up displaying the new bounds.
var rectangle;
var map;
var infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 52.164575, lng: 4.465390},
zoom: 10
});
var bounds = {
north: 52.180,
south: 52.150,
east: 4.500,
west: 4.449
};
// Define the rectangle and set its editable property to true.
rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true,
draggable: true
});
rectangle.setMap(map);
// Add an event listener on the rectangle.
rectangle.addListener('bounds_changed', showNewRect);
// Define an info window on the map.
infoWindow = new google.maps.InfoWindow();
}
// Show the new coordinates for the rectangle in an info window.
/** @this {google.maps.Rectangle} */
function showNewRect(event) {
var ne = rectangle.getBounds().getNorthEast();
var sw = rectangle.getBounds().getSouthWest();
var contentString = '<b>geselecteerd.</b><br>' +
'Noordoosthoek ' + ne.lat() + ', ' + ne.lng() + '<br>' +
'Zuidwesthoek ' + sw.lat() + ', ' + sw.lng()
L1.value = ne.lat()
L2.value = sw.lat()
B1.value = ne.lng()
B2.value = sw.lng()
// Set the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(ne);
infoWindow.open(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqU7L7uS9NRjZRwcRDEOp1CXDYsO0vM9Y&callback=initMap">
</script>
</body>
</html>
Gewijzigd op 02/05/2017 10:22:15 door - Ariën -
Verder raad ik niet aan om contactformulieren te sturen via mailto , omdat niet iedereen een mail-client op zijn PC heeft staan. Een contact-formuliertje die in PHP gebouwd is, is een stuk handiger.