2013-06-20 13 views
8

Mam XML, który jest przekształcany na HTML za pomocą XSLT. XML może zawierać JavaScript i poprawnie tłumaczy to na HTML, tak jak to robię na wielu innych stronach. To po prostu nie działa z GoogleMaps i podejrzewam, że mój JavaScript jest gdzieś wadliwy.InvalidStateError: "Podjęto próbę użycia obiektu, który nie jest lub nie jest już użyteczny" w podstawowym przykładzie samouczka Map Google.

Odpowiednie sekcje wynikowego HTML wyglądają jak zamieszczone poniżej.

Co się dzieje w HTML/w skryptach

  • API jest ładowany z googleapis.com
  • div z map_canvas ID jest tworzony.
  • Funkcja start() jest zdefiniowana, która jest uruchamiana przez <body onload="start();">.
  • W tej funkcji tworzona jest zmienna map_canvas, która przekazuje referencję do obiektu div o nazwie map_canvas.
  • Aby kontrolować, że ten krok zadziałał, nadaję działce nowe tło kolor czerwony.
  • To działa.
  • Następnie chciałbym utworzyć zmienną var_options i ustawić początkowe wartości dla środka, zoom i mapTypeId.
  • Aby kontrolować, że ten krok zadziałał, podaję tło nowego koloru koloru niebieskiego.
  • To nie działa, pozostaje czerwone.
  • Dlatego ta instrukcja nie została wykonana.
  • Sprawdzam więc, czy mogę w ogóle uzyskać dostęp do obiektu google.maps.
  • jeśli tak, podaję div nowy kolor tła zielony.
  • To działa, więc mogę uzyskać dostęp do tego obiektu.
  • Kontrola krzyżowa: jeśli skomentuję instrukcję ładującą interfejs API, kolor nie ulegnie zmianie.

Dla mnie wygląda na to, że gdzieś jest wadliwy.

var map_options = { 
     center: new google.maps.LatLng(44.54, -78.54), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

Ale po kilku godzinach wciąż nie wiem, co to jest.

<html> 
    <head> 
     ... 
     <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"> 
     </script> 

     <script type="text/javascript"> 
     function start() 
     { 
      var map_canvas = document.getElementById('map_canvas'); 

// If the element can be located, we make it green. Checked. 
// If we give the function another name than start, it won't be executed. Checked. 
map_canvas.style.backgroundColor = 'green'; 

      if(typeof google.maps != 'undefined') { 
// If the google.maps object exists, we make the canvas red. Checked. 
// If the API was not loaded from googleapis (commented out), it will stay green. 
map_canvas.style.backgroundColor = 'red'; 
      } 

// So why does the following not work? 
      var map_options = { 
       center: new google.maps.LatLng(44.54, -78.54), 
       zoom: 8, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
// Not arriving here: 
map_canvas.style.backgroundColor = 'blue'; 

// Before going on, I want to solve above problem, so this is commented out. 
//   var map = new google.maps.Map(map_canvas, map_options); 
// map_canvas.style.backgroundColor = 'black'; 
     } 
     </script> 
    </head> 


    <body onload="start();"> 
     ... 
     <div style="width: 400px; height: 224px;" id="map_canvas"></div> 
     ... 
    </body> 
</html> 
+1

Jaki błąd pojawia się w konsoli? – Bergi

+1

Kod dał mi błąd, że czujnik musi być prawdziwy lub fałszywy. Przetestowałem trochę i zmieniłem adres URL googleapis na '

11

Uważam, że najczęstszą przyczyną tego błędu jest po prostu nieprawidłowa img src.

+0

To było w moim przypadku. +1. –

3

Mój błąd było coś podobnego (dlatego uważam, że ten post), ale tylko w przeglądarce Internet Explorer (wersja 11):

File: eval code (401), Line: 39, Column: 304 

Było to spowodowane tym, że użyłem SVG obrazów jako markery:

var marker = map.addMarker({ 
    lat: position.coords.latitude, 
    lng: position.coords.longitude, 
    icon : { 
     url : '/images/marker.svg' 
    } 
}); 

Przejście do obrazów PNG zamiast SVG rozwiązało mój problem!

+1

Spróbuj dodać wysokość i szerokość do SVG. Zobacz więcej informacji: http://stackoverflow.com/questions/23923607/custom-markers-in-google-maps-not-showing-up-in-firefox#answer-24280941 – Promo

+0

Dzięki @Promo, to było dokładnie to, Potrzebowałem. Twój komentarz może być oddzielną odpowiedzią, jeśli mnie zapytasz. – marcvangend

+0

@Promo dzięki za link rozwiązał mój problem – user301441

Powiązane problemy