---
# System prepended metadata

title: API란 뭘까?

---

# API란 뭘까?
안녕하세요 코딩알려주는 누나에요!👩
API란 뭘까 영상에서 진행했던 자전거 사고다발지역 보여주기 프로젝트에서 언급했던 구글맵에 장소를 표시하는 마커를 그리는 함수 공유해드립니다!
(전체 소스코드는 공유하지 않습니다! 영상보고 꼭 따라서 해보세요!👩‍🏫)

* 영상보러가기🎞:https://youtu.be/fBbRFhAGEIE

코드 참고하셔서 꼭 멋있는 나만의 프로젝트 만드세요!😍

```javascript=
function drawMap(locations) {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: new google.maps.LatLng(locations[0][1], locations[0][2]),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  });

  const infowindow = new google.maps.InfoWindow();

  let marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
    });

    google.maps.event.addListener(
      marker,
      "click",
      (function (marker, i) {
        return function () {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        };
      })(marker, i)
    );
  }
}
```

index.html 에 해당 스크립트 태그를 넣어주셔야 합니다 
```htmlmixed
<script async defer src="http://maps.google.com/maps/api/js?key=내 구글맵 api키값"type="text/javascript"></script>

```