module-gmap/gmap/templates/map.tpl

<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}
    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>