技術情報

jQueryでGoogle Mapを非同期更新する

■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);
}

Leave a Reply

Your email address will not be published.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)