Farben der Karte anpassen (via MapTypeStyler)

[herrweiss]

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

[roscov]

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

[dhe]

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:

[
  {
    stylers: [
      { hue: "#ff0000" }
    ]
  }
]

<!-- 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

[gralle]

???? - 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?

[dhe]

Die entscheidenen Stellen sind:
Zeile 60-62

<?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:

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.

 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

[gralle]

Danke - das werde ich demnächst mal ausprobieren.

[snoop360]

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?

[magicsepp]

@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

<script type="text/javascript">
function gmap1_dynmap(gmap1) {

    // ändert die Strassenfarbe
    var Styles = [
      {
          featureType: "all",
          stylers: [
            { saturation: -80 }
          ]
      },
      {
          featureType: "road.local",
          stylers: [
            { hue: "#1900ff" },
            { saturation: 40 }
           ]
          }
      ];
    gmap1.setOptions({styles: Styles});
}
</script> 

Wichtig ist das die gmapNUMMER der Karte entspricht.

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

[snoop360]

Hallo magicsepp,

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

[dhe]

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

<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

[snoop360]

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:

#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.

[magicsepp]

@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?

[dhe]

@snoop360
Das probiere ich mal. Gebe dann Feedback

@magicsepp
ein Teil des Inline-Styles kommt ja schon einmal vom Template selbst

<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.

[magicsepp]

wenn es google wäre müsste es immer so sein nur bei mir sieht das so aus:

<div class="dlh_googlemap block" id="dlh_googlemap_7" style="width:560px;height:500px;"> 

es fehlen:

position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" 

[art-instinct]

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:

#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.

[bytehead]

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

Beim Feld "Ergänzende Parameter im Kartenoptionsblock":

mapTypeControlOptions: {
	mapTypeIds: [
    	google.maps.MapTypeId.ROADMAP, 'blacknwhite',
    ]
}

Beim Feld "Ergänzende Deklarationen":

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):

google.maps.MapTypeId.ROADMAP, 'blacknwhite'
...
gmap1.mapTypes.set('blacknwhite', styledMapType);
gmap1.setMapTypeId('blacknwhite');

und die generierte Variable der Map:

gmap1

[magicsepp]

das ganze geht auch mit

styles: [{    featureType: 'all',  stylers: [{saturation: -100},{gamma: 0.50}  ]}  ] 

unter "Ergänzende Parameter im Kartenoptionsblock", da brauchts nicht soviel drumrum

[amimoto]

das ganze geht auch mit

styles: [{    featureType: 'all',  stylers: [{saturation: -100},{gamma: 0.50}  ]}  ] 

unter "Ergänzende Parameter im Kartenoptionsblock", da brauchts nicht soviel drumrum

MAGICsepp, you made my day!!! :-)

[Gandalf]

styles: [{    featureType: 'all',  stylers: [{saturation: -100},{gamma: 0.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

[StefanSchleich]

Ich habe in Version 2.0.7 meine Karte auf Schwarz/Weiss angepasst:
und die generierte Variable der Map:

gmap1

Wie bekommst du das als Variable? PHP ist ja im Feld "Ergänzende Deklarationen" nicht möglich.

das ganze geht auch mit

styles: [{    featureType: 'all',  stylers: [{saturation: -100},{gamma: 0.50}  ]}  ] 

unter "Ergänzende Parameter im Kartenoptionsblock", da brauchts nicht soviel drumrum

Super, es wird ja immer einfacher

[magicsepp]

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

[StefanSchleich]

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

[Contao1000]

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.

[Yangdoo]

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

[kischd]

Wie kann ich einen zweiten Parameter setzen??

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

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

[kischd]

Hab doch noch die Lösung gefunden ;-)

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

[strich-sieben]

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

Gesendet von meinem SM-N950F mit Tapatalk

[magicsepp]

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

[strich-sieben]

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

[magicsepp]

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

[strich-sieben]

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

Gesendet von meinem SM-N950F mit Tapatalk