Google-maps – How to create google map popup

google-mapspopuppopupwindow

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?

UPDATE

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

example:

demo

update

this code doesn't work too

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

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

Best Solution

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

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

This one does:

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

working fiddle

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