Home/ Questions/Q 8393417
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T19:46:47+00:00

I am attempting to run the code below but am getting multiple methods error

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
    }
    • 0