Leaflet.js에서 google 맵을 생성하고 마커를 세우고 클릭시 연설 거품 확장

GitHub



GitHub의 내용과 동일

 

하고 싶은 일



Leaflet.js와 Google.js를 사용하여 googlemap을 생성 한 후

지정한 위치에 마커를 세워 클릭시에 말풍선을 전개시킨다

 

참고로 한 사이트



Google Maps API를 사용하여 여러 마커와 연설 거품을 설치해 보세요.

Google Maps API 웹용 Maps JavaScript API

James Croft’s Block 2197701

 

index.html



<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
    <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
    <script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
  </head>
  <body>
    <div style="width:500px; height:500px" id="map"></div>
    <script type='text/javascript'>
      var map = new L.Map('map', {center: new L.LatLng(51.51, -0.11), zoom: 9});
      var googleLayer = new L.Google('ROADMAP');
      map.addLayer(googleLayer);

      var myLatlng = new google.maps.LatLng(51.51, -0.11);
      var mapOptions = {
        zoom: 4,
        center: myLatlng
      }
      var map = new google.maps.Map(document.getElementById("map"), mapOptions);

      var marker = new google.maps.Marker({
          position: myLatlng,
          title:"Hello World!"
      });

      infoWindow = new google.maps.InfoWindow({ // 吹き出しの追加
              content: '<div class="sample">ロンドンだよ</div>' // 吹き出しに表示する内容
          });
          marker.addListener('click', function() { // マーカーをクリックしたとき
              infoWindow.open(map, marker); // 吹き出しの表示
          });

      // To add the marker to the map, call setMap();
      marker.setMap(map);

    </script>
  </body>
</html>


좋은 웹페이지 즐겨찾기