세계지도에 해외도시 표시해주는 스킨을 만들고 싶습니다.
본문
아래 팁을 활용해서, 국내주소와 지도를 함께 표현하는 스킨을 유용하게 사용하고 있습니다.
혹시 이와 비슷한 형태로 구글맵 등을 활용한 세계지도를 구현할 수 있을까요?
세계주요도시별 주요지점을 지도에 표시하고 정보를 제공하는 스킨을 만들려고 하고 있습니다.
검색을 해봐도 국내지점이나 지사 스킨은 많은데, 세계지도와 관련된 자료는 없네요.
관련한 정보나 자료등 도움 부탁 드립니다.
감사합니다.
답변 1
안녕하세요.
구글맵 API 를 통해 사용을 해보세요.
1. 구글 맵 API 키 발급
먼저 구글 클라우드 플랫폼에서 구글 맵 API 키를 발급받아야 합니다. API 키는 구글 맵을 웹사이트에 삽입하기 위해 필요합니다.
2. HTML 및 JavaScript 코드 작성
구글 맵을 사용하여 세계 주요 도시를 표시하고, 마커를 클릭하면 정보를 제공하는 기본 예제를 작성합니다.
<!DOCTYPE html>
<html>
<head>
<title>World Map with Markers</title>
<style>
#map {
height: 100%;
width: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: {lat: 20, lng: 0}
});
var cities = [
{name: 'New York', lat: 40.7128, lng: -74.0060, info: 'New York, USA'},
{name: 'London', lat: 51.5074, lng: -0.1278, info: 'London, UK'},
{name: 'Tokyo', lat: 35.6895, lng: 139.6917, info: 'Tokyo, Japan'},
{name: 'Paris', lat: 48.8566, lng: 2.3522, info: 'Paris, France'},
{name: 'Sydney', lat: -33.8688, lng: 151.2093, info: 'Sydney, Australia'}
];
cities.forEach(function(city) {
var marker = new google.maps.Marker({
position: {lat: city.lat, lng: city.lng},
map: map,
title: city.name
});
var infowindow = new google.maps.InfoWindow({
content: city.info
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
});
}
</script>
</head>
<body onload="initMap()">
<div id="map"></div>
</body>
</html>
3. 그누보드와 통합
예를 들어, latest.skin.php 파일을 수정하여 위의 구글 맵 코드를 포함할 수 있습니다.
4. 기타 참고
https://www.daleseo.com/google-maps-api/
네~ 상세한 답변 감사 드립니다. 구글맵 관련 자료중 "달레" 사이트 영상을 열심히 살펴보고 있는 중입니다.^^
답변 주신 내용중 3. 그누보드와 통합부분에서, wr_1 과 wr_2 에 위도 경도를 입력하면 그 지점이 표시되고, 마크를 누르면 해당 게시물 내용이 보이게 하면 되지 않을까 싶은데, 이 부분이 난관이네요.
일단 수작업으로 몇몇 지역을 연결해 놓고, 게시판 연동을 고민해야 할 것 같습니다.
감사합니다.