Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [PHP][MySQL]Google Maps API dane z mapy w polach formularza
brzanek
post 17.06.2019, 19:59:05
Post #1





Grupa: Zarejestrowani
Postów: 363
Pomógł: 0
Dołączył: 8.11.2012

Ostrzeżenie: (0%)
-----


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>
Go to the top of the page
+Quote Post
trueblue
post 17.06.2019, 20:12:02
Post #2





Grupa: Zarejestrowani
Postów: 5 570
Pomógł: 1519
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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.


--------------------
Go to the top of the page
+Quote Post
brzanek
post 17.06.2019, 20:21:59
Post #3





Grupa: Zarejestrowani
Postów: 363
Pomógł: 0
Dołączył: 8.11.2012

Ostrzeżenie: (0%)
-----


W oknie wyskakującym pojawia mi się to co chcę ale jak to dodać do formularza.

Zaznaczone na niebiesko.
Go to the top of the page
+Quote Post
trueblue
post 17.06.2019, 20:27:38
Post #4





Grupa: Zarejestrowani
Postów: 5 570
Pomógł: 1519
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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.


--------------------
Go to the top of the page
+Quote Post
trueblue
post 17.06.2019, 20:27:38
Post #5





Grupa: Zarejestrowani
Postów: 5 570
Pomógł: 1519
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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.


--------------------
Go to the top of the page
+Quote Post
brzanek
post 17.06.2019, 21:47:17
Post #6





Grupa: Zarejestrowani
Postów: 363
Pomógł: 0
Dołączył: 8.11.2012

Ostrzeżenie: (0%)
-----


Racja aj jakie to było proste - dzięki za pomoc.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 22.11.2019 - 07:02