Carrear
Erfahrenes Mitglied
Hi Leute,
nutze ein Plugin zur Kartendarstellung a la GoogleMaps. Ich habe dafür folgende HTML Struktur:
und folgendes um darin das Plugin zu nutzen:
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:
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?
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: