18043 sujets

Questions générales et questions de débutants

Paramétrage google map

Bonjour à tous.

Je suis débutant en JavaScript et j'aurais voulu paramétrer une map google dont j'ai reçu le code, mais auquel je ne comprend pas tout.

j'ai une map déjà pré paramétrée avec quelques options et les coordonnées géographiques et je voudrais y insérer plusieurs markers dans cette map, mais j'ignore totalement la marche à suivre.

J'ai déjà essayé de regarder sur le tutoriel google map api, mais mon niveau en javascript ne me permet pas de comprendre ou insérer les lignes de code.

Voici le code que je possède :


window.onload = function () {
  "use strict";
  var styles =  [
    {
      stylers: [
        { "saturation": -10 }, 
        { "visibility": "simplified" },
        { "lightness": 20 }, 
        { "gamma": 0.5 } 
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "on" }
      ]
    }
  ];  
  
  var options = {  
  mapTypeControlOptions: {  
      mapTypeIds: ['Styled']  
  },  
      center: new google.maps.LatLng(48 , 2.45),
      scrollwheel: false,
      navigationControl: false,
      mapTypeControl: false,
      scaleControl: false,
      draggable: false,
      //mapTypeId:google.maps.MapTypeId.ROADMAP,
      zoom: 17,  
      disableDefaultUI: false,   
      mapTypeId: 'Styled'
  };  
  var div = document.getElementById('googleMap');  
  var map = new google.maps.Map(div, options);  
  var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });  
  map.mapTypes.set('Styled', styledMapType);
};


Je ne m'y connais que très peu en javasript donc je ne sais pas vraiment si je dois créer une variable ou autre pour insérer les markers

Merci beaucoup d'avance pour votre aide.
Bonjour regarde le code suivant Voir en ligne
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans titre</title>

<style type="text/css">
.map-canvas {
	position: absolute;
	margin-bottom: 20px;
	width: 100%;
	height: 500px;
	color: #29383F;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
}
</style>
</head>

<body>
<div class="map-canvas" id="map-canvas">Chargement map...</div>
</div>

<script type="text/javascript">
function initializeMap() {

    var lat = '48.915805'; //Set your latitude.
    var lon = '7.380668'; //Set your longitude.

    var centerLon = lon - 0.0105;

    var myOptions = {
        scrollwheel: false,
        draggable: true,
        disableDefaultUI: true,
        center: new google.maps.LatLng(lat, centerLon),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    //Bind map to elemet with id map-canvas
    var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
	
	
	
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(lat, lon),
    });
    var contentString = 'Autourdechezmoi.com<br>10 Rue du Sentier Vosgien<br>67290 Wingen sur Moder<br>Tél. 03 88 70 95 01<br><a href="http://autourdechezmoi.com">Autourdechezmoi.com</a>';
    var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map, marker);
    });

    infowindow.open(map, marker);
}

</script> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;callback=initializeMap"></script>

</body>
</html>

Modification a faire 
var lat = '48.915805'; //Set your latitude.
    var lon = '7.380668'; //Set your longitude.
 var contentString = 'Autourdechezmoi.com<br>10 Rue du Sentier Vosgien<br>67290 Wingen sur Moder<br>Tél. 03 88 70 95 01<br><a href="http://autourdechezmoi.com">Autourdechezmoi.com</a>';
Sujet clos
Aller à