<?php
if($instance['map_options'] =='api'){
	// Get settings
	$id     = 'ob-map-canvas-' . md5( $instance['map_center'] ) . '';
	$height = $instance['height'] . 'px';
	$data   = 'data-address="' . $instance['map_center'] . '" ';
	$data .= 'data-zoom="' . $instance['zoom'] . '" ';
	$data .= 'data-scroll-zoom="' . $instance['scroll_zoom'] . '" ';
	$data .= 'data-draggable="' . $instance['draggable'] . '" ';
	$data .= 'data-marker-at-center="' . $instance['marker_at_center'] . '" ';
	$data .= 'data-style="' . $instance['map_style'] . '" ';
	$data .= 'data-api_key="' . $instance['api_key'] . '" ';

	$icon_attachment = wp_get_attachment_image_src( $instance['marker_icon'] );
	$icon            = $icon_attachment ? $icon_attachment[0] : '';

	$data .= 'data-marker-icon="' . $icon . '" ';

	$cover_attachment = wp_get_attachment_image_src( $instance['map_cover_image'], 'full' );
	$cover            = $cover_attachment ? $cover_attachment[0] : '';

	$class = 'ob-google-map-canvas';

	$html = '<div class="thim-sc-googlemap" style="height: ' . $height . ';" data-cover="' . $instance['map_cover'] . '">';
	if ( $instance['map_cover'] ) {
		$html .= '<div class="map-cover" style="height: ' . $height . '; background-image: url(' . $cover . ');"></div>';
	}
	$html .= '<div class="' . $class . '" style="height: ' . $height . ';" id="' . $id . '" ' . $data . ' ></div>';
	$html .= '</div>';

	echo ent2ncr($html);
}else{
	if(!empty($instance['height'])){
		$height  = $instance['height'];
	}else{
		$height = 500;
	}
	if(!empty($instance['zoom'])){
		$zoom  = $instance['zoom'];
	}else{
		$zoom = 10;
	}
	$style_height = ' style ="height: ' . $height . 'px"' ;
  	printf(
		'<div class="thim-map-iframe"' . $style_height . '><iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=%1$s&amp;t=m&amp;z=%2$d&amp;output=embed&amp;iwloc=near" title="%3$s" aria-label="%3$s"></iframe></div>',
		rawurlencode( $instance['map_center'] ),
		absint( $zoom ),
		esc_attr( $instance['map_center'] )
	);
}