Javascript Girl
  1. Javascript Girl
  3. Utilisation de l'adresse au lieu de la longitude et de la Latitude avec l'API Google Maps
Intereting Posts
Comment enregistrer une variable sur Android en utilisant Cocos2D-JS? Quelle est la différence entre String (valeur) vs value.toString () Graphique de zone empilé dans nvd3js – Dépassement de l'axe X Comment ajouter l'auditeur d'événements pour la case à cocher dans la fenêtre contextuelle de l'extension Chrome? Tirer dynamiquement le marqueur sur le dernier point dans les diagrammes élevés Angulaire – Meilleure pratique pour récupérer des données à partir d'une méthode d'usine Invitez des amis à Facebook en utilisant JavaScript sdk Quelle bibliothèque de minification javascript produit de meilleurs résultats? Affichage de pdf à partir de arraybuffer Comment définir la valeur d'un champ caché d'entrée par javascript? Comment faire pour que la boîte de texte soit activée et désactivée dans jquery Créer des plates-formes 2d en utilisant JavaScript L'accès JavaScript peut-il être rempli de mots de passe? AngularJS: mise à jour d'une entrée avec un flot dynamique de modèle ng à chaque pression de touche XMLHttpRequest: Erreur réseau 0x80070005, accès refusé sur Microsoft Edge (mais pas IE)

Utilisation de l'adresse au lieu de la longitude et de la Latitude avec l'API Google Maps

J'ai entendu dire qu'il est possible de soumettre une adresse au lieu de Longitude et Latitude et cela serait beaucoup plus réalisable pour mon système. L'utilisateur doit saisir leur adresse lors de la création de leur profil et leur profil ensuite affichera Google Maps de leur maison. J'ai l'API Google Maps qui fonctionne parfaitement avec Longitude et Latitude: 

<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="css.css" /> <title>Login Page</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"> </script> <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(52.640143,1.28685), zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), mapOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(52.640143,1.28685), map: map, title: "Mark On Map" }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head>

Quelqu'un pourrait-il m'aider à modifier mon code afin qu'il permette à l'API Google Maps de demander une adresse à sa place car je souhaite lire l'adresse de l'utilisateur directement à partir de la base de données mySQL.

Voir cet exemple, initialise la carte à "San Diego, CA".

Utilise le Geocoder Google Maps JavaScript API v3 pour traduire l'adresse en coordonnées qui peuvent être affichées sur la carte. 

 <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var geocoder; var map; var address ="San Diego, CA"; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); if (geocoder) { geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (status != google.maps.GeocoderStatus.ZERO_RESULTS) { map.setCenter(results[0].geometry.location); var infowindow = new google.maps.InfoWindow( { content: '<b>'+address+'</b>', size: new google.maps.Size(150,50) }); var marker = new google.maps.Marker({ position: results[0].geometry.location, map: map, title:address }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } else { alert("No results found"); } } else { alert("Geocode was not successful for the following reason: " + status); } }); } } </script> </head> <body style="margin:0px; padding:0px;" onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"> </body> </html>

Extrait du code de fonctionnement: 

 var geocoder; var map; var address = "San Diego, CA"; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); if (geocoder) { geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (status != google.maps.GeocoderStatus.ZERO_RESULTS) { map.setCenter(results[0].geometry.location); var infowindow = new google.maps.InfoWindow({ content: '<b>' + address + '</b>', size: new google.maps.Size(150, 50) }); var marker = new google.maps.Marker({ position: results[0].geometry.location, map: map, title: address }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); } else { alert("No results found"); } } else { alert("Geocode was not successful for the following reason: " + status); } }); } } google.maps.event.addDomListener(window, 'load', initialize); 
 html, body, #map_canvas { height: 100%; width: 100%; } 
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <div id="map_canvas" ></div>

Voici mon code pour générer une carte à partir de l'emplacement

Code HTML 

  <div class="col-md-2"> <address> <?php echo $doctorInfo[0]->serachLocation;?> // set address for which you need to generate map</address> </div>

Code Javascript 

 <script> $(document).ready(function(){ $("address").each(function(){ var embed ="<iframe width='425' height='350' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&amp;q="+ encodeURIComponent( $(this).text() ) +"&amp;output=embed'> </iframe>"; $(this).html(embed); }); }); </script>

Pour en savoir plus cliquez ici

Le géocodage est le processus de conversion des adresses (comme «1600 Amphitheatre Parkway, Mountain View, CA») en coordonnées géographiques (comme la latitude 37.423021 et la longitude -122.083739), que vous pouvez utiliser pour placer des marqueurs ou positionner la carte.

Serait-ce ce que vous cherchez: Contient un exemple de code
https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests

Vous pouvez analyser la géolocalisation à travers les adresses. Créez un tableau avec jquery comme ceci: 

 var addressesArray = [ 'Address Str.No, Postal Area/city', //follow this structure ] //loop all the addresses and call a marker for each one for (var x = 0; x < addressesArray.length; x++) { $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addressesArray[x]+'&sensor=false', null, function (data) { var p = data.results[0].geometry.location var latlng = new google.maps.LatLng(p.lat, p.lng); var aMarker= new google.maps.Marker({ position: latlng, //it will place marker based on the addresses, which they will be translated as geolocations. map: map }); }

Notez également que Google limite vos résultats si vous ne possédez pas de compte commercial et que vous obtenez une erreur si vous utilisez trop d'adresses.