Skip to content Skip to sidebar Skip to footer
Home / Google Maps / Html / Javascript

Custom Google Map In New Window

Post a Comment
I try to finish code mentioned here. But something goes wrong as I am new in java-scripting, My guess is the map simply does not loading properly. DIV is created in new tab, text a

Solution 1:

It looks like you didn't define the initialize() function in your second script object.

The code should be

<!DOCTYPE html><html><head><title>test</title></head><body><script>functionnewWindow() {
        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.head.innerHTML = '<title>Simple Map</title></head>';
        w.document.body.innerHTML = '<body><H1>Loading</H1><div id="map_canvas" style="display: block; width: 500px; height: 300px; margin: 0; padding: 0;"></div></body>';

        var loadScript = w.document.createElement('script');
        //Link to script that load google maps from hidden elements.
        loadScript.type = "text/javascript";
        loadScript.async = true;
        loadScript.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";

        var googleMapScript = w.document.createElement('script');
        //Link to google maps js, use callback=... URL parameter to setup the calling function after google maps load.
        googleMapScript.type = "text/javascript";
        googleMapScript.async = false;
        googleMapScript.text = 'function initialize() {var mapOptions = {center: new google.maps.LatLng(50.4,30.50),zoom: 6, mapTypeId: google.maps.MapTypeId.TERRAIN}; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);}';

        head.appendChild(loadScript);
        head.appendChild(googleMapScript);
    }
    //addLoadEvent(loadScript);</script><buttononclick="newWindow()">Click me</button></body></html>

You can see the example on jsbin: http://jsbin.com/loyaca/edit?html,output

Post a Comment for "Custom Google Map In New Window"