Google Maps niet altijd zichtbaar

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Willem poes

Willem poes

02/05/2017 09:21:14
Quote Anchor link
Dag allen,

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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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:wouter.deruytervansteveninck@rijnland.net" 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> &ensp; <input type="text" size="20" maxlength="40" id = L1 name="x1">  
<em>breedte</em> &ensp;   <input type="text" size="20" maxlength="40" id = B1 name="x1" id = b1 <Br>

  <br> Zuidwesthoek     &ensp; lengte</em> &ensp;    <input type="text" size="20" maxlength="40" id = L2 name="L2">  
<em>breedte</em>  &ensp;<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 -
 
PHP hulp

PHP hulp

07/05/2021 01:06:47
 
- Ariën -
Beheerder

- Ariën -

02/05/2017 10:27:33
Quote Anchor link
Ik zou je HTML eens door de HTML validator halen. Ik zie diverse tags die niet afgesloten zijn. Ook mist enctype="text/plain" in je form-tag.

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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.