Created
October 27, 2014 12:42
-
-
Save gebeer/0a040b7cd6f4f4e86967 to your computer and use it in GitHub Desktop.
Modified index.php for [seb_map template](http://www.seblod.com/products/51) to allow autozoom to map markers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * @version SEBLOD 3.x More ~ $Id: index.php sebastienheraud $ | |
| * @package SEBLOD (App Builder & CCK) // SEBLOD nano (Form Builder) | |
| * @url http://www.seblod.com | |
| * @editor Octopoos - www.octopoos.com | |
| * @copyright Copyright (C) 2013 SEBLOD. All Rights Reserved. | |
| * @license GNU General Public License version 2 or later; see _LICENSE.php | |
| **/ | |
| defined( '_JEXEC' ) or die; | |
| require_once dirname(__FILE__).'/config.php'; | |
| $cck = CCK_Rendering::getInstance( $this->template ); | |
| if ( $cck->initialize() === false ) { return; } | |
| $class = ( $cck->id_class ) ? ' class="'.trim( $cck->id_class ).'"' : ''; | |
| $map_id = 'map_canvas'; //todo + map_iw_event | |
| $map_width = $cck->getStyleParam( 'map_width', '600px' ); | |
| $map_height = $cck->getStyleParam( 'map_height', '375px' ); | |
| $map_lang = substr( JFactory::getLanguage()->getTag(), 0, 2 ); | |
| $map_mk_icon = $cck->getStyleParam( 'map_marker_icon', 'red-dot.png' ); | |
| $map_mk_icon_base = 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/'; | |
| if ( $map_mk_icon == '-1' ) { | |
| $map_mk_icon = $cck->getStyleParam( 'map_marker_icon_custom', '' ); | |
| $map_mk_icon_base = JURI::root( true ).'/'; | |
| } | |
| $map_mk_icon_path = $cck->getStyleParam( 'map_marker_icon_dynamicpath', '' ); | |
| if ( !$map_mk_icon_path ) { | |
| $map_mk_icon_path = addslashes( 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/' ); | |
| } elseif ( strpos( $map_mk_icon_path, 'http' ) === false ) { | |
| $map_mk_icon_path = addslashes( JURI::root( true ).'/'.$map_mk_icon_path ); | |
| } | |
| $map_mk_animation = $cck->getStyleParam( 'map_marker_init_animation', '' ); | |
| $map_mk_animation = $map_mk_animation ? $map_mk_animation : '""'; | |
| $map_mk_timeout = $cck->getStyleParam( 'map_marker_init_timeout', 0 ); | |
| $map_mk_timeoutms = $cck->getStyleParam( 'map_marker_init_timeoutms', '200' ); | |
| $map_iw_event = $cck->getStyleParam( 'map_infowindow_openevent', 'click' ); | |
| $items = $cck->getItems(); | |
| $js = ''; | |
| $markers = ''; | |
| $function = 'setMarker'; | |
| $infowindow = $cck->getFields( 'infowindow', '', false ); | |
| $locations = $cck->getFields( 'location', '', false ); | |
| $multiple = ( count( $infowindow ) > 1 ) ? true : false; | |
| $f_icon = ''; | |
| if ( $cck->getStyleParam( 'map_marker_icon_dynamic', 0 ) ) { | |
| $f_icon = $cck->getFields( 'markericon', '', false ); | |
| $f_icon = isset( $f_icon[0] ) ? $f_icon[0] : ''; | |
| } | |
| if ( count( $items ) ) { | |
| if ( count( $locations ) ) { | |
| $js = 'var geocoder = new google.maps.Geocoder();'; | |
| $markers = ''; | |
| $function = 'setMarkerByGeolocation'; | |
| foreach ( $items as $i=>$item ) { | |
| $html = ''; | |
| $location = ''; | |
| $icon = ''; | |
| if ( $f_icon ) { | |
| $icon = $item->getValue( $f_icon ); | |
| $icon = $icon ? $map_mk_icon_path.$icon : $icon; | |
| } | |
| foreach ( $locations as $loc ) { | |
| $location .= $item->getValue( $loc ).' '; | |
| } | |
| foreach ( $infowindow as $iw ) { | |
| $content = $item->renderField( $iw ); | |
| if ( $content != '' && ( $multiple || $item->getMarkup_Class( $iw ) ) ) { | |
| $html .= '<div class="cck-clrfix'.$item->getMarkup_Class( $iw ).'">'.$content.'</div>'; | |
| } else { | |
| $html .= $content; | |
| } | |
| } | |
| $html = addslashes( $html ); | |
| $markers .= '["'.$html.'", "'.$icon.'", "'.trim( $location ).'"],'; | |
| } | |
| $markers = substr( $markers, 0, -1 ); | |
| } else { | |
| $function = 'setMarker'; | |
| $latitude = $cck->getFields( 'latitude', '', false ); | |
| $f_latitude = $latitude[0]; | |
| $longitude = $cck->getFields( 'longitude', '', false ); | |
| $f_longitude = $longitude[0]; | |
| $markers = ''; | |
| foreach ( $items as $i=>$item ) { | |
| $html = ''; | |
| $lat = $item->getValue( $f_latitude ); | |
| $lat = ( $lat != '' ) ? $lat : 0; | |
| $lng = $item->getValue( $f_longitude ); | |
| $lng = ( $lng != '' ) ? $lng : 0; | |
| $icon = ''; | |
| if ( $f_icon ) { | |
| $icon = $item->getValue( $f_icon ); | |
| $icon = $icon ? $map_mk_icon_path.$icon : $icon; | |
| } | |
| foreach ( $infowindow as $iw ) { | |
| $content = $item->renderField( $iw ); | |
| if ( $content != '' && ( $multiple || $item->getMarkup_Class( $iw ) ) ) { | |
| $html .= '<div style="line-height:1.35;overflow:hidden;white-space:nowrap;">'.$content.'</div>'; | |
| } else { | |
| $html .= $content; | |
| } | |
| } | |
| $html = addslashes( $html ); | |
| $markers .= '["'.$html.'", "'.$icon.'", '.$lat.', '.$lng.'],'; | |
| } | |
| $markers = substr( $markers, 0, -1 ); | |
| } | |
| } | |
| if ( count( $items ) == 1) : //if map has only one marker, center map to marker position | |
| $centercode = 'center: new google.maps.LatLng('.$lat.', '.$lng.')'; | |
| $fitmybounds = ''; | |
| else: // if multiple markers extend map boundary to show all markers | |
| $centercode = 'center: new google.maps.LatLng('.$cck->getStyleParam( 'map_lat', '48.856614' ).', '.$cck->getStyleParam( 'map_lng', '2.3522219000000177' ).')'; | |
| $fitmybounds = 'map.fitBounds(bounds);'; | |
| endif; | |
| $js .= ' | |
| var infowindow = new google.maps.InfoWindow({}); | |
| var iterator = 0; | |
| var iterator2 = 0; | |
| var marker = null; | |
| function initMap_'.$map_id.'() { | |
| var myOptions = {' . | |
| $centercode . ', | |
| mapTypeControl: '.$cck->getStyleParam( 'map_typecontrol', 'true' ).', | |
| mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.'.$cck->getStyleParam( 'map_typecontrolstyle', 'DEFAULT' ).'}, | |
| mapTypeId: google.maps.MapTypeId.'.$cck->getStyleParam( 'map_typeid', 'ROADMAP' ).', | |
| panControl: '.$cck->getStyleParam( 'map_pancontrol', 'true' ).', | |
| streetViewControl: '.$cck->getStyleParam( 'map_streetviewcontrol', 'true' ).', | |
| zoomControl: '.$cck->getStyleParam( 'map_zoomcontrol', 'true' ).', | |
| zoomControlOptions: {style: google.maps.ZoomControlStyle.'.$cck->getStyleParam( 'map_zoomcontrolstyle', 'DEFAULT' ).'}, | |
| zoom: '.$cck->getStyleParam( 'map_zoom', 2 ).' | |
| }; | |
| var bounds = new google.maps.LatLngBounds(); | |
| var map = new google.maps.Map(document.getElementById("'.$map_id.'"),myOptions); | |
| var markers = ['.$markers.']; | |
| var icon = "'.$map_mk_icon_base.$map_mk_icon.'"; | |
| var animation = {"anim":'.$map_mk_animation.',"timeout":'.$map_mk_timeout.',"timeoutms":"'.$map_mk_timeoutms.'"}; | |
| var fct = "'.$function.'"; | |
| setMarkers(fct, map, markers, icon, animation,bounds);'.$fitmybounds.'} | |
| function setMarkers(fct, map, markers, icon, animation,bounds) { | |
| var anim = animation.anim ? animation.anim : null; | |
| if (animation.timeout == 1) { | |
| for (var i = 0; i < markers.length; i++) { setTimeout(function() { this[fct](map, markers, icon, anim, bounds); }, i * animation.timeoutms); } | |
| } else { | |
| for (var i = 0; i < markers.length; i++) { | |
| this[fct](map, markers, icon, anim, bounds); | |
| } | |
| } | |
| } | |
| function setMarker(map, markers, icon, anim, bounds) { | |
| if(markers[iterator][1]) { icon = markers[iterator][1]; } | |
| marker = new google.maps.Marker({ map:map, position: new google.maps.LatLng(markers[iterator][2], markers[iterator][3]), mycontent:markers[iterator][0], icon:icon, animation:anim }); | |
| google.maps.event.addListener(marker, "'.$map_iw_event.'", function(){ infowindow.setContent(this.mycontent); infowindow.open(map,this); }); | |
| bounds.extend(marker.position); | |
| iterator++; | |
| } | |
| function setMarkerByGeolocation(map, markers, icon, anim) { | |
| if(markers[iterator][1]) { icon = markers[iterator][1]; } | |
| geocoder.geocode( {"address":markers[iterator][2]}, function(results, status) { | |
| if (status == google.maps.GeocoderStatus.OK) { | |
| marker = new google.maps.Marker({ map:map, position:results[0].geometry.location, mycontent:markers[iterator2][0], icon:icon, animation:anim }); | |
| google.maps.event.addListener(marker, "'.$map_iw_event.'", function(){ infowindow.setContent(this.mycontent); infowindow.open(map,this); }); | |
| } | |
| iterator2++; | |
| }); | |
| iterator++; | |
| } | |
| jQuery(document).ready(function(){ | |
| initMap_'.$map_id.'(); | |
| }); | |
| '; | |
| $doc = JFactory::getDocument(); | |
| $doc->addScript( 'http://maps.googleapis.com/maps/api/js?sensor=false&language='.$map_lang ); | |
| $doc->addScriptDeclaration( $js ); | |
| ?> | |
| <div id="<?php echo $cck->id; ?>"<?php echo $class; ?>> | |
| <div id="<?php echo $map_id; ?>" style="width:<?php echo $map_width; ?>; height:<?php echo $map_height; ?>;"></div> | |
| <?php if ( count( $items ) == 1) : | |
| $daddr = ''; | |
| $daddr .= ($item->getValue( 'sem_ort_street' )) ? $item->getValue( 'sem_ort_street' ) . ', ' : ''; | |
| $daddr .= ($item->getValue( 'sem_ort_plz' )) ? $item->getValue( 'sem_ort_plz' ) . ', ' : ''; | |
| $daddr .= ($item->getValue( 'sem_ort_ort' )) ? $item->getValue( 'sem_ort_ort' ) : ''; | |
| ?> | |
| <?php endif; ?> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for this improvement on the template which made me feel a bit better after buying it. I have a suggestion.
At present the map doesn't zoom in to one marker. Suggestion is to add map.fitBounds(bounds) to 1 marker and later set maxZoom to 15 so that it doesn't zoom in too much. Here's the changes (make sure there is a comma at the end of zoom: '.$cck->getStyleParam( 'map_zoom', 2 ).',
Line 120 change
$fitmybounds = '';
to
$fitmybounds = 'map.fitBounds(bounds);' ;
Line 142 change
zoom: '.$cck->getStyleParam( 'map_zoom', 2 ).'
to
zoom: '.$cck->getStyleParam( 'map_zoom', 2 ).',
maxZoom: 15