Disable Mobile "Dragable" in Google API Maps.

Hi,

Love the theme.

Can you advise how i can disable dragging on mobile for the API google maps?

Thanks,
Adam

Hello,

Thank you for your question.

Yes, it is possible but since there is no such option in Theme Settings you will need to add the following code to your child theme functions.php file

function basel_shortcode_google_map( $atts, $content ) {
	$output = '';
	extract(shortcode_atts( array(
		'title' => '',
		'lat' => 45.9,
		'lon' => 10.9,
		'style_json' => '',
		'zoom' => 15,
		'height' => 400,
		'scroll' => 'no',
		'mask' => '',
		'google_key' => basel_get_opt( 'google_map_api_key' ),
		'el_class' => ''
	), $atts ));

	wp_enqueue_script( 'maplace' );
	wp_enqueue_script( 'google.map.api', 'https://maps.google.com/maps/api/js?libraries=geometry&v=3&key=' . $google_key . '', array(), '', false );

	if( $mask != '' ) {
		$el_class .= ' map-mask-' . $mask;
	}

	$id = rand(100,999);

	ob_start();

	?>		

		<?php if ( ! empty( $content ) ): ?>
			<div class="google-map-container <?php echo esc_attr( $el_class ); ?> google-map-container-with-content">
			
				<div class="basel-google-map-wrapper">
					<div class="basel-google-map with-content google-map-<?php echo esc_attr( $id ); ?>" style="height:<?php echo esc_attr( $height ); ?>px;"></div>
				</div>

				<?php echo do_shortcode( $content ); ?>

			</div>
		<?php else: ?>

			<div class="google-map-container <?php echo esc_attr( $el_class );?> ">
			
				<div class="basel-google-map-wrapper">
					<div class="basel-google-map without-content google-map-<?php echo esc_attr( $id ); ?>" style="height:<?php echo esc_attr( $height ); ?>px;"></div>
				</div>

			</div>

		<?php endif ?>

		<script type="text/javascript">
		
			jQuery(document).ready(function() {

				var isDraggable = jQuery(document).width() > 480 ? true : false;

				new Maplace({
					locations: [
					    {
							lat: <?php echo esc_js( $lat ); ?>,
							lon: <?php echo esc_js( $lon ); ?>,
							title: '<?php echo esc_js( $title ); ?>',
					        <?php if( $title != '' && empty($content) ): ?>html: '<h3 style="min-width:300px; text-align:center; margin:15px;"><?php echo esc_html( $title ); ?></h3>', <?php endif; ?>
					        animation: google.maps.Animation.DROP
					    }
					],
					controls_on_map: false,
					title: '<?php echo esc_js( $title ); ?>',
				    map_div: '.google-map-<?php echo esc_js( $id ); ?>',
				    start: 1,
				    map_options: {
				        zoom: <?php echo esc_js( $zoom ); ?>,
				        draggable: isDraggable,
				        scrollwheel: <?php echo ($scroll == 'yes') ? 'true' : 'false'; ?>
				    },
				    <?php if($style_json != ''): ?>
				    styles: {
				        '<?php _e('Custom style', 'xtemos') ?>': <?php echo rawurldecode( base64_decode($style_json, true) ); ?>
				    }
				    <?php endif; ?>
				}).Load(); 

			});
		</script>
	<?php
	$output = ob_get_contents();
	ob_end_clean();

	return $output;

}

add_shortcode( 'basel_google_map', 'basel_shortcode_google_map' );

Regards

[Author]

Posts