[RESOLU] Maps Api

par **wil974** » 27 juin 2016, 03:27

Salut,

Nickel , Rien à dire , je te remercie beaucoup...

par **ynx** » 24 juin 2016, 14:55

Salut,

Le problème semble venir du fait que tu utilises plusieurs objet map : en effet tu initialise ta map (var map = new google.maps...) dans la fonction load(), or puisque cette variable map est définie dans cette fonction, elle n'est donc pas accessible hors de cette fonction et la fonction TrouverAdresse() ne peut donc pas appliquer des modifications sur cette map.

Une solution simple est donc de déclarer l’initialisation de la variable map dès le début du script js en dehors de toute fonction afin de pouvoir l'utiliser de manière globale dans tout le script et dans les fonctions (il est également possible de le faire passer en tant que paramètre des fonctions). Par exemple :

<script type="text/javascript">
  // on initialise la variable map dès le début du script en dehors de toute fonction
  var map = null;

  var customIcons = // [...] suite de ton code

  function load() {
     // on remplace le "var map = ..." par "map = ..." car la variable est déjà initialisée
     //var map = new google.maps.Map...
     map = var map = new google.maps.Map...
     // [...] suite de ton code
  }

La fonction TrouverAdresse() utilisera ainsi le même objet map que celui-ci utilisé dans la fonction load(), ce qui devrait résoudre ton problème.

Bonne journée,

par **wil974** » 23 juin 2016, 18:13

bonjour a tous,

tout d'abord je tiens a vous remercier pour les précédent aide sur des questions que je vous ai posé et répondu avec rapidité
et le petit plus c'est aussi que ça marche

toujours en quette d’évolution , je travaille sur une carte,le but de la carte je vous le décrit c'est pour le sapeurs-pompiers:

on tape une adresse on affiche cette adresse sur la carte avec le marqueur ,et des markers personnaliser qui affiche a certains endroit "les position de poteau incendie" ,ce qui permets lors d'une intervention incendie de situé ou elle ce trouve et de voir les points d'eau si il son disponible ou pas,

le tout les position de c'est poteau sont dans une bdd

en ce moment :
j'arrive a afficher la carte avec le poteau sur la carte:voici le code

<!DOCTYPE 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>PHP/MySQL & Google Maps Example</title>
    
    
  <form>
  <input type="text" size="60" style="height:30px" id="adresse"/>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="button" size="60" style="height:30px" value="Localiser l'intervention " onclick="TrouverAdresse();"/>
  <input type="button" size="60" style="height:30px" onclick="javascript:window.print()" value="Imprimer la carte"/>
  <input type="button" size="60" style="height:30px" onclick="document.location.reload(false)" value="Rafraichir la carte"/>
</form>


    <script src="https://maps.googleapis.com/maps/api/js?key=keyperso"
	type="text/javascript"></script>
    <script src="https://maps.googleapis.com/geocode/api/js?=keyperso"
		    type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
      }
    };

    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() 
	
{}
    

  </script>

  </head>

  <body onload="load()">
    <div id="map" style="width: 800px; height: 500px"></div>
  </body>

</html>

mais le probleme est pour le geocodage .

pour le geocodage je ce code la :

function TrouverAdresse() {
  // Récupération de l'adresse tapée dans le formulaire
  var adresse = document.getElementById('adresse').value;
  geocoder.geocode( { 'address': adresse}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      // Récupération des coordonnées GPS du lieu tapé dans le formulaire
      var strposition = results[0].geometry.location+"";
      strposition=strposition.replace('(', '');
      strposition=strposition.replace(')', '');
      // Affichage des coordonnées dans le <span>
      document.getElementById('text_latlng').innerHTML='Coordonnées : '+strposition;
      // Création du marqueur du lieu (épingle)
	  
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location,
	   	  zoom : 16,
      });
    } else {
      alert('Adresse introuvable: ' + status);
    }
  });
}
// Lancement de la construction de la carte google map
google.maps.event.addDomListener(window, 'load', initialiserCarte);
var mapOptions = {
    zoom      : 16,
}
  map: map

et je n'arrive pas a l’insérer sur la carte de départ(donc le premiers code)

Voila ,j'espere que je me suis fais bien comprendre

merci par avance si vous avez une petite solution

[RESOLU] Maps Api

Répondre

Étendre la vue Revue du sujet : [RESOLU] Maps Api

Re: Maps Api

Re: Maps Api

Maps Api