어린왕자와 여우

통계페이지를 위해 Google Maps API를 적용하여 그 위에 Marker Clusterer를 지정해 보았다.
Google Maps API v3.0에서는 어떠한 등록이나 발급 없이 바로 js를 참조하여 Map을 구현할 수 있다.

https://developers.google.com/maps/documentation/javascript/v2/examples/에서 샘플을 볼 수 있으며, 실제로 js를 다운받아 약간의 Customizing을 했다.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/js/markerclusterer.js"></script>// 해당 js파일은 샘플의 소스에서 위치 확인할 것

<style type="text/css">
    #map {
       width: 1300px;
       height: 700px;
    }
</style>

<script type="text/javascript">
    function initialize() {
        var center = new google.maps.LatLng(36.240562,127.867222);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
        for (var i = 0; i < 10; i++) {
              var latLng = new google.maps.LatLng(36.240562,127.867222); // 해당 위치로 10번 mark
              var marker = new google.maps.Marker({ position: latLng });
              markers.push(marker);
        }

        var markerCluster = new MarkerClusterer(map, markers);
      }
   
      google.maps.event.addDomListener(window, 'load', initialize);

</script>

<div id="map"></div>  

** 주요도시 위도, 경도

서울시       : 37.540705, 126.956764
인천광역시 : 37.469221, 126.573234
광주광역시 : 35.126033, 126.831302
대구광역시 : 35.798838, 128.583052
울산광역시 : 35.519301, 129.239078
대전광역시 : 36.321655, 127.378953
부산광역시 : 35.198362, 129.053922
경기도       : 37.567167, 127.190292
강원도       : 37.555837, 128.209315
충청남도    : 36.557229, 126.779757
충청북도    : 36.628503, 127.929344
경상북도    : 36.248647, 128.664734
경상남도    : 35.259787, 128.664734
전라북도    : 35.716705, 127.144185
전라남도    : 34.819400, 126.893113
제주도       : 33.364805, 126.542671

추가) 2012.08.23

특정 zoom에서 지역명이 영어로 표시되어 찾아보니 아래와 같이 옵션을 주면 한글로 모두 나온다.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ko"></script>