Модуль 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.
 
 
 

133 lines
4.0 KiB

<div id="myMap{$gmap.id}" style="height:{$gmap.gmap_height};{if $gmap.gmap_width}width:{$gmap.gmap_width};{/if}"></div>
<script>
function loadMapsAPI() {ldelim}
if( window.google && google.maps )
return;
document.write(
'<script src="',
'https://maps.googleapis.com/maps/api/js?key=',
'{$api_key}',
'&amp;=initMap',
'">',
'<\/script>'
);
{rdelim}
window.initMap = function(){ldelim}
//фикс ошибки "initMap is not a function"
{rdelim}
loadMapsAPI();
</script>
<script language="Javascript" type="text/javascript">
$(document).ready(function(){ldelim}
loadMap{$gmap.id}();
{rdelim});
</script>
<script language="Javascript" type="text/javascript">
// zoom level of the map
var defaultZoom{$gmap.id} ={$gmap.gmap_zoom};
// variable for map
var map{$gmap.id};
// variable for marker info window
var infowindow{$gmap.id};
// List with all marker to check if exist
var markerList{$gmap.id} = [];
/** Load Map */
function loadMap{$gmap.id}(){ldelim}
console.log('loadMap');
// set default map properties
var defaultLatlng{$gmap.id} = new google.maps.LatLng({$gmap.latitude},{$gmap.longitude});
// option for google map object
var myOptions{$gmap.id} = {ldelim}
zoom: defaultZoom{$gmap.id},
center: defaultLatlng{$gmap.id},
mapTypeId: google.maps.MapTypeId.ROADMAP
{rdelim};
// create new map make sure a DIV with id myMap exist on page
map{$gmap.id} = new google.maps.Map(document.getElementById("myMap{$gmap.id}"), myOptions{$gmap.id});
// create new info window for marker detail pop-up
infowindow{$gmap.id} = new google.maps.InfoWindow();
// load markers
loadMarkers{$gmap.id}();
{rdelim}
/**
* Load markers via ajax request from server
*/
function loadMarkers{$gmap.id}(){ldelim}
var lmarkers{$gmap.id} = {$markers};
// load marker jSon data
// loop all the markers
$.each(lmarkers{$gmap.id}, function(i,item){ldelim}
// add marker to map
loadMarker{$gmap.id}(item);
{rdelim});
{rdelim}
/**
* Load marker to map
*/
function loadMarker{$gmap.id}(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'];
var marker = new google.maps.Marker({ldelim}
id: markerData['id'],
map: map{$gmap.id},
title: content,
icon:image,
position: myLatlng
{rdelim});
// add marker to list used later to get content and additional marker information
markerList{$gmap.id}[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{$gmap.id}(marker.id);
{rdelim});
{rdelim}
/**
* Show marker info window
*/
function showMarker{$gmap.id}(markerId){ldelim}
// get marker information from marker list
var marker = markerList{$gmap.id}[markerId];
// check if marker was found
if( marker ){ldelim}
infowindow{$gmap.id}.setContent(marker.title);
infowindow{$gmap.id}.open(map{$gmap.id},marker);
{rdelim}else{ldelim}
alert('Error marker not found: ' + markerId);
{rdelim}
{rdelim}
</script>