分享使用 JavaScript 生成的地图
Share a map generated using JavaScript
我使用 Google 地图 JavaScript API v3 在我的网页上创建了一个 Google 地图。它只有一堆 markers 和 info windows 与之关联，没什么特别的。现在我想：
- 允许用户在 Facebook/Twitter[=44 等社交服务上分享此 Google 地图（带有标记和信息窗口） =]
- 允许用户在 www.google.com/maps...中打开此地图（带有标记和信息窗口）...通过单击 "enlarge this map" 按钮，就像他们习惯的那样嵌入式 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) 的答案是 "deliver this same map as the only content through a separate/dedicated URL of my website as well and then share that URL on social services"。这是一个很好的解决方案。
Why would you want users to open the same map with maps.google.com? 我的 objective 是用这个地图替换嵌入的 Google 地图并保留 "Open in Google maps" option/button 以便它们无缝重定向到 google.com 仍然可以看到这张地图。
我想我会考虑使用 Google 地图的 API 创建静态地图。会调查的。
只是给你一些我的想法。您可以对包含地图的 div 进行屏幕截图，然后在社交服务上分享。
Here's how to take a screen shot with js
似乎在 facebook 上分享地图就像获取地图 url 并发布一样简单。您的地图网站有没有办法获取地图的 url?
有几点你需要考虑。
1) 通过社交媒体新闻分享您的代码一些额外的调整。首先，您要为您的应用程序创建一个 URL 侦听器。然后您可以创建自定义地图实例。
2) 如果您想显示一些预览图像，您可以使用 Google Maps Image APIs
对于社交共享，您需要将整个地图配置编码到查询字符串中。一个平庸的版本可能看起来像：
location.hash = '#' + JSON.stringify({ m:markers, i:infoWindows });
但是，考虑到强加的 URL 长度限制，这对 Twitter 永远不起作用。您可以使用 URL 缩短服务来缩短难看的 JSON URLs。或者，使用一个像样的查询字符串构建器，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 地图 JavaScript API v3 在我的网页上创建了一个 Google 地图。它只有一堆 markers 和 info windows 与之关联，没什么特别的。现在我想：
- 允许用户在 Facebook/Twitter[=44 等社交服务上分享此 Google 地图（带有标记和信息窗口） =]
- 允许用户在 www.google.com/maps...中打开此地图（带有标记和信息窗口）...通过单击 "enlarge this map" 按钮，就像他们习惯的那样嵌入式 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) 的答案是 "deliver this same map as the only content through a separate/dedicated URL of my website as well and then share that URL on social services"。这是一个很好的解决方案。
Why would you want users to open the same map with maps.google.com? 我的 objective 是用这个地图替换嵌入的 Google 地图并保留 "Open in Google maps" option/button 以便它们无缝重定向到 google.com 仍然可以看到这张地图。
我想我会考虑使用 Google 地图的 API 创建静态地图。会调查的。
只是给你一些我的想法。您可以对包含地图的 div 进行屏幕截图，然后在社交服务上分享。
Here's how to take a screen shot with js
似乎在 facebook 上分享地图就像获取地图 url 并发布一样简单。您的地图网站有没有办法获取地图的 url?
有几点你需要考虑。
1) 通过社交媒体新闻分享您的代码一些额外的调整。首先，您要为您的应用程序创建一个 URL 侦听器。然后您可以创建自定义地图实例。
2) 如果您想显示一些预览图像，您可以使用 Google Maps Image APIs
对于社交共享，您需要将整个地图配置编码到查询字符串中。一个平庸的版本可能看起来像：
location.hash = '#' + JSON.stringify({ m:markers, i:infoWindows });
但是，考虑到强加的 URL 长度限制，这对 Twitter 永远不起作用。您可以使用 URL 缩短服务来缩短难看的 JSON URLs。或者，使用一个像样的查询字符串构建器，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);
}
});
}