Google-maps – How to create google map popup


I have read following SO answer:
Google map displaying in jquery pop up window

But problem that it is not popup it is redirect to another page, but I want popup.

Can you help me change this code according my requirements?


<a class="googleMapPopUp" rel="nofollow" href="" target="_blank">View location map </a>​

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




this code doesn't work too

<!DOCTYPE html>
<script src=""></script>
<script src=""></script>

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


<script type="text/javascript">

function WinOp()
{   popup ="", "", "height=300, width=700, top=300, left=300, scrollbars=1")    
    popup.document.write('<div id="map-canvas"></div>')
    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);


because document.getElementById('map-canvas') returns null

Best Solution

You are not including the colorbox external library. This URL doesn't work:

This one does:

working fiddle

<script src=""></script>
Related Question