개발

Json 기초, 구글맵 본문

Frontend/JavaScript

Json 기초, 구글맵

Study 2021. 6. 20. 18:18

뭔가... gif용량제한때문에 줄이다보니까 묘하게 느낌이 엄청빠르고 이상하네요..

 

Json 활용입니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <head>
        <script src="../js/store.js"></script>
        <script>
            var googlemap;
            var markerArr=[];
            function myMap() {
                var mapProp= {
                center:new google.maps.LatLng(37.500644282977774, 127.03644287891468),
                zoom:15};
                var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
                for(var i=0;i<store.storeList.length;i++){
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(store.storeList[i].latLng.lat,store.storeList[i].latLng.lng),
                        icon:{scaledSize : new google.maps.Size(50,50),
                            url:store.storeList[i].image
                        },
                        animation:google.maps.Animation.BOUNCE
                    });
 
                    markerArr.push(marker);
                    marker.setMap(map);
                    var contents= store.storeList[i].name+"<br>"+store.storeList[i].review
                    //이벤트리스너가 포문 안에 있을때는 포문이 다 돌고나서 몰아서 도는것으로 추정 
                    //펑션으로 따로 빼서 돌리면 포문이 돌떄마다 적용 확인
                    infowindows(marker,contents,map)
                }
            }
 
            function infowindows(marker,contents,map){
                google.maps.event.addListener(marker,'click', function() {
                    var infowindow = new google.maps.InfoWindow({
                        content:contents
                    });
                    infowindow.open(map,marker);
                });
            }
            </script>
    </head>
<body>
<h1>My First Google Map</h1>
<div id="googleMap" style="width:100%;height:800px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=당신의키&callback=myMap"></script>
</body>
</html>
 cs

'Frontend > JavaScript' 카테고리의 다른 글

Class 객체 예제  (0) 2021.05.01
회원관리 페이지 예제  (0) 2021.03.21
팝업 이미지카드 예제  (0) 2021.03.21
베네치아 타자게임 예제  (2) 2021.03.21
그림판 만들기 예제  (0) 2021.03.20
'Frontend/JavaScript' Related Articles more