Google maps API로 여러 드래곤볼 위치에 고정하세요!

11887 단어 JSONHTML자바스크립트googleHTML5

소개


  • 핀을 세우는 방법의 습관
  • for 문으로 돌려 핀을 세운다
  • JSON에서 데이터 검색
  • 마지막으로

    • 핀을 세우는 방법의 습관



    나의 한 개 전의 기사에 핀의 세우는 방법까지가 타고 있으므로, 그쪽을 참조해 주세요!
    Google maps API에서 드래곤 볼이 있는 곳에 핀을 세우세요! ! - Qiita

    이번에는 여러 핀을 세우는 방법에 대해 설명합니다. 여러 핀을 세울 때 하나씩 세우는 것도 좋지만 그렇다면 효율이 나쁘다. 그러므로 for문을 하고 효율적으로 핀을 세워 가고 싶습니다.

    HTML은 마지막으로 남아 있습니다.

    maps.html
    <html>
<head>
    <meta charset=“UTF-8”>
    <title>map</title>
    <link rel=“stylesheet” href=“css/style.css”>
</head>
<body>
    <div id=“map”></div>
    <script src=“js/map.js”></script>
    <script src=“https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap” async defer></scriptsrc>></script>
</body>
</html>

    Css도 지난번과 같습니다.

    style.css
    body {
    height: 100%;
    width: 100%;
}

#map {
    height: 100%;
    width: 100%;
}

    for문으로 돌려 핀을 세우다



    이번은 JavaScript로 핀을 복수 세우는 조작을 해 갑니다.

    map.js
    var map;
var marker;
var place_data = [
    {
        “Loc”: “バンナ公園”,
        “lat”: 24.375031,
        “lng”: 124.160795,
    },
      {
        “Loc”: “石垣島鍾乳洞”,
        “lat”: 24.361743,
        “lng”: 124.154466,
    },
      {
        “Loc”: “石垣やいま村”,
        “lat”: 24.40489,
        “lng”: 124.144636,
    }
]
var Center = {lat: 24.4064, lng: 124.1754};
function initMap() {
    map = new google.maps.Map(document.getElementById(‘map’), {
        center: Center,
        zoom: 11.5
    });
    marker()
};

function marker(){
    for(var I=0;i<place_data.length;i++) {
        marker = new google.maps.Marker({
            position: {lat: place_data[I].lat, lng: place_data[I].lng},
            map: map,
            title: place_data[I].loc
        });
    }
}

    Marker라는 함수를 만들고 그 안에서 for 문으로 돌립니다. place_data라는 배열을 작성해 그 안에 위치 정보·장소의 이름을 기입해 둡니다. 그리고는 for문으로 marker를 세워 갈 뿐입니다.

    JSON에서 데이터 검색



    방금 전에는 JavaScript의 배열안에 위치 정보나 장소의 이름을 넣고 있었습니다만, 향후를 생각해 json 쪽에 데이터를 옮겨 JavaScript와 연결하고 싶습니다.

    place.json
    var place_data = [
    {
        “Loc”: “バンナ公園”,
        “lat”: 24.375031,
        “lng”: 124.160795,
    },
      {
        “Loc”: “石垣島鍾乳洞”,
        “lat”: 24.361743,
        “lng”: 124.154466,
    },
      {
        “Loc”: “石垣やいま村”,
        “lat”: 24.40489,
        “lng”: 124.144636,
    }
]

    JSON에서 이렇게 작성하면 JavaScript로 원활하게 JSON과 연결할 수 있습니다. 나머지는 HTML로 스크립트를 추가하기 만하면됩니다.

    maps.html
    <html>
<head>
    <meta charset=“UTF-8”>
    <title>map</title>
    <link rel=“stylesheet” href=“css/style.css”>
</head>
<body>
    <div id=“map”></div>
    <script src=“js/map.js”></script>
    <script src=“data/place.json”></script>
    <script src=“https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEYg&callback=initMap” async defer></scriptsrc>></script>
</body>
</html>

    이것만으로 쉽게 JSON과 연결할 수 있습니다. 앞으로 많은 핀을 세우고 싶을 때는 역시 JSON으로 데이터를 나누는 것이 좋다고 생각하므로 여기에서 쓰는 것이 좋을 것입니다.



    마지막으로



    어땠습니까? 전회의 예고대로 복수의 핀을 세우는 방법을 소개했습니다! 다음번에는 이 핀에 정보를 묻는 방법을 소개하고 싶습니다!
    Google Apps Script 견적서에서 데이터를 전기하고 동일한 스프레드 시트에 송장 만들기
    G Suite 로고를 맞춤설정할 페이지가 없을 때의 조치

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage