사이트에 구글맵 연동하기

사이트에 구글맵을 연동하려면 두 가지의 방법이 있다.

1. api key로 집어넣기

2. iframe으로 집어넣기

첫번째 방법은 지도만 딱! 나오고 깔끔하나, 문제는 연동하기까지가 복잡하고 귀찮다

두번째 방법은 정말 간단하고 간단하나, 문제는 지도상에 여러것들이 나와 지저분하다.

나는 이러저러한 이유로 지저분하지만 간단한 두번째 방법을 사용하고 있다.(클라이언트가 별다른 말을 하지 않는이상 두번째로..)

연동방법은 다음과 같다.

1. 구들맵에 접속한다. (https://www.google.co.kr/maps/)

2. 원하는 위치를 검색한다.  그냥 아무런 이유없이 신도림 디큐브시티로 검색해봤음.

3. 오른쪽 하단에 있는 Setting 이미지를 클릭하여 Share and Embed Map을 선택한다.

4. Embed map을 클릭하면 iframe소스가 나온다.

   소스 왼쪽 select박스에서 iframe의 크기를 정할수 있으며, 정하지 않더라도 실소스나 css에서 크기를 정할 수 있다.

이번에 작업한 사이트에 적용한 예다.