CODEWITHSUNDEEP
javascriptgoogle-maps
PeanutsMonkey
PeanutsMonkey

Reputation: 7095

Google maps javascript multiple methods error

I am attempting to run the code below but am getting multiple methods error which I am unsure how to address. An example of such an error is Object # has no method 'getBounds' . I have registered from an API key which I have not included in the code below.

Code

<!doctype html>

<html lang="en-us">
<head>
    <meta charset="UTF-8">
    <title>Example</title>

    <style type="text/css">
        div {
            margin-top: 500px;
        }
    </style>

</head>


<div id="map"></div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

    <script type="text/javascript"src="http://www.google.com/jsapi?key={API_KEY}&sensor=false"></script>

    <script type="text/javascript"charset="utf-8">
    google.load("maps","2.x"); 
    google.load("jquery","1.5.2");
    </script>

    <script type="text/javascript">

    $(document).ready(function(){ 
      var map = new GMap2(document.getElementById('map')); 
      var burnsvilleMN = new GLatLng(44.797916,-93.278046); 
      map.setCenter(burnsvilleMN, 8); 
    });

    // setup 10 random points
    var bounds = map.getBounds(); 
    var southWest = bounds.getSouthWest(); 
    var northEast = bounds.getNorthEast(); 
    var lngSpan = northEast.lng() - southWest.lng(); 
    var latSpan = northEast.lat() - southWest.lat(); 
    var markers = []; 
    for (var i = 0; i<10; i++) { 
      var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); 
      marker = new GMarker(point); 
      map.addOverlay(marker); 
      markers[i] = marker; 
    }

    $.each(markers, function(i, marker){
          // var marker = marker
          setInterval(function(){displayPoint(marker, i);}, 5000 + (i * 5000));
          });

          $('#map-info').appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

    function displayPoint(marker, index){
        var x = marker.getLatLng();
        $('#map-info').hide();
        var moveEnd = GEvent.addListener(map, 'moveend', function(){
          var markerOffset = map.fromLatLngToDivPixel(x);
          GEvent.removeListener(moveEnd);
        });
        map.panTo(marker.getLatLng());
          }

    </script>

</html>

Updated Code

<!doctype html>

<html lang="en-us">
<head>
    <meta charset="UTF-8">
    <title>Example</title>

    <style type="text/css">
        div {
            margin-top: 500px;
        }
    </style>

</head>

<body>
<div id="map"></div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

    <script type="text/javascript"src="http://www.google.com/jsapi?key={API_KEY}&sensor=false"></script>

    <script type="text/javascript"charset="utf-8">
    google.load("maps","2.x"); 
    google.load("jquery","1.5.2");
    </script>

    <script type="text/javascript">

    $(document).ready(function(){ 
      var map = new GMap2(document.getElementById('map')); 
      var burnsvilleMN = new GLatLng(44.797916,-93.278046); 
      map.setCenter(burnsvilleMN, 8); 

      // setup 10 random points
    var bounds = map.getBounds(); 
    var southWest = bounds.getSouthWest(); 
    var northEast = bounds.getNorthEast(); 
    var lngSpan = northEast.lng() - southWest.lng(); 
    var latSpan = northEast.lat() - southWest.lat(); 
    var markers = []; 
    for (var i = 0; i<10; i++) { 
      var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); 
      marker = new GMarker(point); 
      map.addOverlay(marker); 
      markers[i] = marker; 
    }

    $.each(markers, function(i, marker){
          // var marker = marker
          setInterval(function(){displayPoint(marker, i);}, 5000 + (i * 5000));
          });

          $('#map-info').appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

    function displayPoint(marker, index){
        var x = marker.getLatLng();
        $('#map-info').hide();
        var moveEnd = GEvent.addListener(map, 'moveend', function(){
          var markerOffset = map.fromLatLngToDivPixel(x);
          GEvent.removeListener(moveEnd);
        });
        map.panTo(marker.getLatLng());
          }
    });

    </script>
</body>
</html>

Upvotes: 0

Views: 261

Answers (1)

Andrew Leach
Andrew Leach

Reputation: 12973

Your $(document).ready() function runs when the DOM is ready. However the other code runs as it is encountered — before the DOM is ready.

This means that the browser attempts to do map.getBounds() before map has been set up.

The solution is to do all the map operations together.

Note too that the map must be given an explicit size. You need something like this:

    div#map {
        height: 500px;
        width:500px;
    }

and giving every div a margin-top will adversely affect the map by applying that margin to every map tile. This needs to go:

    div {  // applies to every div element
        margin-top: 500px;
    }

Upvotes: 2

Related Questions