소개

인스턴스 생성

맵 작성

let map = new google.maps.Map(document.getElementById('googlemap'));

map 표시 범위 설정

//地図の南西を指定
var sw = new google.maps.LatLng(maxLat,minLng);
//地図の北東を指定
var ne = new google.maps.LatLng(minLat,maxLng);
// 南西, 北東から表示範囲を指定する
var bounds = new google.maps.LatLngBounds(sw, ne);
map.fitBounds(bounds);

마커 만들기

markerObj = new google.maps.Marker({
  position: new google.maps.LatLng({lat: mapPin[i]['latitude'], lng: mapPin[i]['longitude']}), // markerの場所を指定
  map: map, // markerを表示する対象のmapを指定
  zIndex: 1, // zIndexを指定(option)
  icon:{ // 表示するiconを指定(option)
    url: './img/marker_default.png', // 表示する画像
    scaledSize: new google.maps.Size(20,20), // 表示する画像のサイズを指定
  },
});

infoWindow 만들기

infoWindow = new google.maps.InfoWindow({
  content: <div>text</div>,
});

방법 목록

map의 중심을 오른쪽으로 x, 위로 y픽셀 이동시킨다

map.panBy(x, y);

map의 중심지를 지정한 값으로 한다

var latlng = new google.maps.LatLng(latitude, longitude); // 緯度経度インスタンスを作成  
map.panTo(latlng); // mapの中心を指定した緯度経度に設定

infoWindow를 닫았을 때의 거동을 설정

google.maps.event.addListener(infoWindow[i] , 'closeclick' , () => {
  // 処理
});

마커 클릭시 처리

markerObj[i].addListener('click', () => {
  // 処理
});

마커 설정 변경

markerObj.setOptions({
  zIndex: 2,
  icon: {
    url: './img/marker_active.png',
  },
});

데모 페이지를 만들었습니다.