1

ドロップダウンから選択可能なGoogleマップに基本的なマーカーをプロットするコードをいくつか作成しました。

ただし、同じオプションを含む2つのドロップダウンを作成し、ドロップダウンで選択されたマーカーのみを表示したいと思います(つまり、100以上のマーカーがありますが、2つしか表示されません)。また、2 つのポイントの間に「線を引く」ことも好きで、その場所にカーソルを合わせると (Google マップのように) ポップアップ ウィンドウが表示されます。最後に、ウィンドウをマーカーに合わせてサイズ変更できますか?

ここに私がこれまでに持っているものがあります:

<!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="https://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
// Here you can specify all list of your geolocation options
                window.markers = {
                               'Moscow': {lat: 55.74257, lng: 37.61547}, 
                               'Saint Petersburg': {lat: 59.93952, lng: 30.31202}
                };

// This is a initialization of map and set of all markers
  function initialize() {
    var latlng = new google.maps.LatLng(window.markers['Moscow'].lat, window.markers['Moscow'].lng);
    var myOptions = {
      zoom: 5,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    window.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                for(i in window.markers){
                               var marker = new google.maps.Marker({  
                                 position: new google.maps.LatLng(window.markers[i].lat, window.markers[i].lng),
                                 map: map  
                               });                           
                }
  }

// This is a handler for dropdown change
  function mychange(element){
                var city = new google.maps.LatLng(window.markers[element.value].lat, window.markers[element.value].lng);
                map.setCenter(city);
                return false;
  }
</script>
</head>
<body onload="initialize()">

// This is your dropdown
  <select onchange='mychange(this)'>
                <option value='Moscow'>Moscow
                <option value='Saint Petersburg'>Saint Petersburg
  </select>

// This DIV for you map
  <div id="map_canvas" style="width:100%; height:100%"></div>

</body>
</html>
4

0 に答える 0