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.
129 lines
4.0 KiB
129 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=AIzaSyCw3k52G2nMAOcCNKroFjKH0w0JgOHiwh8&callback=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> |