CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3typeerror
B. Walger
B. Walger

Reputation: 119

Once again: TypeError: a.lat is not a function in google maps api

In our web application we have a window showing the location of our club bureau. Is is working fine except the marker window does not show up. The click produces the dreaded java script error "TypeError: a.lat is not a function".

Looking at other answers to this kind of problem I realized, the coordinates have to be a google.maps.LatLng object or literal. I'm almost convinced I comply with this:

 var map = null;
 // Call this function when the page has been loaded
 function initialize()
 {
   if (arguments.callee.done) return;
     arguments.callee.done = true;
   var
     coord = { lat: 49.87216, lng: 8.63064 },
     mapOptions = {
       center: coord,
       zoom: 17,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       mapTypeControl: 1,
       mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
       scaleControl: 1,
       scaleControlOptions: {style: google.maps.ScaleControlStyle.DEFAULT, position: google.maps.ControlPosition.BOTTOM_RIGHT},
      navigationControl: 1,
      navigationControlOptions: {style: google.maps.ZoomControlStyle.ZOOM_PAN, position: google.maps.ControlPosition.RIGHT},
      position: google.maps.ControlPosition.BOTTOM_LEFT
   };
   map = new google.maps.Map(document.getElementById("map"), mapOptions);
   marker = new google.maps.Marker({
     title: "Fahrradbüro",
     position: coord,
     map: map
   });
   kartenFenster = new google.maps.InfoWindow(
   {
     content: '<div style="text-align: center"><img src="/static/images/images" alt="Fahrradbüro"/><br/>Fahrradbüro<br /></div>'
   });
   marker.addListener('click', function() {
     kartenFenster.open(map, marker);
   });
 }

But I still get this error. What am I missing here? I have even tried:

var coord = new google.maps.LatLng( 49.87216, 8.63064 );

Thanks for your help!

Upvotes: 2

Views: 2302

Answers (2)

Dr.Molle
Dr.Molle

Reputation: 117364

Remove this from the end of mapOptions:

position: google.maps.ControlPosition.BOTTOM_LEFT

The API also tries to access a position-property of map in open() (note that the first argument of open() also may be a StreetViewPanorama, which does have a position-property)what results in the error(because this property is not a LatLng).

Upvotes: 1

Shivani P
Shivani P

Reputation: 416

var map;
 // Call this function when the page has been loaded
 function initialize()
 {
   if (arguments.callee.done) return;
     arguments.callee.done = true;
   var coord = new google.maps.LatLng( 49.87216, 8.63064 );
   var mapOptions = {
       center: coord,
       zoom: 17,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       mapTypeControl: 1,
       mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
       scaleControl: 1,
       scaleControlOptions: {style: google.maps.ScaleControlStyle.DEFAULT, position: google.maps.ControlPosition.BOTTOM_RIGHT},
      navigationControl: 1,
      navigationControlOptions: {style: google.maps.ZoomControlStyle.ZOOM_PAN, position: google.maps.ControlPosition.RIGHT},
      position: google.maps.ControlPosition.BOTTOM_LEFT
   };
   map = new google.maps.Map(document.getElementById("map"), mapOptions);
   marker = new google.maps.Marker({
     title: "Fahrradbüro",
     position: coord,
     map: map
   });
   kartenFenster = new google.maps.InfoWindow(
   {
     content: '<div style="text-align: center"><img src="/static/images/images" alt="Fahrradbüro"/><br/>Fahrradbüro<br /></div>'
   });
   marker.addListener('click', function() {
     kartenFenster.open(map, marker);
   });
  
 }
  google.maps.event.addDomListener(window, 'load',initialize);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div id="map" style="height:300px;width:400px"></div>

Please check snippet.I have added div with id = "map" and few changes of coordinates and js.

Upvotes: 0

Related Questions