Javascript Embedded Google Maps Won't Fully Load

Question

I'm currently a novice web developer and I'm having trouble understanding why the new Google Maps API I injected into my work, won't load all of the tiles of the map.

The div I have placed the map into is set to hidden when the page loads. When you use the navigation to switch over to the div, and it reveals itself, only one small square of the map is displayed. You can't drag the map and force it to load, but if you open the Chrome Developer Tools, the map re-renders, but slightly moves the center of the map. The following is the code I have so far, it's rather basic;

HTML Script (Which I plan to move to my custom Javascript file once I fix this issue):

    <script type="text/javascript">
    var map;
    function initialize() {
        var mapOptions = {
            zoom: 15,
            center: new google.maps.LatLng(39.931305, -74.177920)
        };

        map = new google.maps.Map(document.getElementById('MapCanvas'),
            mapOptions);
    }
    function addMarker() {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(39.931305, -74.177920),
            title:'Eaglespeed Auto Repair',
            map:map
        });
    }
</script>

HTML Markup:

    <div id="Contactbody">
    <div id="MapCanvas"></div>
    <table>
        <tbody>
            <tr>
                <td class="tableH" colspan="2">HOURS</td>
            </tr>
            <tr>
                <td class="day">Mon</td>
                <td class="hours">8 - 6</td>
            </tr>
            <tr>
                <td class="day">Tues</td>
                <td class="hours">8 - 6</td>
            </tr>
            <tr>
                <td class="day">Wed</td>
                <td class="hours">8 - 7</td>
            </tr>
            <tr>
                <td class="day">Thur</td>
                <td class="hours">8 - 6</td>
            </tr>
            <tr>
                <td class="day">Fri</td>
                <td class="hours">8 - 6</td>
            </tr>
            <tr>
                <td class="day">Sat</td>
                <td class="hours">7:30 - 3:30</td>
            </tr>
            <tr>
                <td class="day">Sun</td>
                <td class="hours">8:30 - 1</td>
            </tr>
        </tbody>
    </table>
</div>

CSS:

    #Contactbody {
    position: relative;
    display: none;
    margin: 1% 0 1% 15%;
    width: 70%;
    height: 50%;
    border-left: 4px solid #ffe168;
}

    #Contactbody:after {
        display: block;
        clear: both;
        height: 0;
        content: " ";
    }

#MapCanvas {
    position: absolute;
    height: 100%;
    width: 60%;
    float: left;
    margin-left: 5%;
}

    #Contactbody table {
        float: right;
        margin-right: 5%;
        width: 25%;
        font-family: Aleygra Sans SC, Maven Pro, Verdana, Arial;
    }

.tableH {
    color: #0b0658;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    font-size: 22px;
}

.day {
    color: #32305a;
    vertical-align: middle;
    text-align: left;
    font-size: 18px;
}

.hours {
    color: #982929;
    vertical-align: middle;
    text-align: right;
    font-size: 18px;
}

If you'd like to see what I'm talking about, the link is here

score 2 · Accepted Answer · answered May 29 '14 at 05:28

2

The reason without fully loading the Google maps you have hidden it and therefore it is not showing up.

To overcome you have to trigger the resize event (provided by Google maps API), whenever you show the map.

google.maps.event.trigger(map, "resize");

Updates:

I just invoked the custom.js of your code and here is where you need to add it.

$(".Contact").click(function () {
        if (cPage != 3) {
            cPage = 3;
            $("#Homebody").css({ "display": "none" });
            $("#Servicebody").css({ "display": "none" });
            $("#Contactbody").css({ "display": "block" });
            $("#Maphelp").css({ "display": "block" });
            google.maps.event.trigger(map, "resize");
        }
    });

answered May 29 '14 at 05:28

Praveen

55,303
33
133
164

So I should add that to my function that reveals the hidden div? – Karmaxdw May 29 '14 at 05:30
@Karmaxdw yup!! I have also added it in my updates. – Praveen May 29 '14 at 05:32
1

Thank you so much. I've literally spent 2 and a half hours researching through articles that focus on Google Maps rendering issues, and I was merely misplacing this line of code, repeatedly. – Karmaxdw May 29 '14 at 05:35
@Karmaxdw Sometimes happens, No worries :) – Praveen May 29 '14 at 05:37

Javascript Embedded Google Maps Won't Fully Load

1 Answers1

Updates: