Contao-Camp 2024
Ergebnis 1 bis 31 von 31

Thema: Farben der Karte anpassen (via MapTypeStyler)

  1. #1
    Contao-Nutzer Avatar von herrweiss
    Registriert seit
    28.01.2010.
    Ort
    Kronberg
    Beiträge
    194
    Partner-ID
    6476

    Standard Farben der Karte anpassen (via MapTypeStyler)

    Hallo zusammen,

    laut Google Maps JavaScript API V3 – Referenz ist es ja möglich via "MapTypeStyler" die Farbe der Karte komplett anzupassen. Hat jemand damit Erfahrung? Ich dachte erst ich könnte in den Map-Einstellungen im Feld "Ergänzende Parameter" den generierten JSON Code reinkopieren. So einfach scheint das aber doch nicht zu sein.

    Hat jemand schonmal sowas umgesetzt und kann mir ein paar Tipps geben?

    Grüße,
    Patrick

  2. #2
    Contao-Nutzer
    Registriert seit
    25.11.2009.
    Beiträge
    34

    Standard

    Wurde mir auch sehr Hilfen. Haben Sie schon einen Lösung gefunden?

  3. #3
    Contao-Fan Avatar von dhe
    Registriert seit
    25.10.2010.
    Ort
    Esslingen a.N.
    Beiträge
    657

    Standard Modifiziertes ce_dlh_googlemaps.xhtml für Farbdarstellung

    Hallo Leute,
    da ich wie viele andere auch die Google Karten farblich anpassen wollte, habe ich mich mal dran gemacht und das o.g. Template angepasst.
    Ich hab das "Ergänzende Parameter" Feld im Backend missbraucht, dort trägt man nun die Styles ein, die man z.b. bei Google Maps Style Wizard erhält. Form sollte so sein:
    Code:
    [
      {
        stylers: [
          { hue: "#ff0000" }
        ]
      }
    ]
    PHP-Code:
    <!-- indexer::stop -->

    <div class="<?php echo $this->class?> bum block"<?php echo $this->cssID?><?php if ($this->style): ?> style="<?php echo $this->style?>"<?php endif; ?>>
    <?php if ($this->headline): ?>

    <<?php echo $this->hl?>><?php echo $this->headline?></<?php echo $this->hl?>>
    <?php endif; ?>

    <div class="dlh_googlemap block" id="dlh_googlemap_<?php echo $this->map['id']; ?>" style="width:<?php echo $this->map['mapSize'][0].$this->map['mapSize'][2]; ?>;height:<?php echo $this->map['mapSize'][1].$this->map['mapSize'][2]; ?>;"><noscript><p><?php echo ($this->map['staticMapNoscript'] ? $this->map['staticMap'] : $this->labels['noscript']); ?></p></noscript></div>

    <script type="text/javascript">
    /* <![CDATA[ */

    var styles;
    function gmap<?php echo $this->map['id']; ?>_initialize() {
        
        <?php if ($this->map['parameter']) echo "styles = "$this->map['parameter'] .";"?>
        
        var gmap<?php echo $this->map['id']; ?>_Options = {
            zoom: <?php echo $this->map['zoom']; ?>
            , center: new google.maps.LatLng(<?php echo $this->map['center']; ?>)    
            , mapTypeId: google.maps.MapTypeId.<?php echo $this->map['mapTypeId']; ?>
            , draggable: <?php echo $this->map['draggable']; ?>
            , disableDoubleClickZoom: <?php echo $this->map['disableDoubleClickZoom']; ?>
            , scrollwheel: <?php echo $this->map['scrollwheel']; ?>
            , streetViewControl: <?php echo $this->map['streetViewControl']; ?>
            
            <?php if ($this->map['useMapTypeControl']) : ?>
            , mapTypeControl: true
            , mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.<?php echo $this->map['mapTypeControlStyle']; ?>
                , position: google.maps.ControlPosition.<?php echo $this->map['mapTypeControlPos']; ?>
                <?php if (is_array($this->map['mapTypesAvailable'])) : ?>
                , mapTypeIds: [
                    <?php foreach($this->map['mapTypesAvailable'] as $k=>$v) : ?>
                        <?php if($k>0) echo ','?>google.maps.MapTypeId.<?php echo $v?>
                    <?php endforeach; ?>
                    ]
                <?php endif; ?>
            }
            <?php else : ?>
            , mapTypeControl: false
                <?php endif; ?>
            
            <?php if ($this->map['useNavigationControl']) : ?>
            , navigationControl: true
            , navigationControlOptions: {
                style: google.maps.NavigationControlStyle.<?php echo $this->map['navigationControlStyle']; ?>,
                position: google.maps.ControlPosition.<?php echo $this->map['navigationControlPos']; ?>
            }
            <?php else : ?>
            , navigationControl: false
            <?php endif; ?>
            
            <?php if ($this->map['useScaleControl']) : ?>
            , scaleControl: true
            , scaleControlOptions: {
                position: google.maps.ControlPosition.<?php echo $this->map['scaleControlPos']; ?>
            }
            <?php else : ?>
            , scaleControl: false
            <?php endif; ?>
        };
        
        var gmap<?php echo $this->map['id']; ?> = new google.maps.Map(document.getElementById("dlh_googlemap_<?php echo $this->map['id']; ?>"), gmap<?php echo $this->map['id']; ?>_Options);
        
        var styledMapOptions = {
            name: "<?php echo $this->map['title']?>"
        }

        var styledMapType = new google.maps.StyledMapType(styles, styledMapOptions);
        gmap<?php echo $this->map['id']; ?>.mapTypes.set('<?php echo $this->map['title']?>', styledMapType);
        gmap<?php echo $this->map['id']; ?>.setMapTypeId('<?php echo $this->map['title']?>');
        
        <?php $count=-1; foreach($this->map['elements'] AS $element) : $count++; $element['id']=$this->map['id'].'_'.$count; switch($element['type']) :
        
            case 
    'MARKER'?>
                <?php if ($element['singleCoords'] && $element['markerType']) : ?>
                var gmap<?php echo $element['id']; ?>_marker = new google.maps.Marker({
                    position: new google.maps.LatLng(<?php echo $element['singleCoords']; ?>)
                    , map: gmap<?php echo $this->map['id']; ?>
                    <?php if($element['markerType']=='ICON') : ?>
                        <?php if($element['iconSRC'] && $element['iconSize'][0] && $element['iconSize'][1]) : ?>
                        , icon: new google.maps.MarkerImage(
                            '<?php echo $element['iconSRC']; ?>'
                            , new google.maps.Size(<?php echo $element['iconSize'][0].','.$element['iconSize'][1]; ?>)
                            , new google.maps.Point(0,0)
                            , new google.maps.Point(<?php echo $element['iconAnchor'][0].','.$element['iconAnchor'][1]; ?>)
                            , new google.maps.Size(<?php echo $element['iconSize'][0].','.$element['iconSize'][1]; ?>)
                            )
                        <?php endif; ?>
                        <?php if($element['shadowSRC'] && $element['shadowSize'][0] && $element['shadowSize'][1]) : ?>
                        , shadow: new google.maps.MarkerImage(
                            '<?php echo $element['shadowSRC']; ?>'
                            , new google.maps.Size(<?php echo $element['shadowSize'][0].','.$element['shadowSize'][1]; ?>)
                            , new google.maps.Point(0,0)
                            , new google.maps.Point(<?php echo $element['iconAnchor'][0].','.$element['iconAnchor'][1]; ?>)
                            , new google.maps.Size(<?php echo $element['shadowSize'][0].','.$element['shadowSize'][1]; ?>)
                            )
                        <?php endif; ?> 
                    <?php endif; ?>
                    <?php if($element['markerAction'] == 'LINK' && $element['linkTitle']) : ?>
                        , title:"<?php echo $element['linkTitle']; ?>"
                    <?php elseif ($element['markerShowTitle']) : ?>
                        , title:"<?php echo $element['title']; ?>"
                    <?php endif; ?>
                    <?php if ($element['zIndex']) : ?>
                        , zIndex: <?php echo $element['zIndex']; ?>
                    <?php endif; ?>
                    <?php if ($element['parameter']) : ?>
                        , <?php echo $element['parameter']; ?>
                    <?php endif; ?>
                });
                <?php if($element['markerAction'] == 'INFO') : ?>
                    <?php if($element['useRouting']) {
                        
    $routingPoint = ($element['routingAddress'] ? $element['routingAddress'] : $element['singleCoords']);
                        
    $routingLink '<div class="routinglink">' str_replace('?','<a href="http://maps.google.com/maps?saddr=&daddr=' urlencode($routingPoint) . '&ie=UTF8&hl=' $this->map['language'] . '" onclick="window.open(this.href); return false;">' $this->labels['routingLink'] . '</a>'$this->labels['routingLabel']) . '<br /><form action="http://maps.google.com/maps" method="get" target="_new"><input type="hidden" name="daddr" value="' $routingPoint '" /><input type="hidden" name="ie" value="UTF8" /><input type="hidden" name="hl" value="' $this->map['language'] . '" /><input type="text" class="text" name="saddr" /><input type="submit" class="submit" value="' $this->labels['routingSubmit'] . '" /></form></div>';
                    } else {
                        
    $routingLink '';
                    } 
    ?>
                    var gmap<?php echo $element['id']; ?>_infowindow = new google.maps.InfoWindow({
                        position: new google.maps.LatLng(<?php echo $element['singleCoords']; ?>),
                        <?php if ($element['infoWindowAnchor'][0] && $element['infoWindowAnchor'][1]) : ?>
                        pixelOffset: new google.maps.Size(<?php echo $element['infoWindowAnchor'][0].','.$element['infoWindowAnchor'][1]; ?>),
                        <?php endif; ?>
                        content: '<?php echo $element['infoWindow'].$routingLink?>'
                        });
                    google.maps.event.addListener(gmap<?php echo $element['id']; ?>_marker, 'click', function() {
                        gmap<?php echo $element['id']; ?>_infowindow.open(gmap<?php echo $this->map['id']; ?>);
                        });
                    <?php if($element['popupInfoWindow']) : ?>
                        gmap<?php echo $element['id']; ?>_infowindow.open(gmap<?php echo $this->map['id']; ?>);
                    <?php endif; ?>
                <?php elseif($element['markerAction'] == 'LINK') : ?>
                    google.maps.event.addListener(gmap<?php echo $element['id']; ?>_marker, 'click', function() {
                        <?php if($element['target']) : ?>
                        window.open('<?php echo $element['url']; ?>','_blank','resizable=yes,scrollbars=yes,toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes');
                        <?php else :?>
                        window.location.href='<?php echo $element['url']; ?>';
                        <?php endif; ?>
                        });
                <?php endif; ?>
                <?php if ($element['parameter']) : ?>
                    <?php echo $element['parameter']; ?>
                <?php endif; ?>
                <?php endif; ?>
                <?php break;
        
            case 
    'POLYLINE' ?>
                <?php if ($element['multiCoords'][0] && $element['strokeColor'] && $element['strokeOpacity'] && $element['strokeWeight']['value']) : ?>
                var gmap<?php echo $element['id']; ?>_path = new google.maps.Polyline({
                    path: [
                    <?php foreach($element['multiCoords'] as $k=>$v) : ?>
                        <?php if($k>0) echo ','?>new google.maps.LatLng(<?php echo $v?>)
                    <?php endforeach; ?>
                        ]
                    , strokeColor: "#<?php echo $element['strokeColor']; ?>"
                    , strokeOpacity: <?php echo $element['strokeOpacity']; ?>
                    , strokeWeight: <?php echo $element['strokeWeight']['value']; ?>
                    <?php if ($element['zIndex']) : ?>
                        , zIndex: <?php echo $element['zIndex']; ?>
                    <?php endif; ?>
                    <?php if ($element['parameter']) : ?>
                        , <?php echo $element['parameter']; ?>
                    <?php endif; ?>
                    });
                gmap<?php echo $element['id']; ?>_path.setMap(gmap<?php echo $this->map['id']; ?>);
                <?php endif; ?>
                <?php break;
        
            case 
    'POLYGON' ?>
                <?php if ($element['multiCoords'][0] && $element['strokeColor'] && $element['strokeOpacity'] && $element['strokeWeight']['value']) : ?>
                var gmap<?php echo $element['id']; ?>_polygon = new google.maps.Polygon({
                    path: [
                    <?php foreach($element['multiCoords'] as $k=>$v) : ?>
                        <?php if($k>0) echo ','?>new google.maps.LatLng(<?php echo $v?>)
                    <?php endforeach; ?>
                        ]
                    , strokeColor: "#<?php echo $element['strokeColor']; ?>"
                    , strokeOpacity: <?php echo $element['strokeOpacity']; ?>
                    , strokeWeight: <?php echo $element['strokeWeight']['value']; ?>
                    <?php if ($element['fillColor'] && $element['fillOpacity']) : ?>
                        , fillColor: "#<?php echo $element['fillColor']; ?>"
                        , fillOpacity: <?php echo $element['fillOpacity']; ?>
                    <?php endif; ?>
                    <?php if ($element['zIndex']) : ?>
                        , zIndex: <?php echo $element['zIndex']; ?>
                    <?php endif; ?>
                    <?php if ($element['parameter']) : ?>
                        , <?php echo $element['parameter']; ?>
                    <?php endif; ?>
                    });
                gmap<?php echo $element['id']; ?>_polygon.setMap(gmap<?php echo $this->map['id']; ?>);
                <?php if($element['markerAction'] == 'INFO') : ?>
                    var gmap<?php echo $element['id']; ?>_infowindow = new google.maps.InfoWindow({
                        position: new google.maps.LatLng(<?php echo $element['windowPosition']; ?>),
                        <?php if ($element['infoWindowAnchor'][0] && $element['infoWindowAnchor'][1]) : ?>
                        pixelOffset: new google.maps.Size(<?php echo $element['infoWindowAnchor'][0].','.$element['infoWindowAnchor'][1]; ?>),
                        <?php endif; ?>
                        content: '<?php echo $element['infoWindow']; ?>'
                        });
                    google.maps.event.addListener(gmap<?php echo $element['id']; ?>_polygon, 'click', function(event) {
                        gmap<?php echo $element['id']; ?>_infowindow.setPosition(event.latLng);
                        gmap<?php echo $element['id']; ?>_infowindow.open(gmap<?php echo $this->map['id']; ?>);
                        });
                    <?php if($element['popupInfoWindow']) : ?>
                        gmap<?php echo $element['id']; ?>_infowindow.open(gmap<?php echo $this->map['id']; ?>);
                    <?php endif; ?>
                <?php elseif($element['markerAction'] == 'LINK') : ?>
                    google.maps.event.addListener(gmap<?php echo $element['id']; ?>_polygon, 'click', function() {
                        <?php if($element['target']) : ?>
                        window.open('<?php echo $element['url']; ?>','_blank','resizable=yes,scrollbars=yes,toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes');
                        <?php else :?>
                        window.location.href='<?php echo $element['url']; ?>';
                        <?php endif; ?>
                        });
                <?php endif; ?>
                <?php endif; ?>
                <?php break;
        
            case 
    'RECTANGLE' ?>
                <?php if ($element['bounds'][0] && $element['bounds'][1] && $element['strokeColor'] && $element['strokeOpacity'] && $element['strokeWeight']['value']) : ?>
                var gmap<?php echo $element['id']; ?>_rectangle = new google.maps.Rectangle({
                    bounds: new google.maps.LatLngBounds(
                        new google.maps.LatLng(<?php echo $element['bounds'][0]; ?>),
                        new google.maps.LatLng(<?php echo $element['bounds'][1]; ?>)
                        )
                    , strokeColor: "#<?php echo $element['strokeColor']; ?>"
                    , strokeOpacity: <?php echo $element['strokeOpacity']; ?>
                    , strokeWeight: <?php echo $element['strokeWeight']['value']; ?>
                    <?php if($element['fillColor'] && $element['fillOpacity']) : ?>
                        , fillColor: "#<?php echo $element['fillColor']; ?>"
                        , fillOpacity: <?php echo $element['fillOpacity']; ?>
                    <?php endif; ?>
                    <?php if ($element['zIndex']) : ?>
                        , zIndex: <?php echo $element['zIndex']; ?>
                    <?php endif; ?>
                    <?php if ($element['parameter']) : ?>
                        , <?php echo $element['parameter']; ?>
                    <?php endif; ?>
                    });
                gmap<?php echo $element['id']; ?>_rectangle.setMap(gmap<?php echo $this->map['id']; ?>);
                <?php if($element['markerAction'] == 'INFO') : ?>
                    var gmap<?php echo $element['id']; ?>_infowindow = new google.maps.InfoWindow({
                        position: new google.maps.LatLng(<?php echo $element['windowPosition']; ?>),
                        <?php if ($element['infoWindowAnchor'][0] && $element['infoWindowAnchor'][1]) : ?>
                        pixelOffset: new google.maps.Size(<?php echo $element['infoWindowAnchor'][0].','.$element['infoWindowAnchor'][1]; ?>),
                        <?php endif; ?>
                        content: '<?php echo $element['infoWindow']; ?>'
                        });
                    google.maps.event.addListener(gmap<?php echo $element['id']; ?>_rectangle, 'click', function(event) {
                        gmap<?php echo $element['id']; ?>_infowindow.setPosition(event.latLng);
                        gmap<?php echo $element['id']; ?>_infowindow.open(gmap<?php echo $this->map['id']; ?>);
                        });
                    <?php if($element['popupInfoWindow']) : ?>
                        gmap<?php echo $element['id']; ?>_infowindow.open(gmap<?php echo $this->map['id']; ?>);
                    <?php endif; ?>
                <?php elseif($element['markerAction'] == 'LINK') : ?>
                    google.maps.event.addListener(gmap<?php echo $element['id']; ?>_rectangle, 'click', function() {
                        <?php if($element['target']) : ?>
                        window.open('<?php echo $element['url']; ?>','_blank','resizable=yes,scrollbars=yes,toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes');
                        <?php else :?>
                        window.location.href='<?php echo $element['url']; ?>';
                        <?php endif; ?>
                        });
                <?php endif; ?>
                <?php endif; ?>
                <?php break;
        
            case 
    'CIRCLE' ?>
                <?php if ($element['singleCoords'] && $element['strokeColor'] && $element['strokeOpacity'] && $element['strokeWeight']['value']) : ?>
                var gmap<?php echo $element['id']; ?>_circle = new google.maps.Circle({
                    center: new google.maps.LatLng(<?php echo $element['singleCoords']; ?>)
                    , radius: <?php echo $element['radius']['value']; ?>
                    , strokeColor: "#<?php echo $element['strokeColor']; ?>"
                    , strokeWeight: <?php echo $element['strokeWeight']['value']; ?>
                    , strokeOpacity: <?php echo $element['strokeOpacity']; ?>
                    <?php if($element['fillColor'] && $element['fillOpacity']) : ?>
                        , fillColor: "#<?php echo $element['fillColor']; ?>"
                        , fillOpacity: <?php echo $element['fillOpacity']; ?>
                    <?php endif; ?>
                    <?php if ($element['zIndex']) : ?>
                        , zIndex: <?php echo $element['zIndex']; ?>
                    <?php endif; ?>
                    <?php if ($element['parameter']) : ?>
                        , <?php echo $element['parameter']; ?>
                    <?php endif; ?>
                    });
                gmap<?php echo $element['id']; ?>_circle.setMap(gmap<?php echo $this->map['id']; ?>);
                <?php if($element['markerAction'] == 'INFO') : ?>
                    var gmap<?php echo $element['id']; ?>_infowindow = new google.maps.InfoWindow({
                        position: new google.maps.LatLng(<?php echo $element['singleCoords']; ?>),
                        <?php if ($element['infoWindowAnchor'][0] && $element['infoWindowAnchor'][1]) : ?>
                        pixelOffset: new google.maps.Size(<?php echo $element['infoWindowAnchor'][0].','.$element['infoWindowAnchor'][1]; ?>),
                        <?php endif; ?>
                        content: '<?php echo $element['infoWindow']; ?>'
                        });
                    google.maps.event.addListener(gmap<?php echo $element['id']; ?>_circle, 'click', function(event) {
                        gmap<?php echo $element['id']; ?>_infowindow.setPosition(event.latLng);
                        gmap<?php echo $element['id']; ?>_infowindow.open(gmap<?php echo $this->map['id']; ?>);
                        });
                    <?php if($element['popupInfoWindow']) : ?>
                        gmap<?php echo $element['id']; ?>_infowindow.open(gmap<?php echo $this->map['id']; ?>);
                    <?php endif; ?>
                <?php elseif($element['markerAction'] == 'LINK') : ?>
                    google.maps.event.addListener(gmap<?php echo $element['id']; ?>_circle, 'click', function() {
                        <?php if($element['target']) : ?>
                        window.open('<?php echo $element['url']; ?>','_blank','resizable=yes,scrollbars=yes,toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes');
                        <?php else :?>
                        window.location.href='<?php echo $element['url']; ?>';
                        <?php endif; ?>
                        });
                <?php endif; ?>
                <?php endif; ?>
                <?php break;
        
            case 
    'INFOWINDOW' ?>
                <?php if ($element['singleCoords'] && $element['infoWindow']) : ?>
                var gmap<?php echo $element['id']; ?>_infowindow = new google.maps.InfoWindow({
                    position: new google.maps.LatLng(<?php echo $element['singleCoords']; ?>)
                    , content: '<?php echo $element['infoWindow']; ?>'
                    <?php if ($element['zIndex']) : ?>
                        , zIndex: <?php echo $element['zIndex']; ?>
                    <?php endif; ?>
                    <?php if ($element['parameter']) : ?>
                        , <?php echo $element['parameter']; ?>
                    <?php endif; ?>
                    });
                gmap<?php echo $element['id']; ?>_infowindow.open(gmap<?php echo $this->map['id']; ?>);
                <?php endif; ?>
                <?php break;
        
            case 
    'GROUND_OVERLAY' ?>
                <?php if ($element['bounds'][0] && $element['bounds'][1] && $element['overlaySRC']) : ?>
                var gmap<?php echo $element['id']; ?>_overlay = new google.maps.GroundOverlay(
                    "<?php echo $element['overlaySRC']; ?>"
                    , new google.maps.LatLngBounds(
                        new google.maps.LatLng(<?php echo $element['bounds'][0]; ?>),
                        new google.maps.LatLng(<?php echo $element['bounds'][1]; ?>)
                        )
                    <?php if ($element['parameter']) : ?>
                        , <?php echo $element['parameter']; ?>
                    <?php endif; ?>
                    );
                gmap<?php echo $element['id']; ?>_overlay.setMap(gmap<?php echo $this->map['id']; ?>);
                <?php if($element['markerAction'] == 'INFO') : ?>
                    var gmap<?php echo $element['id']; ?>_infowindow = new google.maps.InfoWindow({
                        position: new google.maps.LatLng(<?php echo $element['bounds'][2]; ?>),
                        <?php if ($element['infoWindowAnchor'][0] && $element['infoWindowAnchor'][1]) : ?>
                        pixelOffset: new google.maps.Size(<?php echo $element['infoWindowAnchor'][0].','.$element['infoWindowAnchor'][1]; ?>),
                        <?php endif; ?>
                        content: '<?php echo $element['infoWindow']; ?>'
                        });
                    google.maps.event.addListener(gmap<?php echo $element['id']; ?>_overlay, 'click', function(event) {
                        gmap<?php echo $element['id']; ?>_infowindow.setPosition(event.latLng);
                        gmap<?php echo $element['id']; ?>_infowindow.open(gmap<?php echo $this->map['id']; ?>);
                        });
                    <?php if($element['popupInfoWindow']) : ?>
                        gmap<?php echo $element['id']; ?>_infowindow.open(gmap<?php echo $this->map['id']; ?>);
                    <?php endif; ?>
                <?php endif; ?>
                <?php endif; ?>
                <?php break;
            endswitch;
        endforeach; 
    ?>

        
        if(window.gmap<?php echo $this->map['id']; ?>_dynmap){
            gmap<?php echo $this->map['id']; ?>_dynmap(gmap<?php echo $this->map['id']; ?>);
        }

    }

    window.setTimeout("gmap<?php echo $this->map['id']; ?>_initialize()", 500);

    /* ]]> */
    </script>

    </div>

    <!-- indexer::continue -->
    Das Ganze ist natürlich vorerst nur eine Pre-Alpha, ungetestet bei anderen Einstellungen.
    Wer will, kann natürlich gerne weitermachen

    Gruß
    dhe

  4. #4
    Contao-Nutzer
    Registriert seit
    05.06.2011.
    Beiträge
    58

    Standard

    ???? - Krass! Ich sehe keinen Stich...

    Was hast Du da jetzt im Template geändert? Sorry, bin leider kein php Programmierer. Ein bischen mehr Erklärung wäre wirklich cool. Geht das, was immer Du geändert hast, auch für das html5 Template?

  5. #5
    Contao-Fan Avatar von dhe
    Registriert seit
    25.10.2010.
    Ort
    Esslingen a.N.
    Beiträge
    657

    Standard

    Die entscheidenen Stellen sind:
    Zeile 60-62
    PHP-Code:
    <?php if ($this->map['parameter']) : ?>
            , <?php echo $this->map['parameter']; ?>
            <?php endif; ?>
    habe ich gelöscht, anstelle dessen habe ich an den Anfang des Scripts folgendes geschrieben:
    PHP-Code:
    var styles; 
    function gmap<?php echo $this->map['id']; ?>_initialize() { 
         
        <?php if ($this->map['parameter']) echo "styles = "$this->map['parameter'] .";"?> 
    // ...
    und Zeile 67 habe ich durch folgendes ersetzt.
    PHP-Code:
     var gmap<?php echo $this->map['id']; ?> = new google.maps.Map(document.getElementById("dlh_googlemap_<?php echo $this->map['id']; ?>"), gmap<?php echo $this->map['id']; ?>_Options); 
         
        var styledMapOptions = { 
            name: "<?php echo $this->map['title']?>
        } 

        var styledMapType = new google.maps.StyledMapType(styles, styledMapOptions); 
        gmap<?php echo $this->map['id']; ?>.mapTypes.set('<?php echo $this->map['title']?>', styledMapType); 
        gmap<?php echo $this->map['id']; ?>.setMapTypeId('<?php echo $this->map['title']?>');
    Das ganze kannst du auch analog mit dem html5 Template machen.

    Gruß
    dhe

  6. #6
    Contao-Nutzer
    Registriert seit
    05.06.2011.
    Beiträge
    58

    Standard

    Danke - das werde ich demnächst mal ausprobieren.

  7. #7
    snoop360
    Gast

    Standard Parameterübergabe funtioniert nicht

    Hi,
    der Eintrag ist zwar schon etwas älter, aber ich habe nichts neueres zu diesem Thema gefunden.

    Ich habe nach oben beschriebener Anleitung versucht eine GoogleMaps-Karte, die über die Extension dlh_googlemaps v1.1.2 stable in Contao eingebunden wurde, einzufärben, leider ohne Erfolg.
    Ich habe wie beschrieben das Template angepasst und den JSON-Code des Google Maps API v3 Styled Maps in das Feld 'Ergänzende Parameter' eingetragen. Sowohl bei der Karte als auch beim Kartenelement.

    Nach dem Einfügen der Parameter verschwindet die Karte aus dem Frontend.

    Weiß jemand Rat oder gibt es mittlerweile einen anderen Weg GoogleMaps-Karten die über die Erweiterung dlh_googlemaps in Contao eingebunden werden einzufärben?

  8. #8
    Contao-Urgestein
    Registriert seit
    30.01.2011.
    Ort
    Stuttgart
    Beiträge
    4.138

    Standard

    @snoop360

    das deutet darauf hin das im Code irgenetwas schief läuft....

    alternativ läßt sich das auch über eine extra Datei im Ordner templates wie folgt steuern:
    Bsp.: gm_color.php
    PHP-Code:
    <script type="text/javascript">
    function 
    gmap1_dynmap(gmap1) {

        
    // ändert die Strassenfarbe
        
    var Styles = [
          {
              
    featureType"all",
              
    stylers: [
                { 
    saturation: -80 }
              ]
          },
          {
              
    featureType"road.local",
              
    stylers: [
                { 
    hue"#1900ff" },
                { 
    saturation40 }
               ]
              }
          ];
        
    gmap1.setOptions({stylesStyles});
    }
    </script> 
    Wichtig ist das die gmapNUMMER der Karte entspricht.

    Das Element dann im Artikel als HTML Element mit {{file::gm_color.php}} einbinden.

  9. #9
    snoop360
    Gast

    Standard so klappts

    Hallo magicsepp,

    herzlichen Dank für Deinen Beitrag, so klapp es wunderbar.

  10. #10
    Contao-Fan Avatar von dhe
    Registriert seit
    25.10.2010.
    Ort
    Esslingen a.N.
    Beiträge
    657

    Standard UPDATE: Hintergrundfarbe Länder

    So wie es aussieht, hat Google seine API verändert. Hat außer mir noch jemand das Problem, dass Grundfarbe der Länder nun grau ist?
    Google färbt das über eine eigene Javascript Aktion ein; und zwar per Background-Color in dem Eltern<div> der Google Maps Karte
    HTML-Code:
    <div class="dlh_googlemap" id="dlh_googlemap_7" style="width: 936px; height: 720px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" >
    Ändert man den Wert für dieses Element per CSS, wird die Karte nicht mehr geladen, bzw. die Hintergrundfarbe wird nur am Anfang kurz vor dem Darstellen der Karte sichtbar.

    Sobald ich was rausgefunden habe, melde ich mich.

    Gruß
    dhe
    PS: was natürlich nicht heißen soll, dass jemand anderes auch auf die Lösung kommen kann/soll/darf/muss :P

  11. #11
    snoop360
    Gast

    Standard UPDATE: Hintergrundfarbe Länder

    Hi dhe,

    bei meiner eingefärbten Karte, die mit der Erweiterung dlh_googlemap eingebunden ist, kann ich die Hintergrundfarbe anpassen, ohne das Probleme entstehen. Ich habe in meiner CSS-Datei folgendes stehen:

    HTML-Code:
    #dlh_googlemap_1 {
    	background:transparent !important;
    }
    Ich habe es auch mit einer Farbe anstelle von transparent versucht, geht auch. Getestet habe ich es gerade jedoch nur im Firefox 13.
    Bei Dir müsste selbstverständlich #dlh_googlemap_7 stehen.

    Grüße snoop

    P.S. Ich habe die Karte wie unter #8 beschrieben eingefärbt.

  12. #12
    Contao-Urgestein
    Registriert seit
    30.01.2011.
    Ort
    Stuttgart
    Beiträge
    4.138

    Standard

    @dhe

    ich vermute ein geändertes template mit inline styles kommt da zum tragen. height etc werden aus den google maps Einträge generiert wie soll da google einen Zugriff haben?

  13. #13
    Contao-Fan Avatar von dhe
    Registriert seit
    25.10.2010.
    Ort
    Esslingen a.N.
    Beiträge
    657

    Standard

    @snoop360
    Das probiere ich mal. Gebe dann Feedback

    @magicsepp
    ein Teil des Inline-Styles kommt ja schon einmal vom Template selbst
    PHP-Code:
    <div class="dlh_googlemap block" id="dlh_googlemap_<?php echo $this->map['id']; ?>" style="width:<?php echo $this->map['mapSize'][0].$this->map['mapSize'][2]; ?>;height:<?php echo $this->map['mapSize'][1].$this->map['mapSize'][2]; ?>;">
    Wie Google das macht? Via JavaScript. Stichwort DOM-Manipulation.

  14. #14
    Contao-Urgestein
    Registriert seit
    30.01.2011.
    Ort
    Stuttgart
    Beiträge
    4.138

    Standard

    wenn es google wäre müsste es immer so sein nur bei mir sieht das so aus:
    PHP-Code:
    <div class="dlh_googlemap block" id="dlh_googlemap_7" style="width:560px;height:500px;"
    es fehlen:
    PHP-Code:
    positionrelativebackground-colorrgb(229227223); overflowhidden;

  15. #15
    Contao-Nutzer Avatar von art-instinct
    Registriert seit
    12.04.2012.
    Ort
    Hannover/Leipzig
    Beiträge
    175

    Standard

    Zitat Zitat von snoop360 Beitrag anzeigen
    Hi dhe,

    bei meiner eingefärbten Karte, die mit der Erweiterung dlh_googlemap eingebunden ist, kann ich die Hintergrundfarbe anpassen, ohne das Probleme entstehen. Ich habe in meiner CSS-Datei folgendes stehen:

    HTML-Code:
    #dlh_googlemap_1 {
    	background:transparent !important;
    }
    Ich habe es auch mit einer Farbe anstelle von transparent versucht, geht auch. Getestet habe ich es gerade jedoch nur im Firefox 13.
    Bei Dir müsste selbstverständlich #dlh_googlemap_7 stehen.

    Grüße snoop

    P.S. Ich habe die Karte wie unter #8 beschrieben eingefärbt.
    Kann ich bestätigen, desweiteren habe ich getestet:
    Chrome: läuft
    IE9: läuft
    Opera: läuft, wenn "background:transparent !important;" im header als <style>-Element eingebunden ist. In der externen CSS-Datei klappt es nicht.

  16. #16
    Contao-Nutzer Avatar von bytehead
    Registriert seit
    03.08.2009.
    Ort
    Luzern, Schweiz
    Beiträge
    105
    Partner-ID
    7707

    Multimedia Gestylte Maps in V2.0.7

    Ich habe in Version 2.0.7 meine Karte auf Schwarz/Weiss angepasst:

    Beim Feld "Ergänzende Parameter im Kartenoptionsblock":
    Code:
    mapTypeControlOptions: {
    	mapTypeIds: [
        	google.maps.MapTypeId.ROADMAP, 'blacknwhite',
        ]
    }
    Beim Feld "Ergänzende Deklarationen":
    Code:
    var styles = [
    	{
    		featureType: "all",
    		stylers: [
            	{ "saturation": -100 },
            	{ "lightness": -8 },
            	{ "gamma": 1.18 }
          	]
        }
    ];
    
    var styledMapOptions = {};
    
    var styledMapType = new google.maps.StyledMapType(styles, styledMapOptions);
    
    gmap1.mapTypes.set('blacknwhite', styledMapType);
    gmap1.setMapTypeId('blacknwhite');
    Wichtig hierbei:
    Der Name des styledMapTypes (hier nenne ich meinen mapStyleType blacknwhite):
    Code:
    google.maps.MapTypeId.ROADMAP, 'blacknwhite'
    ...
    gmap1.mapTypes.set('blacknwhite', styledMapType);
    gmap1.setMapTypeId('blacknwhite');
    und die generierte Variable der Map:
    Code:
    gmap1
    1up AG » Ihr Realisationspartner für Projekte und Erweiterungen mit Contao und Symfony!

  17. #17
    Contao-Urgestein
    Registriert seit
    30.01.2011.
    Ort
    Stuttgart
    Beiträge
    4.138

    Standard

    das ganze geht auch mit
    PHP-Code:
    styles: [{    featureType'all',  stylers: [{saturation: -100},{gamma0.50}  ]}  ] 
    unter "Ergänzende Parameter im Kartenoptionsblock", da brauchts nicht soviel drumrum

  18. #18
    Contao-Nutzer
    Registriert seit
    06.10.2009.
    Beiträge
    161

    Standard

    Zitat Zitat von magicsepp Beitrag anzeigen
    das ganze geht auch mit
    PHP-Code:
    styles: [{    featureType'all',  stylers: [{saturation: -100},{gamma0.50}  ]}  ] 
    unter "Ergänzende Parameter im Kartenoptionsblock", da brauchts nicht soviel drumrum
    MAGICsepp, you made my day!!! :-)

  19. #19
    Contao-Fan
    Registriert seit
    04.03.2010.
    Beiträge
    367

    Standard

    PHP-Code:
    styles: [{    featureType'all',  stylers: [{saturation: -100},{gamma0.50}  ]}  ] 
    Funktioniert unter der Kartenansicht "Karte" einwandfrei. Wechsle ich jedoch auf "Sattellit", wird die Karte wieder farbig dargestellt.
    Gibt es da eine Möglichkeit diese Ansicht auch einzugrauen?

    Gandalf

  20. #20
    Contao-Nutzer
    Registriert seit
    18.06.2013.
    Beiträge
    24

    Standard

    Zitat Zitat von bytehead Beitrag anzeigen
    Ich habe in Version 2.0.7 meine Karte auf Schwarz/Weiss angepasst:
    und die generierte Variable der Map:
    Code:
    gmap1
    Wie bekommst du das als Variable? PHP ist ja im Feld "Ergänzende Deklarationen" nicht möglich.

    Zitat Zitat von magicsepp Beitrag anzeigen
    das ganze geht auch mit
    PHP-Code:
    styles: [{    featureType'all',  stylers: [{saturation: -100},{gamma0.50}  ]}  ] 
    unter "Ergänzende Parameter im Kartenoptionsblock", da brauchts nicht soviel drumrum
    Super, es wird ja immer einfacher

  21. #21
    Contao-Urgestein
    Registriert seit
    30.01.2011.
    Ort
    Stuttgart
    Beiträge
    4.138

    Standard

    gmap<ID> wird für meine Ergänzende Deklaration garnicht benötigt. Diese Variable legt im Code fest welche Karte gemeint ist.

  22. #22
    Contao-Nutzer
    Registriert seit
    18.06.2013.
    Beiträge
    24

    Standard

    Ok, schade, ich bräuchte sie nämlich in meiner.

  23. #23
    Contao-Nutzer
    Registriert seit
    12.11.2013.
    Beiträge
    17

    Standard

    Hallo zusammen,
    bei mir klappt es leider noch nicht. Wo im Artikel soll ich denn dann das HTML Element mit {{file::gm_color.php}} einbinden @magicsepp? Die Datei habe ich ganz normal als .php Datei in dem templates Ornder hochgeladen. Habe auch versucht das Template "mod_dlh_googlemaps_default.html5" entsprechend anzupassen jedoch ohne Erfolg. Vielleicht liegt es daran dass sich der Quellcode(klassen etc) geändert haben von der Googlemap Extension? Für jede Hilfe wäre ich dankbar.

  24. #24
    Contao-Nutzer
    Registriert seit
    28.05.2011.
    Beiträge
    169

    Standard

    Evtl. kann das hier jemand gebrauchen.
    http://software.stadtwerk.org/google_maps_colorizr/

  25. #25
    Alter Contao-Hase Avatar von kischd
    Registriert seit
    25.06.2009.
    Ort
    Karlsruhe
    Beiträge
    1.106

    Standard

    Wie kann ich einen zweiten Parameter setzen??

    Code:
    styles: [{    featureType: 'all',  stylers: [{saturation: -100},{gamma: 0.50}  ]},
    styles: [{    featureType: 'administrative.locality', elementType: 'all', stylers: [{saturation: 0},{lightness: 79},{visibility: 'off'}  ]}  ]
    jeweils einzeln funktionieren diese.
    Hab auch schon

    Code:
    styles: [{    featureType: 'all',  stylers: [{saturation: -100},{gamma: 0.50}  ]},
              [{    featureType: 'administrative.locality', elementType: 'all', stylers: [{saturation: 0},{lightness: 79},{visibility: 'off'}  ]}  ]
    ausprobiert. Danach ist die Karte wieder verschwunden
    Gruß Mark

  26. #26
    Alter Contao-Hase Avatar von kischd
    Registriert seit
    25.06.2009.
    Ort
    Karlsruhe
    Beiträge
    1.106

    Standard

    Hab doch noch die Lösung gefunden ;-)

    Code:
    styles: [{    featureType: 'all',  stylers: [{saturation: -100},{gamma: 0.70}  ]} ,
             {    featureType: 'administrative.locality', elementType: 'all', stylers: [{saturation: 0},{lightness: 79},{visibility: 'off'}  ]}  ]
    Gruß Mark

  27. #27
    Contao-Nutzer
    Registriert seit
    22.06.2009.
    Beiträge
    156

    Standard

    Gilt das auch für Contao 4.9? Irgendwie ändern sich die Farben nicht.

    Gesendet von meinem SM-N950F mit Tapatalk

  28. #28
    Contao-Urgestein
    Registriert seit
    30.01.2011.
    Ort
    Stuttgart
    Beiträge
    4.138

    Standard

    ohne zusätlich Informationen ist das äußerst schwierig?

  29. #29
    Contao-Nutzer
    Registriert seit
    22.06.2009.
    Beiträge
    156

    Standard

    Das stimmt, habe es auch inzwischen geschafft, hatte einen Tippfehler drin. Hänge jetzt noch an den Farben fest, mit {hue: #ff0000} funzt es nicht.

    Gesendet von meinem SM-N950F mit Tapatalk

  30. #30
    Contao-Urgestein
    Registriert seit
    30.01.2011.
    Ort
    Stuttgart
    Beiträge
    4.138

    Standard

    { hue: '#ff0000' } // Apostroph vergessen?

  31. #31
    Contao-Nutzer
    Registriert seit
    22.06.2009.
    Beiträge
    156

    Standard

    Jepp, das wars. Jetzt funzen auch die Farben. Vielen Dank [emoji3]

    Gesendet von meinem SM-N950F mit Tapatalk

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •