Skip to content

Instantly share code, notes, and snippets.

@gebeer
Created Oct 27, 2014
Embed
What would you like to do?
Modified index.php for [seb_map template](http://www.seblod.com/products/51) to allow autozoom to map markers
<?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>
@anjoclaudio
Copy link

anjoclaudio commented Jul 12, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment