Google Maps API v3, Custom points not plotting-- in Chrome Only

http://stage.clevelandstreetdistrict.com/map

If you go to this site in Chrome (or Safari) I get a Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1 javascript error and my markers do not show up. In all other non-webket browsers I do not see this problem. I feel like this could be related to a recent Chrome update because I never had this problem before. Can anyone give me any pointers as to how to figure out what is causing this? I am at a complete loss.

You can see the maps javascript here: http://stage.clevelandstreetdistrict.com/javascripts/behaviors/maps.js

Thanks in advance. Let me know what clarification will help.

-b

UPDATE: It turns out that if I specify 开发者_运维百科a slightly older version of the API, for instance 3.2, it works. So I think I am going to just do that. I wonder what changed in the newest API....

I had the same problem here and I found a different solution. I could not move back to version 3.2 because I'm using the Places API and loading the Maps API with Google Loader.

 google.load("maps", "3", {callback: initMap, other_params:"libraries=places&sensor=false"});

In my case the error was related to the custom marker icons and shadows. Not sure if it is the same issue you were having because your links are now password protected. But I hope it helps.

As you can see in this thread http://code.google.com/p/gmaps-api-issues/issues/detail?id=3103, negative offset values cause errors on Chrome with Maps API version 3.4.

new google.maps.Point(-10, 10) // error
new google.maps.Point(0, 0)    // ok

What I found out is that positive values also throw an error if they animate beyond the boundaries of the image (becoming negative values temporarily). Happens when you drag a marker and the shadow moves, for example.

Problem is fixed and the error does not show in Chrome as long as origin and anchor points do not exceed the image size.

// marker image 57x34px
var src = "http://maps.gstatic.com/intl/en_gb/mapfiles/markers/marker_sprite.png";

var marker = new google.maps.Marker({
  icon:new google.maps.MarkerImage(src, new google.maps.Size(20, 34)),
  shadow:new google.maps.MarkerImage(src, 
         new google.maps.Size(27, 34),
         new google.maps.Point(30, 0), // would throw an error if it was Point(31, 0) because 27 (size) + 31 (origin) is bigger than 57 (image width)
         new google.maps.Point(0, 34))
});

Tricky. I hope Google fixes it.

I couldn't figure out exactly what was causing this but I figured out that it has something to do with the latest API and the incompatibility with my code. It turns out that if I specify a slightly older version of the API, for instance 3.2, it works. So I think I am going to just do that. I wonder what changed in the newest API....

You can specify the API version this way: http://maps.google.com/maps/api/js?v=3.2&sensor=false

Not totally sure if this is your problem, but your html seems to be malformed with each 'black_box' div. (Particularly, the li's):

   <div class="black_box">
   <ul class="menu_links">
    <li class="first">
        <a href="/dining/guide" title="Dining Directory">Dining Directory</a>
    <li>
        <a href="/dining/tonys-pizzeria-ristorante-delicious" title="Tony’s Pizzeria &amp; Ristorante is Delicious Pizza and So Much More">Tony’s Pizzeria &amp; Ristorante is Delicious Pizza and So Much More</a>
    <li class="last">
        <a href="/map/dining" title="Interactive Map">Interactive Map</a>
    </ul>
    </div>

In any case, it looks like Chrome's dev tools are point to the DOM/html, not to the js, suggesting that the html is the problem.