Google Map JS Error

JavaScript
1

I’m been running into this JS error, from google map that is loading on my contact page, and I’m not sure how to fix this.

I’ve also uploaded my js and contact page for further reference.

The error (console error in Chrome // IE 8 and up // but not firefox for some reason):

Uncaught TypeError: Cannot read property 'offsetWidth' of null  
Xi                                                                                                   main.js:40
Jj                                                                                                    main.js:46
(anonymous function)                                                                    g-maps.js:33

The html:

<div id="find-us">
    <div class="contact-fs">
         <span class="icon-map"></span>
    </div>
    <h3>Find Us</h3>
    <div id="map"></div>
    <div class="clearfix"></div>
</div>

Google map js:

    // Define your locations: HTML content for the info window, latitude, longitude
   
var locations = [
  ['<div class=\"g-map-loc\"><h5>Consolidated Gypsum Supply Ltd.</h5><p> Edmonton West</p><p>11660 170th Street NW Edmonton Alberta T5S 1J7 </p></div>', 53.566711, -113.615498],
  ['<div class=\"g-map-loc\"><h5>Consolidated Gypsum Supply Ltd.</h5><p>Edmonton East</p><p>5510 125A Ave NW Edmonton, AB T5W 1V3 </p></div>', 53.583191, -113.426527],
  ['<div class=\"g-map-loc\"><h5>Consolidated Gypsum Supply Ltd.</h5><p>Edmonton South</p><p>1215 95 St SW Edmonton, AB T6X 0P8 </p></div>', 53.419232, -113.481741],
  ['<div class=\"g-map-loc\"><h5>Consolidated Gypsum Supply Ltd.</h5><p>Calgary North</p><p>Bay 6, 2835 - 19th Street NE Calgary, Alberta  T2E 7A2 </p></div>', 51.076998, -114.011838],
  ['<div class=\"g-map-loc\"><h5>Consolidated Gypsum Supply Ltd.</h5><p>Calgary South</p><p>4140 - 120th Avenue SE Calgary, Alberta  T2Z 4H4 </p></div>', 50.943326, -113.974716],
  ['<div class=\"g-map-loc\"><h5>Consolidated Gypsum Supply Ltd.</h5><p>Red Deer</p><p>7891 - 49th Avenue Red Deer, Alberta T4P 2B4 </p></div>', 52.310847, -113.809881],
  ['<div class=\"g-map-loc\"><h5>Consolidated Gypsum Supply Ltd.</h5><p>Saskatoon</p><p>3630 Thatcher Avenue Saskatoon, Saskatchewan S7R 0H6</p></div>', 52.191146, -106.677581]
];

// Setup the different icons and shadows
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/micons/';

var icons = [
  iconURLPrefix + 'orange-dot.png',
  iconURLPrefix + 'green-dot.png',
  iconURLPrefix + 'blue-dot.png',
  iconURLPrefix + 'red-dot.png',
  iconURLPrefix + 'purple-dot.png',
  iconURLPrefix + 'pink-dot.png',      
  iconURLPrefix + 'yellow-dot.png'
]
var icons_length = icons.length;

 
var shadow = {
  anchor: new google.maps.Point(15,33),
  url: iconURLPrefix + 'msmarker.shadow.png'
};

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(52.126909, -110.009317),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl: false,
  streetViewControl: false,
  panControl: false,
  zoomControlOptions: {
     position: google.maps.ControlPosition.LEFT_BOTTOM
  }
});

var infowindow = new google.maps.InfoWindow({
  maxWidth: 250
});

var marker;
var markers = new Array();

var iconCounter = 0;

// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon : icons[iconCounter],
    shadow: shadow
  });

  markers.push(marker);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
  
  iconCounter++;
  // We only have a limited number of possible icon colors, so we may have to restart the counter
  if(iconCounter >= icons_length){
  	iconCounter = 0;
  }
}

function AutoCenter() {
  //  Create a new viewpoint bound
  var bounds = new google.maps.LatLngBounds();
  //  Go through each...
  $.each(markers, function (index, marker) {
    bounds.extend(marker.position);
  });
  //  Fit these bounds to the map
  map.fitBounds(bounds);
}

AutoCenter();

Footer scripts:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.js"></\script>')</script>      

    <!--Javascript google maps -->
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script src="assets/js/g-maps.js"></script>

Here is the website:
enter link description here

Uploaded files:

g-maps.js (3.6 KB)

contact.php (17.9 KB)

2

With google maps it’s critical that you use the window load event, and it’s safer to use the one provided in the google maps api instead of it’s jQuery equivalent (indeed, I would make it a point to try to avoid crossing jQuery code and google code at all where possible). I’m going to guess you’re trying to go ahead and start initialization since you placed your scripts in the footer. That isn’t going to work for webkit (Safari), blink (Chrome) or trident (IE).

1 Like
3

I should probably redo my maps area… ?

could the above issue also cause my navigation to break in IE9? I currently have the same navigation in webtrack-cgs.ca and it doesn’t break in IE9…

Would the possible cause this?

4

Wouldn’t take long to find out - move the init code into an event handler and see if that helps.

5

With google maps, does everything need to be on the same page or can I place the script part of the map safely in the footer.php file? I’ve never really known which is entirely the correct method to follow.

6

In your hypothetical wouldn’t you be including footer.php via PHP include() or some other method like taht? Either way, it’s technically all going to be rendered on the same page.

7

RyanReese. It was [quote=“RyanReese, post:6, topic:108537, full:true”]
In your hypothetical wouldn’t you be including footer.php via PHP include() or some other method like taht? Either way, it’s technically all going to be rendered on the same page.
[/quote]

Yes I would be included. It’s just one of those questions I wasn’t entirely sure of.

8

Yes in that case just do view - source in your browser (i.e. test it out) and you’ll see that the code is included.

If you aren’t sure of something, always be sure to try it out first. That way you know!

9

is it possible that I’m getting the error:

 Uncaught TypeError: Cannot read property 'offsetWidth' of null

based on the fact that I’m using php, and with php includes there’s only ever one body tag.

In stating this, on my contact page where my Google map is located, I don’t receive any errors, but on the other pages, I receive the error above.

would it be possible it’s doing this because the <body onload="initialize()"> isn’t recognized every page?

10

PHP has nothing to do with a client side error such as this. The error arises because the library is trying to read an element that doesn’t exist yet. The only way to insure all elements on the page exist is to fire the code from an window load complete handler, or DOM ready handler.

Do NOT use the body onload property - that risks destroying any other handlers attached to the event. Use…

if (typeof(window.google) !== 'undefined' && google.maps ) {
  google.maps.event.addDomListener(window, 'load', function() {
    // your initialization code goes here.
  }); 
}
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.