如何创建谷歌地图弹出窗口？答案

【问题标题】：How to create google map popup?如何创建谷歌地图弹出窗口？
【发布时间】：2014-10-27 19:42:55
【问题描述】：

我已阅读以下 SO 答案：
Google map displaying in jquery pop up window

但问题是它不是弹出它被重定向到另一个页面，但我想要弹出。

您能帮我根据我的要求更改此代码吗？

更新

<a class="googleMapPopUp" rel="nofollow" href="https://maps.google.com.au/maps?q=south+australia" target="_blank">View location map </a>

$('.googleMapPopUp').each(function() {
    var thisPopup = $(this);
    thisPopup.colorbox({
        iframe: true,
        innerWidth: 400,
        innerHeight: 300,
        opacity: 0.7,
        href: thisPopup.attr('href') + '&ie=UTF8&t=h&output=embed'
    });
});

示例：

demo

更新

这段代码也不行

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</head>
<body>


<a href="#" onclick="WinOp();" title="show" >show map</a>

</body>

<script type="text/javascript">


function WinOp()
{   popup = window.open("", "", "height=300, width=700, top=300, left=300, scrollbars=1")    
    popup.document.write('<div id="map-canvas"></div>')
    popup.document.close()
    return false;
}

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

 }

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

</script>
</html>

因为document.getElementById('map-canvas') 返回null

【问题讨论】：

你的代码是什么样的？你读过documentation on InfoWindows吗？请提供一个 Minimal, Complete, Tested and Readable example 来表明您的问题。
@geocodezip 主题已更新
@geocodezip 你的第一个例子是关于你什么时候有地图，如果你点击某个地方，你会看到 infoWindow。我的问题有点不同。我的 html 页面有 href 链接。我希望当用户单击href时，他会看到模态窗口，并且此窗口包含地图。
我在你的小提琴上得到一个 javascript 错误：Failed to load resource: the server responded with a status of 404 (Not Found) http://www.jacklmoore.com/colorbox/colorbox/jquery.colorbox.js，Uncaught TypeError: undefined is not a function （在 thisPopup.colorbox() 上，因为尚未加载外部脚本）
请试试这个jsfiddle.net/mPBXe/95/embedded/result它对我有用

标签： google-maps popup popupwindow

【解决方案1】：

您不包括 colorbox 外部库。此网址无效：

http://www.jacklmoore.com/colorbox/colorbox/jquery.colorbox.js

这个是：

http://www.jacklmoore.com/colorbox/jquery.colorbox.js

working fiddle

<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>

【讨论】：