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
17.06.2019, 19:59:05
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
[PHP] pobierz, plaintext 
  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>
[PHP] pobierz, plaintext
trueblue
17.06.2019, 20:12:02
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
17.06.2019, 20:21:59
W oknie wyskakującym pojawia mi się to co chcę ale jak to dodać do formularza.

Zaznaczone na niebiesko.
trueblue
17.06.2019, 20:27:38
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
17.06.2019, 20:27:38
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
17.06.2019, 21:47:17
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-2025 Invision Power Services, Inc.