REX 5 :: Google Maps

redaxo-google-map-readme.txt

Benötigt: Jquery

Installation: 
Modul anlegen
CSS und Javascript im Frontend einbinden einbinden. 


Unter KLXMSTYLE ist ein individueller Kartenstil hinterlegt. 
Einen eigenen könnt Ihr unter http://googlemapscolorizr.stadtwerk.org selbst erstellen. 

Es handelt sich hierbei um eine Lösung, die auf http://stackoverflow.com/questions/4074520/how-to-display-multiple-google-maps-per-page-with-api-v3  beruht. 

redaxo-google-map.css

.map_canvas { display:block; position:relative; width: 100%; height: 340px;}
.maphide {display: none;} 

redaxo-google-map_input.php

<?php
/*
 *=============================================
 * REDAXO-Modul:  maps!  
 * Bereich: Eingabe
 * Version: 2.0
 * Stand: 14.04.2016
 * Redaxo Version: 5.x
 * Basiert auf: 
   http://stackoverflow.com/questions/4074520/how-to-display-multiple-google-maps-per-page-with-api-v3
 *============================================= 
*/
?>



<div class="form-horizontal">
	
	        <div class="form-group">
	            <label class="col-sm-5 control-label">Titel / Firma</label>
	            <div class="col-sm-7">
	            <input type="text" name="REX_INPUT_VALUE[1]" value="REX_VALUE[1]" placeholder="Firmenbezeichnung" class="form-control"  />
	            </div>
	        </div>
	
	
	<div class="form-group">
	            <label class="col-sm-5 control-label">Andresse</label>
	            <div class="col-sm-7">
	            <input type="text" name="REX_INPUT_VALUE[2]" value="REX_VALUE[2]" placeholder="Adresse" class="form-control"  />
	            </div>
	        </div>
	
	<div class="form-group">
	            <label class="col-sm-5 control-label">Stadt</label>
	            <div class="col-sm-7">
	            <input type="text" name="REX_INPUT_VALUE[3]" value="REX_VALUE[3]" placeholder="Adresse" class="form-control"  />
	            </div>
	        </div>
	
	
	<div class="form-group">
	            <label class="col-sm-5 control-label">Staat / Bundesland </label>
	            <div class="col-sm-7">
	            <input type="text" name="REX_INPUT_VALUE[4]" value="REX_VALUE[4]" placeholder="" class="form-control"  />
	            </div>
	        </div>
	
	<div class="form-group">
	            <label class="col-sm-5 control-label">Postleitzahl / Postcode</label>
	            <div class="col-sm-7">
	            <input type="text" name="REX_INPUT_VALUE[5]" value="REX_VALUE[5]" placeholder="PLZ" class="form-control"  />
	            </div>
	        </div>
	

      
  <div class="form-group">
	            <label class="col-sm-5 control-label">Land</label>
	            <div class="col-sm-7">
	            <select class="form-control"  name="REX_INPUT_VALUE[6]">
          <?php
			foreach (array('DE','CH','AT','UK','USA','SI','PL', 'LI', 'NL', 'IT','CA') as $value) {
				echo '<option value="'.$value.'" ';
	
				if ("REX_VALUE[6]" == "$value") {
					echo 'selected="selected" ';
				}
				echo '>'.$value.'</option>';
			}
			?>
 </select>
	            </div>
	        </div>

  
  <div class="form-group">
	            <label class="col-sm-5 control-label">Telefon</label>
	            <div class="col-sm-7">
	            <input type="text" name="REX_INPUT_VALUE[7]" value="REX_VALUE[7]" placeholder="(0000) 00000-0" class="form-control"  />
	            </div>
	        </div>
	
  
   <div class="form-group">
	            <label class="col-sm-5 control-label">Zoom</label>
	            <div class="col-sm-7">
	             <select class="form-control" name="REX_INPUT_VALUE[8]">
          <?php
			foreach (array(8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19) as $value) {
				echo '<option value="'.$value.'" ';
	
				if ("REX_VALUE[8]" == "$value") {
					echo 'selected="selected" ';
				}
				echo '>'.$value.'</option>';
			}
			?>
 </select>
	            </div>
	        </div>

  
  
  <div class="form-group">
	            <label class="col-sm-5 control-label">Kartentyp</label>
	            <div class="col-sm-7">
	            <select class="form-control" name="REX_INPUT_VALUE[9]">
         <?php
			foreach (array(ROADMAP, HYBRID, SATELLITE, TERRAIN) as $value) {
				echo '<option value="'.$value.'" ';
	
				if ( "REX_VALUE[9]"=="$value" ) {
					echo 'selected="selected" ';
				}
				echo '>'.$value.'</option>';
			}
			?>
        </select>	            </div>
	        </div>
  

redaxo-google-map_js.js

/*
JQUERY GOOGLE-MAPS-PARSER WITH CUSTOM MAP-STYLE
Umsetzung für REDAXO: KLXM Crossmedia GmbH
*/


if ($(".map_canvas").length)
{ 
   
    $maps = jQuery('.map_canvas');
    $maps.each(function(index, Element) {
        $infotext = $(Element).children('.infotext');

klxmStyle=[{featureType:'poi',elementType:'geometry',stylers:[{hue:'#FFDEBE'},{saturation:100},{lightness:42},{visibility:'on'}]},{featureType:'poi.business',elementType:'geometry',stylers:[{hue:'#DCBBAE'},{saturation:29},{lightness:-9},{visibility:'on'}]},{featureType:'water',elementType:'all',stylers:[]},{featureType:'landscape.natural',elementType:'geometry',stylers:[{hue:'#A6CCA2'},{saturation:17},{lightness:-24},{visibility:'on'}]},{featureType:'road.local',elementType:'geometry',stylers:[{hue:'#ffffff'},{saturation:-100},{lightness:100},{visibility:'on'}]},{featureType:'road',elementType:'geometry',stylers:[{hue:'#FFFFCC'},{saturation:100},{lightness:72},{visibility:'on'}]},{featureType:'water',elementType:'all',stylers:[]},{featureType:'poi.park',elementType:'geometry',stylers:[{hue:'#A6CCA2'},{saturation:-32},{lightness:-8},{visibility:'on'}]}];

var pinkMapType = new google.maps.StyledMapType(klxmStyle,
    {name: "KLXM Style"});

      Smaptypex = $infotext.children('.maptype').text();

        var myOptions = {
            'zoom': parseInt($infotext.children('.zoom').text()),
             'styles': klxmStyle,

            'mapTypeId': google.maps.MapTypeId[Smaptypex]
        };
        var map;
        var geocoder;
        var marker;
        
        
        
        
        
        
        
        var infowindow;
        var address = $infotext.children('.address').text() + ', '
                + $infotext.children('.city').text() + ', '
                + $infotext.children('.state').text() + ' '
                + $infotext.children('.zip').text() + ', '
                + $infotext.children('.country').text()
        ;
        
        
        
        var mcontent = '<strong>' + $infotext.children('.location').text() + '</strong><br />'
                + $infotext.children('.address').text() + '<br />'
                 + $infotext.children('.zip').text() + ', '
                + $infotext.children('.city').text() + ', '
                + $infotext.children('.state').text()                 
        ;
        if (0 < $infotext.children('.phone').text().length) {
            mcontent += '<br />' + $infotext.children('.phone').text();
        }

        geocoder = new google.maps.Geocoder();
        geocoder.geocode({'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                myOptions.center = results[0].geometry.location;
                map = new google.maps.Map(Element, myOptions);
                marker = new google.maps.Marker({
                    map: map,
                    icon: '/lib/buttons/punkt.png',
                    position: results[0].geometry.location,
                    title: $infotext.children('.location').text()
                });
                infowindow = new google.maps.InfoWindow({'content': mcontent});
                google.maps.event.addListener(map, 'tilesloaded', function(event) {
                    infowindow.open(map, marker);
                });
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                });
            } else {
                alert('Die Adresse konnte aus folgenden Gründen nicht gefunden werden: ' + status);
            }
        });
    });
}

redaxo-google-map_output.php

<div class="maphide map_canvas">
            <div class="infotext">
                <div class="location">REX_VALUE[1]</div>
                <div class="address">REX_VALUE[2]</div>
                <div class="city">REX_VALUE[3]</div>
                <div class="statem">REX_VALUE[4]</div>
                <div class="zip">REX_VALUE[5]</div>
                <div class="country">REX_VALUE[6]</div>
                <div class="phone">REX_VALUE[7]</div>
                <div class="zoom">REX_VALUE[8]</div>
<div class="maptype">REX_VALUE[9]</div>
            </div>
        </div>