module-gmap/gmap/templates/admin_gmap_markers.tpl

<style type="text/css"> 
            
            #myMap{ldelim}width: 650px; height: 400px;margin:20px;{rdelim}
			.deleteButton input{ldelim}line-height:normal;{rdelim}
			.pagination {ldelim}margin-left:20px;margin-bottom:30px;{rdelim}
            #myMapList{ldelim}float: left; text-align:left; width: 250px;  height:400px; overflow-x:hidden; overflow-y:scroll; {rdelim}
            .clear {ldelim}float: none; clear:both;{rdelim}
        </style>
<div class="title"><h5>{#ModName#}</h5></div>

<div class="widget" style="margin-top: 0px;">
    <div class="body">
		{#AddMarkers#}
    </div>
</div>


<div class="breadCrumbHolder module">
	<div class="breadCrumb module">
	    <ul>
	        <li class="firstB"><a href="index.php" title="{#MAIN_PAGE#}">{#MAIN_PAGE#}</a></li>
	        <li><a href="index.php?do=modules&amp;cp={$sess}">{#MODULES_SUB_TITLE#}</a></li>
	        <li><a href="index.php?do=modules&action=modedit&mod=gmap&moduleaction=1&cp={$sess}">{#ModName#}</a></li>
	        <li>{#MarkerView#}</li>
	        <li><strong class="code">{$gmap_title}</strong></li>
	    </ul>
	</div>
</div>

<div class="widget first">
<div class="head">
<h5 class="iFrames">{#Gmap_edi_mark#} {$gmap_title}</h5>
</div>
<table cellpadding="0" cellspacing="0" width="100%" class="tableStatic mainForm">
		<col width="250">
		<col>
        <thead>
		<tr>
			<td>{#MarkerParam#}</td>
			<td>{#MarkerSetVal#}</td>
		</tr>
        </thead>
		<tr>
			<td>{#MarkerAdress#}</td>
			<td>
				<input class="mousetrap" name="address" title="{#MarkerAdress#}" type="text" id="marker_address" value="" size="40" style="width:500px"/>
				<input name="latitude" type="hidden" id="lat" value=""/>
				<input name="longitude" type="hidden" id="long" value=""/>
			</td>
		</tr>
		<tr>
			<td>{#MarkerDesc#}</td>
			<td>
				<textarea class="mousetrap" placeholder="{#MarkerDesc#}" name="title" cols="40" rows="5" id="marker_title" style="width:500px"></textarea>
			</td>
		</tr>
		<tr>
			<td>{#MarkerImage#}</td>
			<td>
				{foreach from=$pins item=pin}
				<input type="radio" name="image" value="{$pin.name}"><label style="cursor: pointer;"><img src="{$pin.path}" height="27"/></label>
				{/foreach}
				
			</td>
		</tr>
		<tr>
    			<td colspan="2">
    				<input type="button" onclick="newMarker();" value="{#AddMarkerButton#}" class="basicBtn"/>&nbsp;&nbsp;
    				<a href="index.php?do=modules&action=modedit&mod=gmap&moduleaction=1&cp={$sess}" class="btn greenBtn"/>{#Gmap_return#}</a>
    			</td>
    		</tr>
</table>
<div class="rowElem">
	<table cellpadding="0" cellspacing="0" width="100%" class="tableStatic mainForm">
		<col width="250">
		<col>
		<tr>
			<td>{#SetMarkerOnClick#}</td>
			<td><input type="checkbox" name="put" value="1" id="put"></td>
		</tr>	
	</table>
	<div id="myMap"></div>
</div>
{if $page_nav}
	<div class="pagination">
	<ul class="pages">
		{$page_nav}
	</ul>
	</div>
{/if}
<div class="mainForm">
<table cellpadding="0" cellspacing="0" width="100%" class="tableStatic" id="mlist">
		<col width="20">
		<col width="20">
		<col width="20">
		<col width="">
		<col width="20">
        <thead>
		<tr>
			<td align="center"></td>
			<td align="center">ID</td>
            <td>{#MarkerImage#}</td>
			<td>{#MarkerTitle#}</td>
            <td align="center"></td>
		</tr>
        </thead>
		<tbody>
		{foreach from=$markers item=marker}
			<tr id="marker-{$marker.id}">
				<td valign="top">
					<input class="btn redBtn" type="button" onclick="DeleteMarker({$marker.id});" value="{#Delete#}" />
				</td>
				<td valign="top">
					{$marker.id}
				</td>
				<td valign="top">
					<div class="pr12"><a onclick="showMarker({$marker.id});"><img src="/modules/gmap/images/{$marker.image}.png" /></a></div>
				</td>
				<td valign="top">
					<div class="pr12"><input placeholder="{#MarkerDesc#}" name="marker_title[{$marker.id}]" type="text" id="marker_title-{$marker.id}" value="{$marker.title|escape}"></div>
				</td>
				<td valign="top">
					<input class="btn basicBtn" type="button" onclick="SaveMarker({$marker.id});" value="{#Save#}" />
				</td>
			</tr>
		{/foreach}
		</tbody>
	</table>
</div>
</div>
{if $page_nav}
	<div class="pagination">
	<ul class="pages">
		{$page_nav}
	</ul>
	</div>
{/if}	

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={$api_key}&amp;libraries=places"></script> 
<script language="Javascript" type="text/javascript">
function searchAdress() {ldelim}
		var input = document.getElementById('marker_address');
		var autocomplete = new google.maps.places.Autocomplete(input);
		google.maps.event.addListener(autocomplete, 'place_changed', function () {ldelim}
			var place = autocomplete.getPlace();

			var lat = place.geometry.location.lat();
			var lon = place.geometry.location.lng();

			document.getElementById('lat').value = lat;
			document.getElementById('long').value = lon;
		{rdelim});
	{rdelim}
google.maps.event.addDomListener(window, 'load', searchAdress);	

$(document).ready(function(){ldelim}
	loadMap();
{rdelim});
</script>
<script language="Javascript" type="text/javascript"> 
        
            
            // set default map properties
            var defaultLatlng = new google.maps.LatLng({$gmap.latitude},{$gmap.longitude});
            
            // zoom level of the map		
            var defaultZoom ={$gmap.gmap_zoom};
            
            // variable for map
            var map;
            
            // variable for marker info window
            var infowindow;
         
            // List with all marker to check if exist
            var markerList = [];
         
            // set error handler for jQuery AJAX requests
            $.ajaxSetup({ldelim}"error":function(XMLHttpRequest,textStatus, errorThrown) {ldelim}  
                alert(textStatus + ' / ' + errorThrown + ' / ' + XMLHttpRequest.responseText);
            {rdelim}{rdelim});
        
            // option for google map object
            var myOptions = {ldelim}
                zoom: defaultZoom,
                center: defaultLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            {rdelim};
        
        
            /**
             * Load Map
             */
            function loadMap(){ldelim}
        
                console.log('loadMap');

                // create new map make sure a DIV with id myMap exist on page
                map = new google.maps.Map(document.getElementById("myMap"), myOptions);
        
                // create new info window for marker detail pop-up
                infowindow = new google.maps.InfoWindow();
                
                // load markers
                loadMarkers();
				
				google.maps.event.addListener(map, 'click', function (e) {ldelim}

				//Determine the location where the user has clicked.
				var location = e.latLng;
				var clLatitude = e.latLng.lat();
				var clLongitude = e.latLng.lng();
				
				if($('input[name=image]').is(':checked')) {ldelim}
					climage = $('input[name=image]:checked').val();
				{rdelim} else {ldelim}
					climage = 'pin-green';
					
				{rdelim}
				
				$('#put').change(function() {ldelim}
					if (this.checked){ldelim}
						add_marker = true;
			{rdelim} else {ldelim}
						add_marker = false;

					{rdelim}
				// do stuff here. It will fire on any checkbox change

				{rdelim}); 
				
				if (add_marker) {ldelim}
				var markerData = {ldelim}
                            'latitude': clLatitude,
                            'gmap_id': {$gmap_id},
                            'longitude': clLongitude,
                            'image': climage,
                            'title': '',
                        {rdelim};
         
                        // save new marker request to server
                        $.ajax({ldelim}
                            type: 'POST',			
                            url: 'index.php?do=modules&action=modedit&mod=gmap&moduleaction=addmarker&id={$gmap_id}&cp={$sess}',
                            data: {ldelim}
                                marker: markerData
                            {rdelim},
                            dataType: 'json',
                            async: false,
                            success: function(result){ldelim}
                            $.jGrowl("{#Gmap_sv_mark1#}", {ldelim}
			                header: '{#Gmap_sv_mark#}',
			                theme: 'accept'
			                {rdelim});                            
                                var marker_id =result['id'];
								AddTr(marker_id, climage,'');
								// add marker to map
                                loadMarker(result);
                                                        
                                // show marker detail
                                showMarker(marker_id);

                                $('#newMarker').removeClass('error');

                                
                            {rdelim}
                        {rdelim});
						{rdelim}
			{rdelim}); 
            {rdelim}
			
			/**
             * Adds new marker to list
             */
			 
			
			
            function newMarker(){ldelim}
         
                // get new city name
                var markerAddress = $('#newMarker').val();

                if( markerAddress == "" ){ldelim}
                    $('#newMarker').addClass('error');
                    $('#newMarker').attr('placeholder','missing location');
                    return false;
                {rdelim}
				
				if($('input[name=image]').is(':checked')) {ldelim}
					image = $('input[name=image]:checked').val();
				{rdelim} else {ldelim}
					$('#newMarker').addClass('error');
                    $('#newMarker').attr('placeholder','not selected marker image');
					return false;
				{rdelim}
				
				var latitude = $('#lat').val();
				var longitude = $('#long').val();
				var marker_title = $('#marker_title').val();
         
                // check response status
                if (latitude !='' && longitude !='') {ldelim}			
						var markerData = {ldelim}
                            'latitude': latitude,
                            'gmap_id': {$gmap_id},
                            'longitude': longitude,
                            'image': image,
                            'title': marker_title,
                        {rdelim};
         
                        // save new marker request to server
                        $.ajax({ldelim}
                            type: 'POST',			
                            url: 'index.php?do=modules&action=modedit&mod=gmap&moduleaction=addmarker&id={$gmap_id}&cp={$sess}',
                            data: {ldelim}
                                marker: markerData
                            {rdelim},
                            dataType: 'json',
                            async: false,
                            success: function(result){ldelim}
                            $.jGrowl("{#Gmap_sv_mark1#}", {ldelim}
			                header: '{#Gmap_sv_mark#}',
			                theme: 'accept'
			                {rdelim});
                                var marker_id =result['id'];
								AddTr(marker_id, image,marker_title);
								// add marker to map
                                loadMarker(result);
                                                        
                                // show marker detail
                                showMarker(marker_id);

                                $('#newMarker').removeClass('error');

                                
                            {rdelim}
                        {rdelim});
                    //add marker to list
						    
                    {rdelim}else {ldelim}
                        alert("Marker not found : Заполните поле адрес");
                    {rdelim};
            {rdelim}
			
			function SaveMarker(id){ldelim}
				var title = $('#marker_title-'+id).val();
				$.ajax({ldelim}
                            type: 'POST',			
                            url: 'index.php?do=modules&action=modedit&mod=gmap&moduleaction=savemarker&id='+id+'&cp={$sess}',
                            data: {ldelim}
                                marker_title: title
                            {rdelim},
                            dataType: 'json',
                            async: false,
                            success: function(){ldelim}
                             $.jGrowl("{#Gmap_sv_mark2#}", {ldelim}
			                header: '{#Gmap_sv_mark#}',
			                theme: 'accept'
			                {rdelim});                           
                                showMarker(id);
                            {rdelim}
                        {rdelim});
			{rdelim}
         
			function AddTr(marker_id, image,marker_title){ldelim}
					html = '<tr id="marker-'+marker_id+'">';
					html += '<td valign="top"><input class="btn redBtn" type="button" onclick="DeleteMarker('+marker_id+');" value="{#Delete#}" /></td>';
					html += '<td valign="top">'+marker_id+'</td>';
					html += '<td valign="top"><div class="pr12"><a onclick="showMarker('+marker_id+');"><img src="/modules/gmap/images/'+image+'.png" /></a></div></td>';
					html += '<td valign="top"><div class="pr12"><input placeholder="{#MarkerDesc#}" name="marker_title['+marker_id+']" type="text" id="marker_title-'+marker_id+'" value="'+marker_title+'"></div></td>';
					html += '<td valign="top"><input class="btn basicBtn" type="button" onclick="SaveMarker('+marker_id+');" value="{#Save#}" /></td>';
					html += '</tr>';
						
					$('#mlist tbody').prepend(html);  
			
			{rdelim}
			/**
             * Load markers via ajax request from server
             */
			function loadMarkers(){ldelim}
				var lmarkers = {$load_markers};	
                // load marker jSon data		
                
                    
                // loop all the markers
                $.each(lmarkers, function(i,item){ldelim}
                        
                    // add marker to map
                    loadMarker(item);	
        
                {rdelim});
                
            {rdelim}
			
			
			/**
             * Load marker to map
             */
            function loadMarker(markerData){ldelim}
            
                // create new marker location
                var myLatlng = new google.maps.LatLng(markerData['latitude'],markerData['longitude']);
        
                // create new marker				
                var image = '/modules/gmap/images/'+markerData['image']+'.png';
				
				var content = markerData['title'];
                content += "<p class='deleteButton'><input class='btn redBtn' type = 'button' value = '{#Delete#}' onclick = 'DeleteMarker(" + markerData['id'] + ");' /></p>";
				
				var marker = new google.maps.Marker({ldelim}
                    id: markerData['id'],
                    map: map, 
                    title: content,
					icon:image,
                    position: myLatlng
                {rdelim});
        
                // add marker to list used later to get content and additional marker information
                markerList[marker.id] = marker;
        
                // add event listener when marker is clicked
                // currently the marker data contain a dataurl field this can of course be done different
                google.maps.event.addListener(marker, 'click', function() {ldelim}
                    
                    // show marker when clicked
                    showMarker(marker.id);
        
                {rdelim});
        
				              
            {rdelim}
        
           
            /**
             * Show marker info window
             */
            function showMarker(markerId){ldelim}
                
                // get marker information from marker list
                var marker = markerList[markerId];
                
                // check if marker was found
                if( marker ){ldelim}
					marker_url = 'index.php?do=modules&action=modedit&mod=gmap&moduleaction=getmarker&id='+markerId+'&cp={$sess}';
                    // get marker detail information from server
                    $.get(marker_url, function(data) {ldelim}
                        // show marker window
						content = "<p>ID:" +markerId+ "</p>"+data+"<p class='deleteButton'><input class='btn redBtn' type = 'button' value = '{#Delete#}' onclick = 'DeleteMarker(" +markerId+ ");' value = 'Delete' /></p>";
                        infowindow.setContent(content);
                        infowindow.open(map,marker);
                    {rdelim});	
					
                {rdelim}else{ldelim}
                    alert('Error marker not found: ' + markerId);
                {rdelim}
            {rdelim}
			
			function DeleteMarker(id) {ldelim}
                             $.jGrowl("{#Gmap_sv_mark3#}", {ldelim}
			                header: '{#Gmap_sv_mark#}',
			                //theme: 'error'
			                {rdelim});			
				//Find and remove the marker from the Array
				markerList[id].setMap(null);
				//Remove the marker from array.
				delete markerList[id];
				
				del_url = 'index.php?do=modules&action=modedit&mod=gmap&moduleaction=delmarker&id='+id+'&cp={$sess}';
                // get marker detail information from server
                $('#marker-' + id).remove();
				$.get(del_url);	
				return;
			{rdelim};
            
</script>