Pimcore Google Maps Brick

Lukas [php, Pimcore, Tricks und Tools]

Ein immer wieder gewünschtes Feature einer Webseite ist ein Lageplan. Damit dieser einfach wiederverwendet werden kann empfiehlt sich hier ein selbst gestricktes Brick.

Backend

Der Sourcecode beginnt mit dem anbinden der Google Maps API. Danach ist je nachdem ob man im Editmode oder nicht schon alles anders.  Im Editmode gibt es die Karte selbst und ein Suchfeld für eine Adresseingabe. Dazu noch einige versteckte Felder die zum Speichern der Koordinatoren sowie der Zoomstufe.

echo '<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>';
if ($this->editmode) {
    echo '<h3>Adresse suchen</h3>';
    echo '<div id="gmap-1" class="googlemap" style="height: 400px;margin-bottom:0.8em;"></div>';
    echo $this->input("address", array("id" => "address"));
    echo '<input type="button" id="searchAddressBtn" value="Adresse suchen ..." />';

    $lat = $this->input("lat", array("id" => "lat", "style" => "display:none"));
    $lng = $this->input("lng", array("id" => "lng", "style" => "display:none"));
    $zoom = $this->input("zoom", array("id" => "zoom", "style" => "display:none"));

    echo $lat;
    echo $lng;
    echo $zoom;

Es folgt der Javascript Part. Dabei wird die Karte selbst initialisiert. Danach wird ein Positionsmarker eingesetzt. Dieser befindet sich in unserem Fall in der Mitte der Schweiz, sofern er nicht schon verschoben wurde. Beim verschieben des Markers sowie ändern des Zooms wird der neue Wert in die versteckten Formularfelder übertragen. Zum schluss noch die Funktion, welches wie Geocoder API von Google die Koordinaten zur im Suchfeld eingegebenen Adresse zurückgibt. Damit setzen wir den Marker sowie erneut die Werte des lat und lng Feldes.

<script type="text/javascript">
if (typeof google!='undefined') {
    var myPosition = new google.maps.LatLng(<?= ($lat->getValue() == "") ? '46.813187' : $lat->getValue() ; ?>, <?= ($lng->getValue() == "") ? '8.22421' : $lng->getValue() ; ?>);
    var mapOptions = {
        zoom : <?= ($zoom->getValue() == "") ? '12' : $zoom->getValue() ; ?>,
        center : myPosition,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('gmap-1'), mapOptions);
    var marker = new google.maps.Marker({ldelim}
        position: myPosition,
        map: map,
        draggable: true,
    });
    google.maps.event.addListener(map, 'zoom_changed', function() {ldelim}
        $('#zoom').val(map.getZoom());
    });
    google.maps.event.addListener(marker, 'dragend', function(position) {ldelim}
        $('#lat').val(position.latLng.lat());
        $('#lng').val(position.latLng.lng());
    });

    $('#searchAddressBtn').click(function() {ldelim}
        searchAddress($('#address').val());
    });
    function searchAddress(search) {ldelim}
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ldelim}address: search}, function(result, status) {ldelim}
            if (status == 'OK') {
                $.each(result, function(i, res) {ldelim}
                    marker.setPosition(res.geometry.location);
                    map.setCenter(res.geometry.location);
                    $('#lat').val(res.geometry.location.lat());
                    $('#lng').val(res.geometry.location.lng());
                });
            }
        });
    }
}
</script>

Frontend

Im viewmode wird nun die Karte ganz einfach angezeigt. Ohne jegliche zusätzliche Spezialfunktion.

<div id="gmap-1" class="googlemap"></div>
<script type="text/javascript">
if (typeof google!='undefined') {ldelim}
    var myPosition = new google.maps.LatLng(<?= $this->input("lat") ?>, <?= $this->input("lng") ?>);
    var mapOptions = {
        zoom : <?= $this->input("zoom") ?>,
        center : myPosition,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };

    var marker = new google.maps.Marker({
        position: myPosition,
        map: map
    });
}
</script>

zurück