web-dev-qa-db-fra.com

Utiliser initMap et initAutocomplete sur la même page html google maps

J'ai une page Web sur laquelle j'aimerais utiliser à la fois le lieu de saisie semi-automatique et google map avec marqueur. L'utilisateur peut rechercher une adresse sur place auto-complétée. Les données latérales pour le marqueur proviennent de DB et cela ne change pas. Le problème est que la carte fonctionne ou que vous placiez la saisie semi-automatique, mais pas les deux, et que le problème est lié aux rappels.

À partir de Google Documents, j'ai inclus les deux rappels dans des appels d'API distincts:

<script src="https://maps.googleapis.com/maps/api/js?key=[API KEY]&signed_in=true&libraries=places&callback=initAutocomplete" async defer></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=[API KEY]&callback=initMap"></script>

Mais cela jette une erreur sur la console et rien ne fonctionne.

Ma question est la suivante: comment plusieurs rappels peuvent-ils être transmis à l'API Google? 

J'apprécie beaucoup votre aide.

Merci 

google-mapsgoogle-places-api
10
nirvana74v

Vous ne pouvez pas ajouter plusieurs rappels (et vous ne devez pas inclure l'API plus d'une fois). Mettez tout le code dans un seul rappel.

<script src="https://maps.googleapis.com/maps/api/js?key=[API KEY]&signed_in=true&libraries=places&callback=initialize" async defer></script>

function initialize() {
   initMap();
   initAutoComplete();
}

ou voir cet exemple dans la documentation

function initialize() {
  initMap();
  initAutocomplete();
}
var map, marker;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: -34.397,
        lng: 150.644
      },
      zoom: 8
    });
  }
  // This example displays an address form, using the autocomplete feature
  // of the Google Places API to help users fill in the information.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */
    (document.getElementById('autocomplete')), {
      types: ['geocode']
    });

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();
  if (place.geometry.viewport) {
    map.fitBounds(place.geometry.viewport);
  } else {
    map.setCenter(place.geometry.location);
    map.setZoom(17); // Why 17? Because it looks good.
  }
  if (!marker) {
    marker = new google.maps.Marker({
      map: map,
      anchorPoint: new google.maps.Point(0, -29)
    });
  } else marker.setMap(null);
  marker.setOptions({
    position: place.geometry.location,
    map: map
  });

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
#locationField,
#controls {
  position: relative;
  width: 480px;
}
#autocomplete {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 99%;
}
.label {
  text-align: right;
  font-weight: bold;
  width: 100px;
  color: #303030;
}
#address {
  border: 1px solid #000090;
  background-color: #f0f0ff;
  width: 480px;
  padding-right: 2px;
}
#address td {
  font-size: 10pt;
}
.field {
  width: 99%;
}
.slimField {
  width: 80px;
}
.wideField {
  width: 200px;
}
#locationField {
  height: 20px;
  margin-bottom: 2px;
}
<div id="locationField">
  <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" />
</div>

<table id="address">
  <tr>
    <td class="label">Street address</td>
    <td class="slimField">
      <input class="field" id="street_number" disabled="true" />
    </td>
    <td class="wideField" colspan="2">
      <input class="field" id="route" disabled="true" />
    </td>
  </tr>
  <tr>
    <td class="label">City</td>
    <td class="wideField" colspan="3">
      <input class="field" id="locality" disabled="true" />
    </td>
  </tr>
  <tr>
    <td class="label">State</td>
    <td class="slimField">
      <input class="field" id="administrative_area_level_1" disabled="true" />
    </td>
    <td class="label">Zip code</td>
    <td class="wideField">
      <input class="field" id="postal_code" disabled="true" />
    </td>
  </tr>
  <tr>
    <td class="label">Country</td>
    <td class="wideField" colspan="3">
      <input class="field" id="country" disabled="true" />
    </td>
  </tr>
</table>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initialize" defer></script>

21
geocodezip

Vous êtes une bouée de sauvetage @geocodezip. Je n'ai pas assez de points de repère pour en faire un commentaire, mais pour continuer sur la réponse de @ goecodezip, ma carte ne fonctionnerait pas en association avec la saisie semi-automatique et j'ai trouvé que le temple HTML que j'utilisais avait un <!DOCTYPE HTML> non valide, ce qui empêchait la carte de fonctionner. apparaître. 

Pour répondre à votre question dans le commentaire de @Mamulasa concernant le stockage des données lat et long dans votre base de données, configurez deux champs de saisie masqués pour lat et lon:

<input type="hidden" id="latitude" name="lat" value="">
<input type="hidden" id="longitude" name="lon" value="">

et dans l'exemple de @ geocodezip ci-dessus, ajoutez:

document.getElementById ("latitude"). value = place.geometry.location.lat (); document.getElementById ("longitude"). value = place.geometry.location.lng ();

dans fillInAddress, cette fonction va maintenant ressembler à ceci:

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();
  if (place.geometry.viewport) {
    map.fitBounds(place.geometry.viewport);
  } else {
    map.setCenter(place.geometry.location);
    map.setZoom(17); // Why 17? Because it looks good.
  }
  if (!marker) {
    marker = new google.maps.Marker({
      map: map,
      anchorPoint: new google.maps.Point(0, -29)
    });
  } else marker.setMap(null);
  marker.setOptions({
    position: place.geometry.location,
    map: map
  });

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  //-- ADD LAT AND LON HERE TO APEND TO HIDDEN HTML INPUT 
  document.getElementById("latitude").value = place.geometry.location.lat();
  document.getElementById("longitude").value = place.geometry.location.lng();

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

Enveloppez le code HTML dans un <form method="post"> et vous pourrez maintenant obtenir tous les champs, y compris un lat et un lon cachés, à stocker dans votre base de données.

J'espère que cela t'aides. 

0
Wick 12c