1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
   | <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
    function initialize() {
    // *** *** Création de la carte *** ***
    // *** Centrage sur le centre de la France ***
    latlng_c=[45.462367,4.389975] //"Stade Geoffroy-Guichard, France"
 
    var latlng = new google.maps.LatLng(latlng_c[0],latlng_c[1]);
    var myOptions = {
      zoom: 5,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    var nom;
    var site;
    var address;
    var latlng;
 
    side_bar_html = "";
    gmarkers = [];
 
    // *** Ajout des marqueur ***
    var tMarker = [
        {
        nom:"Le louvre",
        phone:"01..",
        address:"Paris",
        latlng:[48.861101, 2.335324],
        },
        {
        nom:"La Part Dieu",
        phone:"04..",
        address:"Lyon",
        latlng:[45.760892, 4.859519],
        }
    ]
 
 
    for (m in tMarker){
        mark_Address(map,tMarker[m].nom,tMarker[m].phone,tMarker[m].address,tMarker[m].latlng);
        //alert(tMarker[m].address)
    }
 
    document.getElementById("side_bar").innerHTML = side_bar_html;
 
 
    } // fin de la fonction initialize()
 
 
    // ******  Fonction marquage ******
    function mark_Address(map,nom,phone,address,latlng_c) {
        var latlng = new google.maps.LatLng(latlng_c[0],latlng_c[1]);
        var myWindowOptions = {
            content:
            '<p align="center"><font size="4">'+nom+'<br>'+phone+'<br>'+address+'<br></font></p>'
        };
        var myInfoWindow = new google.maps.InfoWindow(myWindowOptions);
        var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: nom
        });
        // Affichage de la fenêtre au click sur le marker
        google.maps.event.addListener(marker, 'click', function() {
            myInfoWindow.open(map,marker);
        });
        gmarkers.push(marker);
        side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + nom + '<\/a><br>';
    }
 
    // Récupération du click correspondant et ouverture de la fenêtre associée
    function myclick(i) {
        google.maps.event.trigger(gmarkers[i], "click");
    }
 
 
</script>
</head>
<body onload="initialize()">
<table border=1>
  <tr>
    <td width = 250 valign="top" style="text-decoration: underline; color: #4444ff;">
       <div id="side_bar"></div>
    </td>
    <td>
       <div id="map_canvas" style="width: 1000px; height: 700px"></div>
    </td>
  </tr>
</table>
 
</body>
</html> | 
Partager