■HTMLソース
入力した緯度、経度で地図を更新する。
緯度:<input id="prg-coordY" name="coordY" type="text" value="42.341617697423"/>
経度:<input id="prg-coordX" name="coordX" type="text" value="142.34922160482"/>
<input type="button" value="入力した緯度・経度で地図を更新する" class="p5" onclick="updateMap();"/>
<div id="y-map" style="width: 100%; height: 500px">
<iframe
src="https://maps.google.co.jp/maps?output=embed&q=42.341617697423,142.34922160482"
frameborder="0" style="border: 0" allowfullscreen
id="gmap_com" width="100%" height="500px"></iframe>
</div>
■Javascriptソース
iframeのsrcを一回空にしてから更新対象のurlを設定することで実現可能。
// Google Mapを更新する
function updateMap() {
var url_temp = "https://maps.google.co.jp/maps?output=embed&q=";
var prg_coordY = $("#prg-coordY").val();
var prg_coordX = $("#prg-coordX").val();
if (prg_coordY == '' || prg_coordX == '') {
return;
}
var src = url_temp + prg_coordY + "," + prg_coordX;
$("#gmap_com").attr("src", "");
$("#gmap_com").attr("src", src);
}