更新

<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

Answer 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>

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

更新

更新

1 个答案: