You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
475 lines
17 KiB
475 lines
17 KiB
8 years ago
|
<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&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"/>
|
||
|
|
<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="http://maps.google.com/maps/api/js?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>
|