Question

我使用Google Maps JavaScript API v3在我的网页上创建了Google地图。它只有很多标记和信息窗口与它们相关联，没什么特别的。现在我想：

让用户在 Facebook / Twitter

Google地图

允许用户通过点击“放大此地图”按钮在www.google.com/maps中打开此地图（带有标记和infoWindows），就像他们习惯使用嵌入式Google地图一样。

实际上，如果我只能通过我的网站实现（2）和（1），那么（1）可以在www.google.com/maps上实现..无论如何，所以（2）是关键点。

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

P.S。我试图使这个问题更加具体，并突出了特定的部分以便于视觉方便。

更新

我正在使用以下代码生成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”。这是一个很好的解决方案。

Why would you want users to open the same map with maps.google.com?我的目标是使用此地图替换嵌入式Google地图，并保留“在Google地图中打开”选项/按钮，以便将它们无缝重定向到google.com并仍然可以看到此地图。

我想我会考虑使用Google地图的API创建静态地图。请看看。

Answer 1

对于社交共享，您需要将整个地图配置编码到查询字符串中。平庸的版本可能类似于：

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

Answer 2

给我一些想法。您可以截取包含地图的div的屏幕截图，然后在社交服务上分享。

Here's how to take a screen shot with js

似乎在Facebook上分享地图就像获取地图的网址并发布它一样简单。您的地图网站有没有办法获取地图的网址？

Answer 3

有一点需要考虑。

1）通过社交媒体新闻分享您的代码一些额外的调整。首先，您要为您的应用创建一个URL侦听器。然后，您可以创建自定义地图实例。

2）如果您想要显示一些预览图像，可以使用Google Maps Image APIs

共享使用JavaScript生成的地图

更新

3 个答案: