[HTML] Google Maps Api - Problem

pYr0 · 30. Januar 2011

Google Maps Api - Problem

Guten Tag,

ich sitze gerade an einem kleinen Projekt für mein Studium und komme nicht weiter, auch nicht mit intensiven Recherchen ...

Ich habe eine Google Maps Karte in eine kleine Webseite eingebunden und habe ein Bild von einem Flugzeug darüber gelegt.

Nun fange ich mit Javascript die Events für die Pfeiltasten ab und ändere die Koordinaten meiner Karte. Leider wird dabei die Karte ständig neu geladen ...

Ich bin ein Anfänger ins sachen javascript und auch in Sachen Google Maps API aber wie gesagt auch durch intensive suche habe ich keine hilfe gefunden!

Ich rufe zwar immer wieder die Initialize Funktion auf aber ich hab leider auch keine Ahnugn wie ich die Koordinaten sonst ändern kann ...

Bitte um Hilfe!

Hier mal mein Code, ist mit Sicherheit nicht der Schönste

Code:

 document.onkeyup = KeyCheck; 
 var par1 = 50;
 var par2 = 20;
 function KeyCheck(e)
 {
 var KeyID = (window.event) ? event.keyCode : e.keyCode;
 switch(KeyID)
 {
 case 37:
 par2 = par2 - 0.9;
 initialize();
 break;
 case 38:
 par2 = par2 - 0.9;
 initialize();
 break;
 case 39:
 par2 = par2 - 0.9;
 initialize();
 break;
 case 40:
 par2 = par2 - 0.9;
 initialize();
 break;
 }
 }
 function initialize() {
 var myLatlng = new google.maps.LatLng(par1, par2);
 var myOptions = {
 zoom: 5,
 center: myLatlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 }
 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
 }

Anzeige

onip · 31. Januar 2011

AW: Google Maps Api - Problem

meinst du so?

HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
 #map_canvas {
 width: 800px;
 height: 600px;
}
</style>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 document.onkeyup = KeyCheck; 
 var par1 = 50;
 var par2 = 20;
 var speed = 0.9;
 var map;
 var myLatlng = new google.maps.LatLng(par1, par2);
 
 function KeyCheck(e) {
 var KeyID = (window.event) ? event.keyCode : e.keyCode;
 switch(KeyID) {
 case 37:
 par2 -= speed;
 break;
 case 38:
 par1 += speed;
 break;
 case 39:
 par2 += speed;
 break;
 case 40:
 par1 -= speed;
 break;
 }
 moveMap();
 }
 
 function moveMap (){
 myLatlng.wa = par1;
 myLatlng.ya = par2;
 map.panTo(myLatlng);
 document.getElementById('out').innerHTML = 'Lat: '+par1+'<br>Lng: '+par2;
 }
 
 function initialize() {
 var myOptions = {
 zoom: 8,
 center: myLatlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 }
 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 moveMap ();
 } 
</script>
</head>
<body onload="initialize()">
 <div id="map_canvas"></div>
 <p id="out"></p>
</body>
</html>

Nützliche Suchen

[HTML] Google Maps Api - Problem

Videos zum Themenbereich