Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][MySQL]Google Maps API dane z mapy w polach formularza
Forum PHP.pl > Forum > Przedszkole
brzanek
Witam mam problem z którym nie mogę sobie poradzić mam stronę z możliwością dodawania raportów na stronie i zapisywanie wszystkie w bazie danych.
Po wpisaniu pierwszych liter nazwy miejscowości pojawiają się podpowiedzi i po zaznaczeniu jednej z miejscowości w formularzu po prawej stronie pewne pola automatycznie uzupełniają się takie jak długość i szerokość oraz kod pocztowy. Brakuje mi w tym tylko tego aby automatycznie była pobierana nazwa miejscowości oraz powiat.
Kombinuję już na wszystkie sposoby ale nic mi nie wychodzi.
Tak wygląda kod
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Place Autocomplete</title>
  5. <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  6. <meta charset="utf-8">
  7. <!-- Latest compiled and minified CSS -->
  8. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  9. <!-- jQuery library -->
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  11. <!-- Latest compiled JavaScript -->
  12. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  13. <style>
  14. /* Always set the map height explicitly to define the size of the div
  15. * element that contains the map. */
  16. #map {
  17. height: 100%;
  18. }
  19. /* Optional: Makes the sample page fill the window. */
  20. html, body {
  21. height: 100%;
  22. margin: 0;
  23. padding: 0;
  24. }
  25. .controls {
  26. margin-top: 10px;
  27. border: 1px solid transparent;
  28. border-radius: 2px 0 0 2px;
  29. box-sizing: border-box;
  30. -moz-box-sizing: border-box;
  31. height: 32px;
  32. outline: none;
  33. box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  34. }
  35.  
  36. #pac-input {
  37. background-color: #fff;
  38. font-family: Roboto;
  39. font-size: 15px;
  40. font-weight: 300;
  41. margin-left: 12px;
  42. padding: 0 11px 0 13px;
  43. text-overflow: ellipsis;
  44. width: 300px;
  45. }
  46.  
  47. #pac-input:focus {
  48. border-color: #4d90fe;
  49. }
  50.  
  51. .pac-container {
  52. font-family: Roboto;
  53. }
  54.  
  55. #type-selector {
  56. color: #fff;
  57. background-color: #4d90fe;
  58. padding: 5px 11px 0px 11px;
  59. }
  60.  
  61. #type-selector label {
  62. font-family: Roboto;
  63. font-size: 13px;
  64. font-weight: 300;
  65. }
  66. </style>
  67. </head>
  68. <body>
  69. <div class="container">
  70. <?php
  71. //include('connection.php');
  72. if(isset($_POST['submit']))
  73. {
  74. $name=$_POST['name'];
  75. $lat=$_POST['lat'];
  76. $lng=$_POST['lng'];
  77. $location=$_POST['location'];
  78. $query="INSERT INTO map (name,place_Lat,place_Lng,place_Location)
  79. VALUES ('$name','$lat','$lng','$location')";
  80. if(mysqli_query($con,$query)){
  81. echo "<div class='alert alert-success'>Place inserted in Database</div>";
  82. }
  83. }
  84. ?>
  85. <div class="row"><div class="col-lg-6 alert alert-info">Google Map autocomplete Example</div></div>
  86. <div class="row">
  87. <form method="post" action="">
  88. <div class="col col-lg-6">
  89. <div id="map" style="height: 300px;width: 540px"></div>
  90. </div>
  91. <div class="col col-lg-6">
  92. Rodzaj zagrożenia
  93. <select name="ikona" id="submit-property-type" class="form-control">
  94. <option value="wiatr">Wiatr</option>
  95. <option value="tornado">Tornado</option>
  96. <option value="grad">Grad</option>
  97. <option value="deszcz">Deszcz</option>
  98. <option value="funnel">Funnel</option>
  99. <option value="wyladowania">Wyładowania</option>
  100. <option value="alert">Inne</option>
  101. </select><br>
  102.  
  103.  
  104. Name
  105. <input type="text" name="name" class="form-control"><br>
  106. <input id="pac-input" class="controls" type="text"
  107. placeholder="Enter a location">
  108. <div id="type-selector" class="controls">
  109. <input type="radio" name="type" id="changetype-all" checked="checked">
  110. <label for="changetype-all">All</label>
  111. </div>
  112. <br>
  113. <input type="text" name="lat" id="lat" class="form-control">
  114. <input type="text" name="lng" id="lng" class="form-control">
  115. <input type="text" name="location" id="location" class="form-control">
  116. <input type="text" name="country" id="country" class="form-control">
  117. <input type="submit" name="submit" value="Save" class="form-control btn btn-primary">
  118. </div>
  119. </form>
  120. </div><!--End of row-->
  121. </div><!--End of conatiner-->
  122. <script>
  123. // This example requires the Places library. Include the libraries=places
  124. // parameter when you first load the API. For example:
  125. // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
  126. //<!—ADD YOUR KEY HERE. GENERATE FROM GOOGLE MAPS API
  127.  
  128. function initMap() {
  129. var map = new google.maps.Map(document.getElementById('map'), {
  130. center: {
  131. lat: 53.42, lng: 14.55},
  132. zoom: 8
  133. });
  134. var input = /** @type {!HTMLInputElement} */(
  135. document.getElementById('pac-input'));
  136.  
  137. var types = document.getElementById('type-selector');
  138. map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  139. map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
  140.  
  141. var autocomplete = new google.maps.places.Autocomplete(input);
  142. autocomplete.bindTo('bounds', map);
  143.  
  144. var infowindow = new google.maps.InfoWindow();
  145. var marker = new google.maps.Marker({
  146. map: map,
  147. anchorPoint: new google.maps.Point(0, -29)
  148. });
  149.  
  150. autocomplete.addListener('place_changed', function() {
  151. infowindow.close();
  152. marker.setVisible(false);
  153. var place = autocomplete.getPlace();
  154.  
  155. if (!place.geometry) {
  156. // User entered the name of a Place that was not suggested and
  157. // pressed the Enter key, or the Place Details request failed.
  158. window.alert("No details available for input: '" + place.name + "'");
  159. return;
  160. }
  161.  
  162. // If the place has a geometry, then present it on a map.
  163. if (place.geometry.viewport) {
  164. map.fitBounds(place.geometry.viewport);
  165. } else {
  166. map.setCenter(place.geometry.location);
  167. map.setZoom(17); // Why 17? Because it looks good.
  168. }
  169. marker.setIcon(/** @type {google.maps.Icon} */({
  170. url: place.icon,
  171. size: new google.maps.Size(71, 71),
  172. origin: new google.maps.Point(0, 0),
  173. anchor: new google.maps.Point(17, 34),
  174. scaledSize: new google.maps.Size(35, 35)
  175. }));
  176. marker.setPosition(place.geometry.location);
  177. marker.setVisible(true);
  178. var item_Lat =place.geometry.location.lat()
  179. var item_Lng= place.geometry.location.lng()
  180. var item_Location = place.formatted_address;
  181. //alert("Lat= "+item_Lat+"_____Lang="+item_Lng+"_____Location="+item_Location);
  182. $("#lat").val(item_Lat);
  183. $("#lng").val(item_Lng);
  184. $("#location").val(item_Location);
  185. var address = '';
  186. if (place.address_components) {
  187. address = [
  188. (place.address_components[0] && place.address_components[0].short_name || ''),
  189. (place.address_components[1] && place.address_components[1].short_name || ''),
  190. (place.address_components[2] && place.address_components[2].short_name || '')
  191. ].join(' ');
  192. }
  193.  
  194. infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
  195. infowindow.open(map, marker);
  196. });
  197.  
  198.  
  199.  
  200.  
  201.  
  202.  
  203. // Sets a listener on a radio button to change the filter type on Places
  204. // Autocomplete.
  205. function setupClickListener(id, types) {
  206. var radioButton = document.getElementById(id);
  207. radioButton.addEventListener('click', function() {
  208. autocomplete.setTypes(types);
  209. });
  210. }
  211.  
  212. setupClickListener('changetype-all', []);
  213. setupClickListener('changetype-address', ['address']);
  214. setupClickListener('changetype-establishment', ['establishment']);
  215. setupClickListener('changetype-geocode', ['geocode']);
  216. }
  217. </script>
  218. <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=initMap"
  219. async defer></script>
  220. </body>
  221. </html>
trueblue
A przy tym gotowcu też sporo się namęczyłeś?
Skoro z odpowiedzi (adresu) pobierane są 3 pierwsze komponenty, to sprawdź co jest w kolejnych.
brzanek
W oknie wyskakującym pojawia mi się to co chcę ale jak to dodać do formularza.

Zaznaczone na niebiesko.
trueblue
Po prostu wstawić tą wartość do pola formularza? Skoro wiesz skąd się bierze w treści dymka, to wiesz w jakiej zmiennej jest przechowywana.
trueblue
Po prostu wstawić tą wartość do pola formularza? Skoro wiesz skąd się bierze w treści dymka, to wiesz w jakiej zmiennej jest przechowywana.
brzanek
Racja aj jakie to było proste - dzięki za pomoc.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2019 Invision Power Services, Inc.