[GoogleMap] 구글맵에 마커(Marker)를 추가해 보자 (1)

맵에는 역시 마커가 있어야 제 맛. 마커를 추가해 보자

<script>
        var map;
        function initMap() {
            var cityHall = {lat: 37.566554, lng: 126.978546};

            var defaultOptions = {
                zoom: 12,
                center: cityHall,
                disableDefaultUI:true,
                zoomControl: true
                };
            map = new google.maps.Map(document.getElementById('map'), defaultOptions);

            var marker = new google.maps.Marker({position: cityHall, map: map});
        }
</script>

goole.maps.Marker 객체 하나만 생성해 주면 아래와 같이 빨간 물방울을 거꾸로 한 모양의 기본 아이콘이 지정된 위치에 표시가 된다.

위에 코드를 보기 전까지는 Maker객체를 먼저 생성하고 해당 객체를 Map 객체를 생성할 때 넣어 주겠거니 생각했었는데,

그 부분이 생각했던 것과는 달랐던 것 같다. 어쨌든 잘 나온다.

기본 아이콘은 좀 식상해 보인다. 다른 이미지로 바꿔보자.

<script>
        var map;
        function initMap() {
            var cityHall = {lat: 37.566554, lng: 126.978546};

            var defaultOptions = {
                zoom: 12,
                center: cityHall,
                disableDefaultUI:true,
                zoomControl: true
                };
            map = new google.maps.Map(document.getElementById('map'), defaultOptions);

            var myIcon = new google.maps.MarkerImage("./img/caraccident.png");
            var marker = new google.maps.Marker({
                position: cityHall, 
                map: map,
                icon: myIcon
            });
        }
</script>

이미지 경로를 가지고 있는 google.maps.MarkerImage 객체만 생성해서 Maker 객체 생성 시 icon 속성에 넣어 주기만 하면 된다.

그럼 이렇게 잘 나온다.

 

역시 Maker에 대한 설명은 구글 문서에 잘 나와 있다.

https://developers.google.com/maps/documentation/javascript/adding-a-google-map

Adding a Google Map with a Marker to Your Website