You are not logged in.

[JavaScript] Problem mit dem Einbinden von Google Maps

Felix (Keyway)

Member

  • "Felix (Keyway)" is male
  • "Felix (Keyway)" started this thread

Posts: 191

Location: Hamburg

Occupation: Keinen da in der schulischen Ausbildung

  • Send private message

1

Wednesday, June 20th 2012, 2:21pm

Problem mit dem Einbinden von Google Maps

Hi,

Ich habe so ein kleines Problem beim Einbinden von Google Maps.

Hier mein HTML-Quelltext:

HTML

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!DOCTYPE html>
<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: 0px; padding: 0px }
  #transparentBackground { position: fixed; left: 0; top: 0; background: black; height: 100%; width: 100%; filter: alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; display:none; }
  .closeButton { background:red; position:fixed; right:1em; top:1em; padding:1em; border-radius:5px; }
  .closeButton:hover { background:grey; }
  .closeButton { color:yellow; font-weight:bold; text-decoration:none; display:block; }
  .closeButton:hover { color:black; }
  #map_border { text-align:center; position:fixed; left:20%; top:20%; border: 1px black solid; border-radius: 20px; background:white; width:60%; height:60%; background:white; padding:0; }
  #map_canvas { margin:0; position: fixed; left: 5%; top: 5%; color: white; }
</style>
<script type="text/javascript"
	src="https://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript" src="gmap.js"></script>
</head>
<body onload="initialize()">
<a href="javascript:mapOpen();">Map anzeigen</a>
	<div id="transparentBackground">
			<a class="closeButton" href="javascript:mapClose();">schließen</a>
		<div id="map_border">
			<div id="map_canvas" style="width:90%; height:90%">
				Bitte aktivieren sie JavaScript, um diese Karte in ihrem Browser anzuzeigen.
			</div>
		</div>
	</div>
</body>
</html>


Dazu der JavaScript-Code:

Javascript source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

}

function mapOpen() {
document.getElementById('transparentBackground').setAttribute('style', 'display:inline');
}

function mapClose() {
document.getElementById('transparentBackground').setAttribute('style', 'display:none');
}


Die Map soll eigentlich vor einem transperenten Hintergrund angezeigt werden, aber dort wo die Map sein sollte, ist nichts. Weiß jemand Rat?
Mit freundlichen Grüßen
Best Regards
Felix

This post has been edited 2 times, last edit by "Felix (Keyway)" (Jun 20th 2012, 9:05pm) with the following reason: Prefix hinzugefügt

Similar threads