共享使用JavaScript生成的地图

我已经使用Google Maps JavaScript API v3在网页上创建了Google Map.它只有一堆标记和与之相关的信息窗口,没有什么花哨的.现在我要：

>使用户能够在Facebook / Twitter等社交服务上共享此Google Map(带有标记和infoWindows)
>通过单击“放大此地图”按钮,使用户能够在www.google.com/maps …中打开此地图(带有标记和infoWindows),就像他们习惯于嵌入式Google地图一样.

实际上,如果我只能实现(2)并且无法从我的网站实现(1),那么无论如何(1)可以在www.google.com/maps上实现..所以(2)是关键点.

我在网上搜索了相当长的时间,但找不到任何线索.

附言我试图使这个问题更具体,并突出显示了特定部分以方便视觉使用.

更新资料

我正在使用以下代码生成所说的Google地图

var latlng = [{
      title: 'Title 1',
      address: 'Address 1',
      city: 'City 1',
      postcode: 'Postcode 1',
      phone: 'Phone 1',
      lat: 43.7810795,
      lng: -79.3245521
    }, {
      title: 'Title 2',
      address: 'Address 2',
      city: 'City 2',
      postcode: 'Postcode 2',
      phone: 'Phone 2',
      lat: 43.7910795,
      lng: -79.3245521
    }
    /* the are many more objects like the two above ... */
  ],
  markers = [],
  infoWindows = [],
  bounds = new google.maps.LatLngBounds();

function addMarker(info, map) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(info.lat, info.lng),
    map: map,
    title: info.title,
    animation: google.maps.Animation.DROP
  });
  bounds.extend(marker.getPosition());
  markers.push(marker);

  var infoWindow = new google.maps.InfoWindow({
    content: '<div class="infowindow"><h3>' + info.title + '</h3><div>' + info.address + '<br />' + info.phone + '</div></div>',
    maxWidth: 200
  });

  infoWindows.push(infoWindow);

  google.maps.event.addListener(marker, 'click', function() {
    for (var k = 0; k < infoWindows.length; k++) {
      if (infoWindows[k] !== infoWindow) {
        infoWindows[k].close();
      }
    }
    infoWindow.open(map, marker);
  });
}


function gmapInitialize() {
  var mapOptions = {
    zoom: 8,
    center: {
      lat: latlng[0].lat,
      lng: latlng[0].lng
    }
  };

  var map = new google.maps.Map(document.querySelector('#loc_map_14'), mapOptions);

  for (var i = 0; i < latlng.length; i++) {
    addMarker(latlng[i], map);
  }

  map.fitBounds(bounds);

  (function($) {
    var map_enlarge = $('.map-enlarge'),
      map_restore = $('.map-restore'),
      site_main = $('.site-main');
    map_restore.hide();

    map_enlarge.click(function() {
      site_main.addClass('sidebar-extended');
      $(this).closest('.locations-map-cntnr').css('height', 600);
      $(this).hide();
      map_restore.show();

      google.maps.event.trigger(map, 'resize');

      map.fitBounds(bounds);

      return false;
    });

    map_restore.click(function() {
      site_main.removeClass('sidebar-extended');
      $(this).closest('.locations-map-cntnr').removeAttr('style');
      $(this).hide();
      map_enlarge.show();
      google.maps.event.trigger(map, 'resize');

      map.fitBounds(bounds);

      return false;
    });

  })(jQuery);
}

google.maps.event.addDomListener(window, 'load', gmapInitialize);

@MrUpsidown感谢您的评论,因此对(1)的回答是“也通过我网站的单独/专用URL提供与唯一内容相同的地图,然后在社交服务上共享该URL”.那是一个很好的解决方案.

您为什么要用户通过maps.google.com打开同一张地图？我的目标是用此地图替换嵌入式Google地图,并保留“在Google地图中打开”选项/按钮,以使它们无缝地重定向到google.com并仍然看到此地图.

我想我将研究使用Google Map的API创建静态地图.会调查一下.

解决方法:

对于社交共享,您将需要将整个地图配置编码为查询字符串.平庸的版本可能看起来像：

location.hash = '#' + JSON.stringify({ m:markers, i:infoWindows });

但是,鉴于强加的URL长度限制,这对Twitter永远行不通.您可以使用URL缩短服务来缩短难看的JSON URL.或者,使用一个不错的查询字符串构建器,GitHub上有很多可用的.

// at some point restore from the hash:
function restore() {
  var hash = location.hash.substring(1),
      json = hash && JSON.parse(hash);
  // do what you gotta do.
  json.m.forEach(addMarker);
  json.w.forEach(addWindow);
}
restore();  // on DOMContentLoaded or whatever

function share(markers, windows) {
  var url = location.href.replace(/#.*$/,'') + '#';
  // swap this for something less terrible:
  url += JSON.stringify({ m:markers, w:infoWindows });
  shorten(url, function(short) {
    window.open('//www.twitter.com/share?url=' + encodeURIComponent(short));
  });
}

function shorten(url, callback) {
  // use what you know. example is http://github.com/synacorinc/jan
  http.get('https://api-ssl.bitly.com/v3/shorten?access_token=ACCESS_TOKEN'+
    '&format=txt&longUrl='+encodeURIComponent(url),
    function(err, res, body) {
      callback(body);
    }
  });
}

标签：google-maps,google-maps-api-3,javascript
来源： https://codeday.me/bug/20191120/2046886.html