Reload bei Resize

Carrear

Erfahrenes Mitglied
Hi Leute,

nutze ein Plugin zur Kartendarstellung a la GoogleMaps. Ich habe dafür folgende HTML Struktur:

HTML:
<section class="main">
	<article>
    <div class="map">
    <img src="http://www.tutorials.de/img/map.jpg" class="imgMap" style="max-width: 100%" />
    <div class="marker" id="Breakdancer" data-coords="1685, 785">
    Informationen zum Fahrgeschäft
    </div>
    <div class="marker" id="Partyzelt" data-coords="1440, 540">
    Gaypeople Zelt
    </div>
    <div class="marker" id="OlympiaLooping" data-coords="1450, 170">
    Olympia Looping
    </div>
    <div class="marker" id="WildeMaus" data-coords="350, 320">
    Wilde Maus
    </div>
    </div>
     

	</article>
</section>


und folgendes um darin das Plugin zu nutzen:

Code:
$(document).ready(function() {

$('.map').craftmap({
	cookies: false, // (bool) remember position 
	fullscreen: false, // (bool) fullscreen
	container: {
		name: 'imgContent' // (string) class name for an image container
	},
	image: {
		width: 1827, // (int) image width
		height: 1167, // (int) image height
		name: 'imgMap' // (string) class name for an image
	},
	map: {
		position: 'center'  // (string) map position after loading - 'X Y', 'center', 'top_left', 'top_right', 'bottom_left', 'bottom_right'
	},
	marker: {
		name: 'marker', // (string) class name for a marker
		center: true, // (bool) set true to pan the map to the center 
		popup: true, // (bool) set true to show a popup
		popup_name: 'popup', // (string) class name for popup
		onClick: function(marker, popup){},
		onClose: function(marker, popup){}
	},
	controls: {
		init: true, // (bool) set true to control a map from any place on the page
		name: 'controls', // (string) class name for controls container
		onClick: function(marker){}
	},
	preloader: {
		init: true, // (bool) set true to preload an image
		name: 'preloader', // (string) class name for a preload container
		onLoad: function(img, dimensions){}
	}
});

});

Wenn ich das Fenster in der Größe verändere passt sich auch der map Container an und das kann das Plugin irgendwie nicht verarbeiten. Zieht man das Fenster kleiner als im anfänglichen Zustand beim laden der Seite, dann entsteht rechts neben der Karte im map Container ein Leerraum (Dafür einfach im Vollbild einmal F5 drücken und dann das Fenster klein ziehen - die Karte ganz nach links ziehen - dort ist der Freiraum). Reloaded man aber das verkleinerte Fenster, dann stimmt wieder alles. Deswegen würde ich gerne bei resize den kompletten Inhalt des Containers löschen (inklusive allem was mit JS zu tun hat und es neu laden. Ich habe es mir so gedacht:

Code:
	$('window').resize(function(){	
		$('.map').remove();
		$('section.main>article').load('map.php');
		$('.map').craftmap({
			cookies: false, // (bool) remember position 
				fullscreen: false, // (bool) fullscreen
			container: {
				name: 'imgContent' // (string) class name for an image container
				},
			image: {
				width: 1827, // (int) image width
				height: 1167, // (int) image height
				name: 'imgMap' // (string) class name for an image
				},
			map: {
				position: 'center'  // (string) map position after loading - 'X Y', 'center', 'top_left', 'top_right', 'bottom_left', 'bottom_right'
				},
			marker: {
				name: 'marker', // (string) class name for a marker
				center: true, // (bool) set true to pan the map to the center 
				popup: true, // (bool) set true to show a popup
				popup_name: 'popup', // (string) class name for popup
				onClick: function(marker, popup){},
				onClose: function(marker, popup){}
				},
			controls: {
				init: true, // (bool) set true to control a map from any place on the page
				name: 'controls', // (string) class name for controls container
				onClick: function(marker){}
				},
			preloader: {
				init: true, // (bool) set true to preload an image
				name: 'preloader', // (string) class name for a preload container
				onLoad: function(img, dimensions){}
				}
				});
		});
});

in der map.php ist einfach noch einmal standalone die HTML Struktur, die ich hier oben auch gepostet habe. Fällt euch was auf? Warum funktioniert das nicht?
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück