Hi an alle,
Bin zurzeit am verzweifeln. Will als kleine Übung eine HTML Seite mit einer Google Maps API machen...
Allerdings wird der Marker in keinem Browser außer dem IE angezeigt.
Hat evtl. jemand eine Ahnung? Wäre super...
Hier mein Code:
Gruß,
crnkjex
Bin zurzeit am verzweifeln. Will als kleine Übung eine HTML Seite mit einer Google Maps API machen...
Allerdings wird der Marker in keinem Browser außer dem IE angezeigt.
Hat evtl. jemand eine Ahnung? Wäre super...
Hier mein Code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0; background-image:url(resources/world.jpg) }
#map-canvas { height: 500px;
width: 1200px;
}
#map{display:none;}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
var map;
var myMarker;
function initialize() {
var myLatLng = new google.maps.LatLng(50.040964, 8.568929);
var mapOptions = {
center: myLatLng,
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
myMarker = new google.maps.Marker({
position: myLatLng,
map: map,
animation: google.maps.Animation.DROP,
title: "A place on Earth",
draggable: true,
//visible: true,
})
document.getElementById("location").value = myMarker.getPosition();
document.getElementById("zoomlevel").value = map.getZoom();
//Event für Position des Markers
google.maps.event.addListener(myMarker, "position_changed", function() {
var position = myMarker.getPosition();
document.getElementById("location").value=position;
});
//Event für Zoom level
google.maps.event.addListener(map, "zoom_changed", function() {
var newzoom = map.getZoom();
document.getElementById("zoomlevel").value=newzoom;
});
//Event für Zoom wenn man auf den Marker klickt.
google.maps.event.addListener(myMarker, 'click', function() {
map.setZoom(8);
map.setCenter(myMarker.getPosition());
});
var saveButton = document.getElementById("saveLocation");
saveButton.addEventListener ('click', saveLocation, false);
var saveButtonZoom = document.getElementById("saveZoom");
saveButtonZoom.addEventListener ('click', saveZoom, false);
var openMapButton = document.getElementById("openMap");
openMapButton.addEventListener ('click', openMap, false);
var closeMapButton = document.getElementById("closeMap");
closeMapButton.addEventListener ('click', closeMap, false);
}
function saveLocation(){
document.getElementById("dealerLocation").value=document.getElementById("location").value;
}
function saveZoom(){
document.getElementById("zoomtype").value=document.getElementById("zoomlevel").value;
}
function openMap(){
document.getElementById("map").style.display="block";
google.maps.event.trigger(map, 'resize');
map.setCenter(myMarker.getPosition());
}
function closeMap(){
document.getElementById("map").style.display="none";
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<span style="color:white;background-color:grey;">Saved dealer location:</span>
<input type="text" id="dealerLocation" style="width:400px;" disabled>
<span style="color:white;background-color:grey;">Saved zoomlevel</span>
<input type="text" id="zoomtype" style="width:400px;" disabled>
<button id="openMap" type="button">Show Map!</button>
<div id="map">
<h1 style="color:white;background-color:grey;">Please drag & drop the marker to the desired position and press save!</h1>
<div id="map-canvas"></div>
<p><span style="color:white;background-color:grey;">Current location of marker</p></span>
<input type="text" id="location" style="width:400px;" disabled>
<button type="button" id="saveLocation">Save</button>
<br>
<p><span style="color:white;background-color:grey;">Current zoomlevel</p></span>
<input type="text" id="zoomlevel" style="width:400px;" disabled>
<button type="button" id="saveZoom">Save</button>
<button id="closeMap" type="button" style="width:200px;">Close Map!</button>
</div>
</body>
</html>Gruß,
crnkjex
