본문 바로가기

DEMO CODE/jQuery 활용

구글 지도 예제소스

반응형
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
50
51
52
53
54
55
56
<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key= YOUKEY &sensor=false">
 </script>
 <script type="text/javascript">
 // 메인 가운데 마커
 var myLatlng = new google.maps.LatLng(37.524975,126.987135);
   
 //추가 마커
 var neighborhoods = [
    new google.maps.LatLng(37.524975,126.987135),
    new google.maps.LatLng(37.549061, 126.422975),
    new google.maps.LatLng(37.497622, 126.396110),
    new google.maps.LatLng(37.517683, 126.394393)
 ];
  
 var markers = [];
 var iterator = 0;
 var map;
 function initialize() {
    var mapOptions = {
    zoom: 12,
    center: myLatlng
 };
 map = new google.maps.Map(document.getElementById('DIV-ID'),mapOptions);
   drop();
 }
  
 function drop() {
   for (var i = 0; i < neighborhoods.length; i++) {
     setTimeout(function() {
       addMarker();
     }, i * 200);
   }
 }
  
function addMarker() {
   markers.push(new google.maps.Marker({
     position: neighborhoods[iterator],
     map: map,
     draggable: false,
     animation: google.maps.Animation.DROP
  }));
   iterator++;  
}
  
//지도 로드 이벤트
google.maps.event.addDomListener(window'load', initialize);
 
//지도 리사이즈 이벤트
google.maps.event.addDomListener(window"resize"function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});
</script>
                                                                                                                                                         
반응형

'DEMO CODE > jQuery 활용' 카테고리의 다른 글

[Chart] Morris.js Bar Chart  (0) 2016.03.25
[Chart] Morris.js Area Chart  (0) 2016.03.25
[Chart] Morris.js Line Chart  (0) 2016.03.25
[jQuery] jqGrid Multiple Footer 테이블  (0) 2014.05.09
[jQuery] jqGrid array 테이블  (0) 2014.05.08