Google Map の埋め込み地図から拡大地図URLを生成

(´・ω・｀) < Google Map の埋め込み地図から、拡大地図のURLを取得したい????

そのままブラウザで表示させようとすると「The Google Maps Embed API must be used in an iframe.」というエラーが出る
iframe の中身はクロスドメイン制約の為取得出来ない

埋め込み地図（iframeのsrc）からパラメータを取得して拡大地図用のURLを生成

  function mapUrl(element) {
    var iframe = element.getElementsByTagName('iframe')[0];
    if (iframe) {
      var iframeSrc = iframe.src;
      var id = iframeSrc.match(/!1m2!1s(.*?)!/);
      var lon = iframeSrc.match(/!2d(.*?)!/);
      var lat = iframeSrc.match(/!3d(.*?)!/);
      var mapLink = element.querySelector('.map a');
      mapLink.href = 'https://www.google.com/maps/place/data=!3m1!4b1!4m5!3m4'
      + '!1s' + id[1]
      + '!8m2!3d' + lat[1]
      + '!4d' + lon[1];
    }
  }

function mapUrl(element) {

var iframe = element.getElementsByTagName('iframe')[0];

if (iframe) {

var iframeSrc = iframe.src;

var id = iframeSrc.match(/!1m2!1s(.*?)!/);

var lon = iframeSrc.match(/!2d(.*?)!/);

var lat = iframeSrc.match(/!3d(.*?)!/);

var mapLink = element.querySelector('.map a');

mapLink.href = 'https://www.google.com/maps/place/data=!3m1!4b1!4m5!3m4'

+ '!1s' + id[1]

+ '!8m2!3d' + lat[1]

+ '!4d' + lon[1];

}

参考にさせて頂きました

Google maps new !-style embed format | Andrew Whitby

コメントはこちらからコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

参考にさせて頂きました

関連記事

コメントはこちらから コメントをキャンセル

コメントはこちらからコメントをキャンセル