Wie kann ich das anzeigen von Google-Map-Bereich von Advanced Custom Fields plugin im Frontend meiner site?

Benutzt habe ich Google-Anzeigen Bereich Advanced Custom Fields plugin-input-map-Wert von backend meiner Website. Kann mir jemand empfehlen beste Weg, um die Anzeige im frontend meiner site?

InformationsquelleAutor Manesh Timilsina | 2014-05-20
  1. 6

    Habe ich versucht, die oben akzeptierte Antwort, die hat nicht für mich gearbeitet. Die einfache Lösung, die ich gefunden habe, ist die Beurteilung der Lage mit ACF-plugin über das dashboard und zeigt es mit einem iframe.

         <iframe width="400" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ca/maps?center=<?php the_field('maps'); ?>&q=<?php the_field('maps'); ?>&zoom=14&size=300x300&output=embed&iwloc=near"></iframe><br />

    Hier Karten ist der name der benutzerdefinierten google-map-Feld, welches ich erstellt habe. Ersetzen Sie es mit den von Ihnen gewünschten Feldnamen.

    InformationsquelleAutor user46487
  2. 4

    Fand ich die Lösung mit google-map-Feld des ACF. Sie finden die Dokumentation von ACF google map Feld hier

    Wenn Sie nicht wollen, verwenden Sie die Standard-Skript von ACF, die Sie betrachten können, folgende Vorgehensweise:

    Fügen Sie folgenden div wo Sie wollen, um die Karte anzuzeigen:

    <div id="map_canvas" style="height: 350px;width: 1200px; margin: 0.6em;"></div>

    Fügt folgende codes in der Fußzeile Ihrer Website über wp_footer

    <?php $map = get_field('map', get_the_ID()); ?>

<script type="text/javascript"> 

  function initialize() {
        var myLatlng = new google.maps.LatLng(<?php echo $map['lat']; ?>, <?php echo $map['lng']; ?>);
        var myOptions = {
          zoom: 11,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      }

      function loadScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
        document.body.appendChild(script);
      }

      window.onload = loadScript;
    </script>
    InformationsquelleAutor Manesh Timilsina
Schreibe einen Kommentar