Javascript Google Map 사용하기

구글맵 API 설정

<script src="https://maps.googleapis.com/maps/api/js?key=APIkey넘버&callback=setMap(페이지 랜더링시 호출함수)" async defer></script>

구글맵 세팅하기

 

setMap = function(){
 
  map = new google.maps.Map(
    document.getElementById(id), {zoom: zoom, center : latlng}
  )
 
}

 

id : 지도를 표시하고자하는 html tag id 값

zoom : 저는 객인적으로 11로 setting 하였고 필요에 따라 바꿔가며 쓰면됨

latlng : 지도의 중심을 설정하는 파라메터. json 형태로 위, 경도를 넘겨주면 됨

ex)

latlng = new google.maps.LatLng(lat,lng);

console.log(latlng)

output:

{

lat:23

lng:125

}

구글맵에 마크 표시하기

var tmpLatLng = {
lat: parseFloat(lat_),
lng: parseFloat(lng_)
};
 
var markers =[]; //생선한 마크 객체를 담을 리스트(그릇)
var tmpMarker = new google.maps.Marker({
  position: tmpLatLng,
  map: map,
  icon: {
  url: "/static/assets/icon.png"
}
});
markers.push(tmpMarker);

 

position : 마크를 표시하고자 하는 위치

map : 위에서 생성한 구글맵 객체

url : 자신이 사용하고 싶은 마크 이미지(스태틱) 파일 경로

구글맵 마크 지우기

deleteMarkers = function (markers) {
  for (var i = 0; i < markers.length; i++) {
  markers[i].setMap(null);
  }
}
 
deleteMarkers(markers);

markers: 위에서 생성한 마커 객체들을 담아 놓은 리스트

 

구글맵 원(반경) 그리기

drawCircleOnMap = function (centerLat, centerLng, radius) {
  if(circle){
   circle.setMap(null); //circle(원) 객체가 이미 생성되어 있다면 지우고 시작
  }
  circle = new google.maps.Circle({
    strokeColor: '#4169e1', 
    strokeOpacity: 0.8,        
    strokeWeight: 1,
    fillColor: '#4169e1',  //원 내부 색깔
    fillOpacity: 0.2,
    center: {
     lat: centerLat,  //원의 중심 위도, 경도
     lng: centerLng
    },
    radius: Number(radius) //원의 반경
  });
  circle.setMap(map);
}  
 
drawCircleOnMap(lat,lng,500);`

구글맵 히트맵 그리기

function ajax_inflow_heatmap(json) {
 
var gradient = [
'rgba(255,255,255, 0)',
'rgba(255, 255, 180, 0.8)',
'rgba(255, 230, 150, 0.8)',
'rgba(255, 191, 115, 0.8)',
'rgba(255, 166, 99, 0.8)',
'rgba(255, 140, 84, 0.8)',
'rgba(225, 115, 69, 0.8)',
'rgba(255, 89, 54, 0.8)',
'rgba(255, 64, 38, 0.8)',
'rgba(255, 26, 15, 0.8)'
// 'rgba()',
 
// '#ffff99', '#fff291', '#ffe68a', '#ffcc7a',
// '#ffbf73', '#ffb26b', '#ffa663', '#ff995c',
// '#ff8c54', '#ff804c', '#ff7345', '#ff663d',
// '#ff5936', '#ff4c2e', '#ff4026', '#ff331f',
// '#ff0000', '#ff0d08', '#ff1a0f', '#ff2617'
];
 
var areas = json['areas']; //지역리스트
var lats = json['lats']; //위도리스트
var lngs = json['lngs'];  //경도리스트
var ratios = json['ratios']; //weight 리스트
 
//$('#inflow-max').text(ratios[0]);
 
var heatMapDatas = []; //히트맵 JSON 형태의 파라매터 담을 리스트
 
for (var i in areas) {
  var location = new google.maps.LatLng(lats[i], lngs[i]);
    var weight = ratios[i] * 10;
    var heatMapData = {
      location: location,
      weight: weight //weight 에 따라 히트맵의 색깔이 변함
    };
  
  heatMapDatas.push(heatMapData)
}
 
var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapDatas JSON //파라미터 담고 있는 리스트
});
heatmap.set('radius', 75);
heatmap.set('opacity', 0.7);
// heatmap.set('gradient', gradient);
if(prevHeatmap){
  prevHeatmap.setMap(null); //이전 히트맵 객체가 있다면 지우고시작
}
heatmap.setMap(map); //위에서 생성한 지도 객체
prevHeatmap = heatmap;
})
 
}

구글맵 info window 창 띄우기

if (infoWindow){
  infoWindow.close(); //생성한 window 객체가 있다면 지우고 시작
}; 
 
infoWindow = new google.maps.InfoWindow();  //window 객체 생성
 
function popWindowInfo(info1,info2,info3,windowLatlng){
  var contents = "<div>"+"나비"+"<span class ='color_b'>"+"500m"+"</span>"+"</div>"+
  "<div>"+'우유 '+"<span class ='color_b'>"+"원숭이"+"</span>"+"</div>"+
  "<div>"+'어여 '+"<span class ='color_b'>"+"개구리" +"</span>"+"</div>"+
  "<div>"+'아야 '+"<span class ='color_b'>"+"호랑이"+"</span>"+"</div>"+
  "<div>"+"<a style ='color :blue' onclick='호출하고 싶은 함수;'>"+"가나다라마바사"+"</a>"+"</div>";
 
  infoWindow.setOptions({
    content: contents,  //info창에 띄우고 싶은 메세지
  })
  infoWindow.setPosition(windowLatlng); //info창 위치 설정
  infoWindow.open(map); //위에서 생성한 구글맵 객체에 info창 띄움
}

 

기타

- 구글맵 마우스 휠로 zoom in and out 기능 활성화하기

구글맵 객체 생성시 파라메터로 gestureHandling : 'greedy' 추가 

map = new google.maps.Map(
  document.getElementById(id),
 
  {
 
     zoom: zoom, center: mapClass.latlng,
 
     gestureHandling:'greedy'
 
   }
 
);

- 구글맵 마커 커스터마이징

마커 객체 생성시 cdn 값을 넘겨주면 된다.

참고

https://developers.google.com/maps/documentation/javascript/markers

var tmpMarker = new google.maps.Marker({
  position: tmpLatLng,
  map: cmpt.map,
  icon: {
   url: "http://maps.google.com/mapfiles/ms/micons/hospitals.png"
  }
});