Open google map in new window.

Question

I have created a Google Map API and I would like to open it in a new tab(Window). May I know what's wrong with my code? I can open a new tab, but I can't display the Google Map.

Below are my code. Thanks!

    function newWindow() 
    { 
     var myLatlng = new google.maps.LatLng(0.7,40);
     var myOptions = 
        {
         zoom: 2,
         center: myLatlng,
         mapTypeId: google.maps.MapTypeId.HYBRID
        };
    map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
    } 

<A HREF="" onclick="window.open('javascript:newWindow()')" >New Map(In new window)</A>

Answer 1

1. window.open() takes a URL as a parameter. Your newWindow() function does not return anything, let alone a URL.
2. You need to call window.open() with a valid URL passed in, which takes care of setting up the map itself.

3. If you're going to attach an event handler inline, do it right:

   <a onclick="window.open('some_url_here'); return false;">...</a>.

That said, in the interest of unobtrusive JavaScript, you should really attach JS event handlers using your external JS code.

---

Perhaps you want to open your map in a modal dialog instead?

Answer 2

the variable for window.open is the url

<a href="#" onclick="window.open('stackoverflow.com')">New Map(In new window)</a>

Answer 3

There is actually a solution for your problem. The first error here is that the context in new window is different from the old window.

var w = window.open('', '_blank', options);

w is a Window object different from the window. Empty URL create an empty page "about:blank", and since there is no domain, you have read/write access to w.document. So something like this:

function newWindowMap(latitude, longitude) {
    var w = window.open('', '_blank'); //you must use predefined window name here for IE.
    var head = w.document.getElementsByTagName('head')[0];
    //Give some information about the map:
    w.document.createElement('input');
    //Place ID, value and type='hidden' here
    var loadScript = w.document.createElement('script');
    loadScript.src = '...'; //Link to script that load google maps from hidden elements.
    var googleMapScript = w.document.createElement('script');
    googleMapScript.src = '...'; //Link to google maps js, use callback=... URL parameter to setup the calling function after google maps load.
    head.appendChild(loadScript);
    head.appendChild(googleMapScript);
}

Now the whole loadScript will be in context of the new window and google map will call a function from it, when it finished loading. You can create new div dynamically and use it to create a map.