Centrage carte maps et legende

par **tigo** » 18 mai 2016, 12:49

Remplaces float:left par margin:auto au style de map-canvas comme ceci:

<div id="map-canvas" style="height:450px;width:790px;margin:auto;"></div>

par **Willy974** » 03 mai 2016, 00:11

Bonsoir a tous,
j'ai réussi a créer une petite page de recherche d’éléments sur une carte de google maps ,je me retrouve face a un problème,je voudrais centrer la carte et la légende qui est une image pour l' instant en jpeg par rapport a la page ,comme le bandeau en entête

merci par avance de vos proposition

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Carte impression intervention</title>
</head>
<center>
 <img src='../images/Bandeautitre.JPG' alt="" />
      

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&language=fr">
</script>

<form>
  <input type="text" size="60" style="height:30px" id="adresse"/>
  <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>
</center>
<span id="text_latlng"></span>
<div id="map-canvas" style="float:left;height:450px;width:790PX"></div>

<script type="text/javascript">
var geocoder;
var map;
var ctalayer;
// initialisation de la carte Google Map de départ
function initialiserCarte() {
  geocoder = new google.maps.Geocoder();
  

  //la latitude et longitude du centre la carte de départ
  var latlng = new google.maps.LatLng(43.774481,7.497540000000072);
  var mapOptions = {
    zoom      : 16,
    center    : latlng,
    mapTypeId : google.maps.MapTypeId.ROADMAP,
	streetViewControl: false,
	 
    
  }
  // map-canvas est le conteneur HTML de la carte Google Map
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 
   var ctaLayer = new google.maps.KmlLayer({
    url: 'http://www.csatmenton.com/klmgtest/lienspmenton.kml',
    map: map
  });
}


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(')', '');
    
      
      // 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
 
</script>

<img src='../images/Legende.JPG' alt="" />
<form>

</form>
<form>
</html>

Centrage carte maps et legende

Répondre

Étendre la vue Revue du sujet : Centrage carte maps et legende

Re: Centrage carte maps et legende

Centrage carte maps et legende