구글지도를 먼저 웹사이트에 붙이는 과정입니다.

1. https://www.google.co.kr/maps/에 접속합니다.

2. 회사 주소를 왼쪽 상단 지도검색란에 입력합니다.

3. 검색결과 화면을 보면 검색창 바로 아래 이런 화면이 나옵니다. 여기에서 공유를 클릭

4. 이런 창이 뜹니다. 여기에서 지도 퍼가기 클릭

5. 여기에서 <iframe으로 시작하는 부분을 복사해서 웹사이트 원하는 곳에 붙여넣기 하면 됩니다.

구글 지도 반응형 처리하기

위 복사한 코드 <iframe~~~ 이 부분을 <div>태그로 감사줍니다. 그리고 클래스를 추가합니다.

<div class="col-md-6" class="mapWrapper">

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3161.660661425396!2d126.97262231579636!3d37.58660757979412!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca2b7ef94a16b%3A0xb16d5f135eaaddc!2z7LKt7JmA64yA!5e0!3m2!1sko!2skr!4v1523367674858" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>

이제 CSS를 추가해 주어야 합니다.

.mapWrapper {

  overflow:hidden;

    padding-bottom:56.25%;

    position:relative;

    height:0;

}

.mapWrapper iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}