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.
126 lines
3.9 KiB
126 lines
3.9 KiB
8 years ago
|
<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',
|
||
|
|
|
||
|
|
'">',
|
||
|
|
'<\/script>'
|
||
|
|
);
|
||
|
|
{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>
|