Google Maps loads slowly or not at all

html

#1

Hi guys,

Just to start off, I’m really quite new to HTML/JavaScript/CSS programming and this is my first real project.

I’m trying to add a Google Maps display into my page but for some reason it keeps saying that “google is not defined”. I tried following the guides I found as closely as possible, but couldn’t get it working. I then tried to save the file on my computer and run it that way and it sort of works (map loads ridiculously slowly). What am I doing wrong? Here is the snippet of code associated with it:


<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
    function initializeGoogleMaps(){
        var mapProp = {
            center: new google.maps.LatLng(45.471592, -73.466617),
            zoom:15,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var mapProp2 = {
            center: new google.maps.LatLng(45.494528, -73.651667),
            zoom:15,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var mapProp3 = {
            center: new google.maps.LatLng(45.483160, -73.793464),
            zoom:15,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var mapProp4 = {
            center: new google.maps.LatLng(45.557329, -73.725711),
            zoom:15,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var mapProp5 = {
            center: new google.maps.LatLng(45.623851, -73.805218),
            zoom:15,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var mapProp6 = {
            center: new google.maps.LatLng(45.592227, -73.570793),
            zoom:15,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
        var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
        var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
        var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);
        var map5 = new google.maps.Map(document.getElementById("googleMap5"),mapProp5);
        var map6 = new google.maps.Map(document.getElementById("googleMap6"),mapProp6);
    }
    google.maps.event.addDomListener(window, 'load', initializeGoogleMaps);

I’ve been trying all night and I can’t get this to work… If you need more information/code, let me know and I’ll update it.

Thanks in advance!!

Kevin


#2

Just follow this guide:

If I would have to take a guess why your map is slow: you create 6 of them.

Cheers.