kochixx
Goto Top

Problem beim anpassen einer Legende in Google Maps

Hallo zusammen,

ich habe aktuell ein merkwürdiges Problem beim anpassen einer Karte von Google Maps...
Ich möchte gern eine Legende fest auf die Karte setzen wir hier beschrieben:
https://developers.google.com/maps/tutorials/customizing/adding-a-legend ...

Grundlegend funktioniert dies auch ohne Probleme außer ich möchte der Legende mehr als 400px in der Breite geben.
Die Darstellung des Overlays ist dann zwar immer noch richtig aber sobald man auch nur eine Breite von 401px angibt funktionieren keine InfoWindows mehr!
(hierbei spielt es auch keine Rolle wie groß man den Container der eigentlichen Karte skaliert - selbst bei 2000px tritt das Problem auf)

Hier ein kleines Beispiel:

<!doctype html>
<html>
<head>
<meta charset="utf-8">  

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

	function initGmap() {
	var mapOptions = {
		zoom: 16,
		disableDefaultUI: true,
		center: new google.maps.LatLng(52.5204184, 13.4062598),
	};
	
	var mapElement = document.getElementById('gmap');  
	var map = new google.maps.Map(mapElement, mapOptions);
	map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById('legend'));  
}
	
	
	google.maps.event.addDomListener(window, 'load', initGmap);  
</script>

<style type="text/css">  
	* { box-sizing:border-box; }

	#gmap {
		width:1000px;
		height:400px;
		margin:auto;
	}
	
	#legend {
		width:500px;
		height:400px;
		padding:25px;
		background:#fff;
		opacity:0.7;
	}
</style>

<title>GMap</title>
</head>

<body>
<div id="gmap"></div>  
<div id="legend">  
	<h2>Test</h2>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
	   invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
	   et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
	   Lorem ipsum dolor sit amet.</p>
</div>

</body>
</html>

Vielleicht hat von euch jemand eine Idee woran es scheitert.

Grüße
Kochi

Content-ID: 292443

Url: https://administrator.de/contentid/292443

Ausgedruckt am: 08.11.2024 um 05:11 Uhr

FalcoK
Lösung FalcoK 07.01.2016 aktualisiert um 12:46:23 Uhr
Goto Top
<!doctype html>
<html>
<head>
<meta charset="utf-8">  

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

	function initGmap() {
	var mapOptions = {
		zoom: 16,
		disableDefaultUI: true,
		center: new google.maps.LatLng(52.5204184, 13.4062598),
	};
	
	var mapElement = document.getElementById('gmap');  
	var map = new google.maps.Map(mapElement, mapOptions);
	map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById('legend'));  
}
	
	
	google.maps.event.addDomListener(window, 'load', initGmap);  
</script>

<style type="text/css">  
	* { box-sizing:border-box; }

	#gmap {
		width:1600px;
		height:900px;
		padding: 20px 20px 20px 50px;
	}
	
	#legend {
		width:600px;
		height:900px;
		padding-left:150px;
		background:#fff;
		opacity:0.6;
	}
</style>

<title>GMap</title>
</head>

<body>
<div id="gmap"></div>  
<div id="legend">  
	<h2>Test</h2>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
	   invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
	   et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
	   Lorem ipsum dolor sit amet.</p>
</div>

</body>
</html>


Meinst du so?
Kochixx
Kochixx 07.01.2016 um 12:37:45 Uhr
Goto Top
Hallo FalcoK,

danke für die Antwort aber das meinte ich nicht.

Also das Problem ist folgendes:
Wenn ich dem Element #legend ein feste breite von 400px gebe ist alles in Ordnung wenn man ein InfoWindow aufruft (z.B. Berlin Alexanderplatz Bahnhof)
3d4732053262d199a9c9acb7eefbe6fa

Setze ich die breite nun auf 401px oder größer dann funktioniert das ganze nicht mehr (hier im Beispiel 500px)
4583d74fb99cd769fbb2870584b48c98

Und ich hab ehrlich gesagt keine Ahnung warum.
Kochixx
Kochixx 07.01.2016 aktualisiert um 12:52:46 Uhr
Goto Top
Sorry da war ich zu voreilig :/ (der Cache machts halt manchmal :D)

Du hast vollkommen Recht.
Solang vom Element #legend die Breite<=Höhe ist funktioniert es anscheinend.

Das ist trotzdem etwas Rätselhaft aber damit kann ich leben.

Danke dir!
FalcoK
FalcoK 07.01.2016 um 13:02:49 Uhr
Goto Top
Gerne, weiterhin viel Glück ^^