埋め込みGoogleマイマップの異なるブレークポイントでズーム率を変更する必要があります。あなたが見ることができるように地図がこの埋め込みのための異なるブレークポイントのズーム率を変更するGoogleマイマップ
<iframe src="https://www.google.com/maps/d/embed?mid=ID_here&z=15" width="100%"></iframe>
ようiframeに埋め込むされ、ズームは15ですが、私は携帯電話やタブレットデバイス上でそれを変更する必要があります。
これを行う方法がありますか？このような
おそらく何か：
http://jsbin.com/tucanayiye/edit?html,output
<!DOCTYPE html>
<html>
<head><title>test</title></head>
<body>
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBu9SPYB9qp2PTe1M1_TyBAQN4c-yL8HYQ
&q=Space+Needle,Seattle+WA&zoom=10" allowfullscreen>
</iframe>
<script>
function setEmbeddedMapZoom() {
var zoomForPhone = 15;
var defaultZoom = 10;
var baseSrc = 'https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Space+Needle,Seattle+WA&zoom=';
if (window.innerWidth < 1600) {
document.getElementsByTagName('iframe')[0].setAttribute('src', baseSrc + zoomForPhone);
} else {
document.getElementsByTagName('iframe')[0].setAttribute('src', baseSrc + defaultZoom);
}
}
window.addEventListener('resize', setEmbeddedMapZoom);
</script>
</body>
</html>