사이트에 Google 지도 30초 내에 삽입하는 방법
이 기사의 대상자
・독학으로 웹 개발 공부를 하고 있고, Google map을 묻어 보았다고 생각했지만, 어렵고 잘 모르는 사람
・사이트내에서 목적지까지의 지도를 나타낸 사람
google map의 삽입은 간단
나도 처음에는 Google Maps API를 사용하여지도를 표시하려고했지만 너무 많은 노력이 필요하므로 권장하지 않습니다. 그래서 좀 더 간단한 방법으로 Google Map을 포함할 수 없는지 조사한 곳 간단한 방법을 찾았으므로 소개합니다.
※자신이 본 한 페이지에 묻는 것만이라면 상업 이용으로도 문제는 없다고 생각합니다
google map 포함
먼저 google map 을 검색하여 map을 엽니다.
다음으로 자신의 페이지에 올려 놓고 싶은 장소를 검색해 
(이번은 예이므로 적당히 NIMS라고 검색했습니다 특히 의미는 없습니다.)
공유 왼쪽에서 다섯 번째로 공유를 클릭한 다음 지도 퍼가기 추가를 클릭합니다.
그러면, 이런 느낌의 화면이 나오므로 HTML에 복사를 눌러 주세요.
마지막으로 html의 아무 곳이나 붙여넣어 완성합니다.
아무것도 괴롭히지 않는 HTML에 붙여 넣으면 이런 느낌이 듭니다.
코드
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25792.406650459066!2d140.10625505215506!3d36.09224890527196!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60220cc2a33e07a3%3A0x7c1de3ba4bdf8e2a!2z5Zu956uL56CU56m26ZaL55m65rOV5Lq654mp6LOq44O75p2Q5paZ56CU56m25qmf5qeL77yITklNU--8ieWNg-ePvuWcsOWMug!5e0!3m2!1sja!2sjp!4v1597760967057!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</body>
</html>
덧붙여서 마지막 편에 있는 width나 height의 값을 괴롭히는 것으로 크기를 괴롭히는 일도 할 수 있는 것 같습니다.
끝에
끝까지 기사를 보아 주셔서 감사합니다.
다른 기사에서도 이것이 다를 것이라고 생각하는 분이 있으면 삼가하지 않고 코멘트를 주면 기쁩니다.
이번에 참고하게 했다 사이트
Reference
이 문제에 관하여(사이트에 Google 지도 30초 내에 삽입하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/lot-uni/items/34418778d37aa91e92ec
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
나도 처음에는 Google Maps API를 사용하여지도를 표시하려고했지만 너무 많은 노력이 필요하므로 권장하지 않습니다. 그래서 좀 더 간단한 방법으로 Google Map을 포함할 수 없는지 조사한 곳 간단한 방법을 찾았으므로 소개합니다.
※자신이 본 한 페이지에 묻는 것만이라면 상업 이용으로도 문제는 없다고 생각합니다
google map 포함
먼저 google map 을 검색하여 map을 엽니다.
다음으로 자신의 페이지에 올려 놓고 싶은 장소를 검색해
(이번은 예이므로 적당히 NIMS라고 검색했습니다 특히 의미는 없습니다.)
공유 왼쪽에서 다섯 번째로 공유를 클릭한 다음 지도 퍼가기 추가를 클릭합니다.
그러면, 이런 느낌의 화면이 나오므로 HTML에 복사를 눌러 주세요.
마지막으로 html의 아무 곳이나 붙여넣어 완성합니다.
아무것도 괴롭히지 않는 HTML에 붙여 넣으면 이런 느낌이 듭니다.
코드
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25792.406650459066!2d140.10625505215506!3d36.09224890527196!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60220cc2a33e07a3%3A0x7c1de3ba4bdf8e2a!2z5Zu956uL56CU56m26ZaL55m65rOV5Lq654mp6LOq44O75p2Q5paZ56CU56m25qmf5qeL77yITklNU--8ieWNg-ePvuWcsOWMug!5e0!3m2!1sja!2sjp!4v1597760967057!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</body>
</html>
덧붙여서 마지막 편에 있는 width나 height의 값을 괴롭히는 것으로 크기를 괴롭히는 일도 할 수 있는 것 같습니다.
끝에
끝까지 기사를 보아 주셔서 감사합니다.
다른 기사에서도 이것이 다를 것이라고 생각하는 분이 있으면 삼가하지 않고 코멘트를 주면 기쁩니다.
이번에 참고하게 했다 사이트
Reference
이 문제에 관하여(사이트에 Google 지도 30초 내에 삽입하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/lot-uni/items/34418778d37aa91e92ec
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25792.406650459066!2d140.10625505215506!3d36.09224890527196!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60220cc2a33e07a3%3A0x7c1de3ba4bdf8e2a!2z5Zu956uL56CU56m26ZaL55m65rOV5Lq654mp6LOq44O75p2Q5paZ56CU56m25qmf5qeL77yITklNU--8ieWNg-ePvuWcsOWMug!5e0!3m2!1sja!2sjp!4v1597760967057!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</body>
</html>
끝까지 기사를 보아 주셔서 감사합니다.
다른 기사에서도 이것이 다를 것이라고 생각하는 분이 있으면 삼가하지 않고 코멘트를 주면 기쁩니다.
이번에 참고하게 했다 사이트
Reference
이 문제에 관하여(사이트에 Google 지도 30초 내에 삽입하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/lot-uni/items/34418778d37aa91e92ec텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
