본문 바로가기

★Dev★/Etc.

[javascript] Google Maps Embed API

function SetEmbedView(lat, lng) {
    var src = "https://www.google.com/maps/embed/v1/view?"
        + "key=" + myKey
        + "&center=" + lat + "," + lng
        + "&zoom=18&maptype=satellite";
    $('#mapView').attr('src', src);
}

function SetEmbedPlace(lat, lng) {
    var src = "https://www.google.com/maps/embed/v1/place?"
        + "key=" + myKey
        + "&q=" + lat + "," + lng;
    $('#mapPlace').attr('src', src);
}	
<h5>iframe embed view</h5>
<div style="width:100%; height:400px; margin-top:20px; clear:both; border:solid 1px blue; margin:10px;">
    <iframe id="mapView" frameborder="0" style="border:0; width:100%; height:100%;"
            src="https://www.google.com/maps/embed/v1/view?key=AIzaSyBS5FV_AB6N27F1DofxhTnr2zU4WTqtwYo&center=-33.8569,151.2152&zoom=18&maptype=satellite" allowfullscreen>
    </iframe>
</div>

<h5>iframe embed place</h5>
<div style="width:100%; height:400px; margin-top:20px; clear:both; border:solid 1px blue; margin:10px;">
    <iframe id="mapPlace" frameborder="0" style="border:0; width:100%; height:100%;"
            src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBS5FV_AB6N27F1DofxhTnr2zU4WTqtwYo&q=-33.8569,151.2152" allowfullscreen>
    </iframe>
</div>

구글 지도 임베디드 API를 사용한 코드

https://developers.google.com/maps/documentation/embed/guide

 

Developer Guide  |  Maps Embed API  |  Google Developers

Easily embed and customize Google Maps on your web page or blog by setting the Google Maps Embed API URL.

developers.google.com