3

私は Google Maps API v3 を使用しています。いくつかのマーカーが付いたシンプルなマップがあります。プルダウンリストもあります。これを機能させるには、最小限のコードが必要です。プルダウン リストでマーカーを選択し、選択したマーカーをそれにパンさせたいと思います。オンラインで見るだけでなく、すべてを試してみましたが、これまでのところ何も機能しておらず、非常にイライラしています. 助けてください！ここにスニペットがあります：

私はこれを機能させる方法を理解する必要があります

<!DOCTYPE html> <!-- saved from url=(0014)about:internet  -->    
<html>
  <head>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
    </script>
    <br>
    <script>
        var geocoder;
        var directionsService;
        var directionsDisplay;
        //Start of code (above is framework)  
      function initialize() {
        var myLatLng = new google.maps.LatLng(41.682, -100.103);
        var mapOptions = {
          zoom: 5,
          center: myLatLng,
          mapTypeId: google.maps.MapTypeId.HYBRID
        };
        //Map Framework above
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); //Map Options

        //google.maps.event.addDomListener(document.getElementById('SelectList'),
        //  'change', function() {}
        //var mypos = document.getElementById('SelectList').value;

        // Marker2 (Red - default marker color)
            var latLng2 = new google.maps.LatLng(43.239316, -96.259241);
            var contentString2 = '<div id="content">'+
            var infowindow2 = new google.maps.InfoWindow({
            content: contentString2
            });

            var marker2 = new google.maps.Marker({
            position: latLng2,
            icon: src='http://maps.google.com/mapfiles/kml/paddle/red-circle.png',
            //new google.maps.Size(42,68)
            //size: (12, 10),
            //position: mypos,
            map: map,
            title: "marker ...)" //hover 
            });


            google.maps.event.addListener(marker2, 'click', function() {
            infowindow2.open(map, marker2);

            });

            //moved 'SelectList' up toward top!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

        // End code for Marker 2
        // Start of Marker3 (Yellow - marker color)
            var latLng3 = new google.maps.LatLng(44.021778, -96.052417); 
            var contentString3 = '<div id="content">'+
            var infowindow3 = new google.maps.InfoWindow({
            content: contentString3
            });

            var marker3 = new google.maps.Marker({
            position: latLng3,
            icon: src='http://maps.google.com/mapfiles/kml/paddle/ylw-circle.png',
            map: map,
            title: "Marker ..."   
            });

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

        // End for Marker 3
        // Start of Marker4 (Green - marker color)
            var latLng4 = new google.maps.LatLng(43.881690, -95.922869); 
            var contentString4 = '<div id="content">'+
            var infowindow4 = new google.maps.InfoWindow({
            content: contentString4
            });

            var marker4 = new google.maps.Marker({
            position: latLng4,
            icon: src='http://maps.google.com/mapfiles/kml/paddle/grn-circle.png',
            map: map,
            title: "marker ..."   
            });

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

            var infowindow4 = new google.maps.InfoWindow({
            content: contentString4
            });
            google.maps.event.addListener(marker4, 'click', function() {
            infowindow4.open(map, marker4);
            });
            // End code for Marker 3

            });

</script> 
</head>
    <body onload="initialize()">
        <div id="map_canvas" style="width:80%; height:95%"></div>
        <br>
        <div style="position: absolute; right: 25px; top: 15px; padding: 10px 10px 10px 10px;">
        <h3><u>Marker List by area</u></h3>
        </div>
        <br>
        <div style="position: absolute; right: 25px; top: 165px; padding: 10px 10px 10px 10px;"> 
        <form>
           <fieldset>
              <legend><b>Region 1</b></legend>
              <p>
             <label><b>Marker List</b></label>
             <select id = "myList3">
               <option value = "9">Marker 1</option>
               <option value = "10">Marker 2</option>
               <option value = "11">Marker 3</option>
               <option value = "12">Marker 4</option>
             </select>
              </p>
           </fieldset>
        </form></div>
    </body>
</html>
4

1 に答える 1