Google Maps API

[Jan]

Hi,

und die nächste Frage über Javascript. Diesmal über die Google Maps API.

Ich habe selber von JS nicht wirklich viel Ahnung, versuche aber gerade Google Maps einzubinden und ein paar Marker zu platzieren.

Ursprünglich hatte ich in der index.php diesen Code eingebunden:

function initialize()  
{  
var mapProp = {  
  center:new google.maps.LatLng(51.508742,-0.120850),  
  zoom:5,  
  mapTypeId:google.maps.MapTypeId.ROADMAP  
  };  
var map=new google.maps.Map(document.getElementById("googleMap")  
  ,mapProp);  
}  
  
google.maps.event.addDomListener(window, 'load', initialize);  
</script>

Hat wunderbar funktioniert, ist aus einem Tutorial kopiert. Allerdings möchte ich die Google Maps nur auf einer Seite anzeigen, nicht auf allen. Von daher hab ich es aus index.php wieder rausgenommen und auf die entsprechende Seite kopiert. Jetzt sieht es so aus auf der entsprechenden Seite:

<script type="text/javascript">  
	     initialize();  
	</script>

Und die initialize(); hab ich in eine externe JS Datei verschoben, die auf index.php eingebunden wird.:

function initialize() {  
	var mapProp = {  
  		center:new google.maps.LatLng(51,10),  
  		zoom:5,  
  		mapTypeId:google.maps.MapTypeId.ROADMAP  
  	};  
	var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);  
}

Gut und schön. Nur leider funktioniert es jetzt leider nicht mehr. Der Browser zeigt keine Google Maps mehr an, sondern laut Debug Konsole nur "Uncaught TypeError: Cannot read property 'offsetWidth' of null ".

Euch ist sicherlich aufgefallen, dass ich "google.maps.event.addDomListener(window, 'load', initialize);" weggelassen habe. Hier zu ein paar Anmerkungen:

1. Ich habe mich mit dem aus dem Tutorial kopierten Code auseinander gesetzt und die API Referenz von Google durchgewühlt. Sämtlichen Code habe ich jetzt verstanden, nur dieses addDomListener nicht.
2. Egal, ob ich es nach dem Funktionsaufruf initialize() reinpacke, oder in die Funktion selber - es funktioniert nicht!
3. Ich muss ja noch ein paar Marker auf die Map hinzufügen. Die Lat und Long Werte liegen in PHP vor, also habe ich bis jetzt in einer for Schleife einfach

<script type="text/javascript">  
	          var pos = new google.maps.LatLng(<?=$Result['Lat'][$i]?>,<?=$Result['Long'][$i]?>,false);  
			var marker=new google.maps.Marker();  
			marker.setPosition(pos);  
			marker.setMap(map);  
	     </script>

benutzt. Das hat zwar funktioniert. Sieht aber sehr unschön aus, wenn dein HTML Code mit lauter <script></script> durchzogen ist. Gibt es hier andere Möglichkeiten das zu lösen?

Vielen Dank!

[Jan]

Für alle interessierten: Hab den Fehler gefunden. Lag daran, dass der JS Code ausgeführt wurde, BEVOR das <div> gerendert war.

[1UnitedPower]

Für alle interessierten: Hab den Fehler gefunden. Lag daran, dass der JS Code ausgeführt wurde, BEVOR das <div> gerendert war.

Fürs Archiv: Mit anderen Worten hier wurde vergessen auf das loaded-Event bzw. DOMContentLoaded-Event zu lauschen und die initialize-Funktion dann asynchron aufzurufen.