| 12
 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