WordPress (Plugin) Karte per click einbinden

[Crativ]

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:

$('#google_map').hide();

$('#map_button').click(function () {
        $('#google_map').slideToggle();
});

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

 

[EuroCent]

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.

<button id="google_button">Google Maps einblenden</button>
<div id="google_map">Hier die MAP</div>

$('#google_button').click(function() {
  $('#google_map').toggleClass("show");
});

CSS für

#google_button {
  padding: 10px;
  outline: none;
  background: #123;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

#google_map {
  display: none;
}

.show {
  display: block !important;
  height: 180px;
  width: 180px;
  border: 1px solid #333;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
}

Testen kannst Du es hier: CodePen - ToggleButton

 

[Crativ]

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:

    $("#map").hide();

    $('#google_button').click(function () {
        $('#map').slideToggle('slow');
        initialize(); // initialize the map
        google.maps.event.trigger(map, 'resize');
    });

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?

<iframe id="map" src="https://snazzymaps.com/embed/33637" width="100%" height="400px" style="border:none;"></iframe>

Dann nochmal
MfG

 

[EuroCent]

Kein Problem