1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

WordPress (Plugin) Karte per click einbinden

Dieses Thema im Forum "Content Management Systeme (CMS)" wurde erstellt von Crativ, 4. Dezember 2017.

  1. Crativ

    Crativ Grünschnabel

    Guten Tag Zusammen,

    derzeit benutze ich das Plugin "WP Google Maps" in WordPress, um eine GoogleMap auf einer Website einzubinden. Das klappt soweit auch sehr gut.

    Nun möchte ich diese aber über einen Button einblenden. Wenn die Seite geladen wird soll sie zunächst nicht sichtbar sein. Erst durch Klicken des darüber liegenden Buttons soll die Karte mit slidetoogle sichtbar werden.

    Ich hab bereits viel im Internet danach recherchiert und auch viel ausprobiert, aber meine Kenntnisse in Javascript sind nicht weitreichend genug. Es soll wohl daran liegen, dass die Größe der Karte nicht mehr initalisiert wird.
    Die Kontrollanzeige der Karte (falls sich der Karte/Satellit-Wechsler und die Zoom-Option so nennen) werden korrekt dargestellt

    Zur der Karte selbst gibt das Plugin leider nur einen Shortcode raus. Alle was ich habe, ist folgender Code.

    Mein Jquery-Code:
    Code (Javascript):
    1. $('#google_map').hide();
    2.  
    3. $('#map_button').click(function () {
    4.         $('#google_map').slideToggle();
    5. });

    im Anhang befindet sich eine grobe Visualiersung meines Vorhabens.
    Button klicken = Map erscheinen
    Seit ein paar Tagen schon, suche ich vergeblich nach einer Lösung
    Vielleicht weiß hier jmd. mehr darüber :)

    MfG
    Danke schon mal vorab
     

    Anhänge:

  2. EuroCent

    EuroCent KlappStuhl 2.0

    Ich würde es wie folgt machen:

    Hiermit lässt Du die Karte erst per Klick anzeigen und kannst Sie wieder verstecken.
    Vorweg wird die Karte immer ausgeblendet.

    HTML:
    1. <button id="google_button">Google Maps einblenden</button>
    2. <div id="google_map">Hier die MAP</div>
    Code (Javascript):
    1. $('#google_button').click(function() {
    2.   $('#google_map').toggleClass("show");
    3. });
    CSS für
    Code (CSS):
    1. #google_button {
    2.   padding: 10px;
    3.   outline: none;
    4.   background: #123;
    5.   color: #fff;
    6.   text-decoration: none;
    7.   font-size: 14px;
    8. }
    9.  
    10. #google_map {
    11.   display: none;
    12. }
    13.  
    14. .show {
    15.   display: block !important;
    16.   height: 180px;
    17.   width: 180px;
    18.   border: 1px solid #333;
    19.   border-radius: 5px;
    20.   padding: 10px;
    21.   text-align: center;
    22. }
    Testen kannst Du es hier: CodePen - ToggleButton
     
  3. Crativ

    Crativ Grünschnabel

    Danke auf jeden Fall! Heute morgen habe ich das Problem bereits gelöst bzw. umgangen, indem ich mir mit "Snazzy maps" (ein Tool, um sich eine Karte zusammenzuklicken) ein iframe gebastelt habe. Nun stehe ich aber vor einem anderen Problem.
    Erst funktioniert alles wie gewollt. Die Breite ist korrekt, der Zoom ist korrekt, der Standort-Marker ist zentriert...-
    allerdings ist die Karte bei folgenden Szenario nicht mehr zentriert:

    Meine Karte befindet sich auf der Startseite, klicke ich aber auf eine andere Seite, bspw. auf "Blog" und kehre anschließend wieder auf die Startseite zurück, ist die Karte nicht mehr zentriert, und der Marker außerhalb der Karte (also, sodass man erst aus der Karte rauszoomen muss, damit dieser wieder sichtbar wird)

    Hast du da vllt. eine Idee?
    Mein Code:

    Code (Javascript):
    1.     $("#map").hide();
    2.  
    3.     $('#google_button').click(function () {
    4.         $('#map').slideToggle('slow');
    5.         initialize(); // initialize the map
    6.         google.maps.event.trigger(map, 'resize');
    7.     });
    Was die beiden Zeilen
    "initialize(); // initialize the map
    google.maps.event.trigger(map, 'resize');"
    machen, weiß ich nichtmal, hab das in vielen englischen foren gelesen.. :S das soll die Größe der Karte initalisieren?

    Code (HTML5):
    1.  
    2. <iframe id="map" src="https://snazzymaps.com/embed/33637" width="100%" height="400px" style="border:none;"></iframe>
    Dann nochmal :)
    MfG
     
  4. EuroCent

    EuroCent KlappStuhl 2.0

    Kein Problem :)
     
    Crativ gefällt das.
Die Seite wird geladen...