CODEWITHSUNDEEP
javascriptgoogle-maps
CHarris
CHarris

Reputation: 2803

Google Maps Uncaught TypeError

Since I started making my application there has always been the message in Console, in Chrome,

Uncaught TypeError: Cannot read property 'Fa' of undefined

But seeing as my app loaded ok and I could see everything on screen, in Chrome and in Firefox, I just ignored it. I know it's related to my Google maps because when I debug for more details in Chrome I can find:

Uncaught TypeError: Cannot read property 'Fa' of undefined
b.b
ag.(anonymous function).Y                           %7Bmain,places%7D.js:26
tJ.(anonymous function).Yc
(anonymous function)
(anonymous function)                                %7Bmain,places%7D.js:10
uJ
a.b
ag.(anonymous function).Y                           %7Bmain,places%7D.js:26
(anonymous function)

And the %7Bmain links go to https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/13/6/%7Bmain,places%7D.js, which is google stuff.

However yesterday I tried my app in IE and it broke with the same error - the map wouldn't load. Any idea what could be wrong and how I can fix it?

Here's my function:

function initialize_google_maps() {

    var user_longitude = $("#user-position").attr("data-lng");
    var user_latitude = $("#user-position").attr("data-lat");

    var currentlatlng =
        new google.maps.LatLng(user_latitude, user_longitude);

    var zoom = 10;
    var myOptions = {
      zoom: zoom,
      center: currentlatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false,
        minZoom: 1, 
        // don't want people to be able to hone in
        // on others' addresses too specifically.
        maxZoom: 13
      };


      var map = new google.maps.Map(
          document.getElementById("map_canvas"),
          myOptions
      );

      var marker = new google.maps.Marker({
          map: map,
          position: currentlatlng,
          icon: { opacity: 0 }
      });

      var circle = new google.maps.Circle({
        map: map,
        fillOpacity: 0,
        strokeWeight: 2,
        strokeOpacity: 0.7,
        radius: 10000,
      });
      circle.bindTo('center', marker, 'position');
    }

I call it like this:

<!-- draw the map, on the right of the screen -->
    <div id="map_canvas">

      <script>
      $(function() {

// this function can be found in draw_map.js
      initialize_google_maps();

                   });
      </script>

    </div>

I saw a stackoverflow question here which looked similar which said make sure the javascript is loaded before the page is rendered so I tried calling my function like this:

      <script>
$(document).on("ready", function(){

// this function can be found in draw_map.js
      initialize_google_maps();


  });

but still getting the same error.

The Google maps library I'm calling like:

 <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>

Upvotes: 2

Views: 10583

Answers (1)

Michael Geary
Michael Geary

Reputation: 28880

The first error I see is that you're passing strings into new google.maps.LatLng(). You need to give it numbers.

Instead of this code:

var user_longitude = $("#user-position").attr("data-lng");
var user_latitude = $("#user-position").attr("data-lat");

var currentlatlng = new google.maps.LatLng(user_latitude, user_longitude);

use:

var $position = $("#user-position"),
    lat = $position.attr("data-lat"),
    lng = $position.attr("data-lng");

var currentlatlng = new google.maps.LatLng( +lat, +lng );

Let me take a look through the rest of your code, but that's one thing to fix right away.

BTW just as a stylistic suggestion, as you can see I prefer shorter names in localized code like this. Since the data attributes are data-lat and data-lng and the Maps API function is called LatLng, there's little to be gained by spelling out user_latitude and user_longitude in this bit of code. lat and lng are pretty standard terms in Maps API code.

The second problem is an invalid icon object in this code:

var marker = new google.maps.Marker({
    map: map,
    position: currentlatlng,
    icon: { opacity: 0 }
});

An icon object needs a url, and there's no such thing as an opacity option. If you remove the icon: { opacity: 0 } and fix the lat/lng problem then the map will load without error.

If you want a marker with no icon, one way to do it is with a transparent PNG file. You can download a copy of this file to your server:

https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png

and then change this line:

    icon: { opacity: 0 }

to:

    icon: 'path/to/1x1.png'

One other error is in this code:

  var circle = new google.maps.Circle({
    map: map,
    fillOpacity: 0,
    strokeWeight: 2,
    strokeOpacity: 0.7,
    radius: 10000,
  });

That final comma at the end of the radius line shouldn't be there. It only affects older browsers like IE7, but if that comma is removed the map loads OK in IE7.

Also, with regard to using this:

$(document).on("ready", function(){...});

instead of this:

$(function(){...});

The reason that didn't make any difference is that they do the same thing!

Upvotes: 3

Related Questions