Google Map is Not Visible On HTML

Question

Im trying to include Google Map in my html. But Map is not getting display div section blank Screen Shot Given below. Also find codes below.

CSS Codes :

#location article{
    padding:1.5%;
    width:97%;
}
.tab-content .gmap{
    width:100%;
    height:450px;
}
.map-wrap{
    width:97%;
    padding:1.5%;
    background:#fff;
    webkit-box-shadow:0 0 2px rgba(0,0,0,0.1);
    -moz-box-shadow:0 0 2px rgba(0,0,0,0.1);
    box-shadow:0 0 2px rgba(0,0,0,0.1);
}
.map-wrap .infoBox{
    background:url(../images/map-popup.png) no-repeat !important;
    width:180px !important;
    height:100px !important;
}
.gmap{
    border:1px solid #ccc;
    display:block;
    width:100%;
    height:550px;
}
.gmap .infoBox{
    background:url(../images/map-popup-hotel.png) no-repeat;
    width:184px;
    height:120px;
    }
.gmap strong{
    font:normal 14px 'KabelBkBTBook',sans-serif;
    margin:0 0 13px;
    display:inline-block;
}
.infoBox{
    font:normal 1.2em/1.42 'KabelBkBTBook',sans-serif;
    margin:-100px 0 0 50px;
    display:inline-block;
    padding: 8px 10px;
    color:#fff;
}

JavaScript Code:

<script type="text/javascript">
    function initialize() {
        var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);

        var myMapOptions = {
             zoom: 15
            ,center: secheltLoc
            ,mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);


        var marker = new google.maps.Marker({
            map: theMap,
            draggable: true,
            position: new google.maps.LatLng(49.47216, -123.76307),
            visible: true
        });

        var boxText = document.createElement("div");
        boxText.innerHTML = "<strong>MGH World</strong><br />1400 Pennsylvania Ave,<br />Washington DC<br />www.bestipsumhotel.com";

        var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,closeBoxURL: ""
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
        };

        google.maps.event.addListener(marker, "click", function (e) {
            ib.open(theMap, this);
        });

        var ib = new InfoBox(myOptions);
        ib.open(theMap, marker);
    }
</script>

HTML Codes:

            <div id="location" class="tab-content">
                <article>
                    <!--map-->
                        <div class="gmap" id="map_canvas"></div>
                    <!--//map-->
                </article>
            </div>

Script Attached :

[Script Attached in HTML Body][1]

Anto Jurković Anto Jurković · Accepted Answer · 2014-02-12T10:21:32

Your code returns error:

Uncaught ReferenceError: InfoBox is not defined

There is no link to info box source like

<script src='../../js/infobox.js'></script>

Additionally, I don't see if there is a call to load the map like

    ...
        ,enableEventPropagation: false
    };

    var ib = new InfoBox(myOptions);
    //ib.open(theMap, marker);

    google.maps.event.addListener(marker, "click", function (e) {
        ib.open(theMap, this);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

See complete code at jsbin.

Google Map is Not Visible On HTML

1 Answers