Модуль Google-map v1.26.1.4b
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

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&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}
8 years ago
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCw3k52G2nMAOcCNKroFjKH0w0JgOHiwh8&libraries=places"></script>
8 years ago
<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>