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>
Reference
이 문제에 관하여(Leaflet.js에서 google 맵을 생성하고 마커를 세우고 클릭시 연설 거품 확장), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rh_/items/7dde03d211720c0020f6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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>
Reference
이 문제에 관하여(Leaflet.js에서 google 맵을 생성하고 마커를 세우고 클릭시 연설 거품 확장), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rh_/items/7dde03d211720c0020f6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!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>
Reference
이 문제에 관하여(Leaflet.js에서 google 맵을 생성하고 마커를 세우고 클릭시 연설 거품 확장), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/rh_/items/7dde03d211720c0020f6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)