google-maps-template.html

<div id="<%- id %>" style="
            height: <%- height %>;
            width: <%- width %>;
            margin: 0px;
            padding: 0px
            ">
</div>
<style>.gmnoprint img {max-width: none !important;}</style>
<script defer="defer">
  window.hexoGmaps = window.hexoGmaps || { maps: {}};
  window.hexoGmaps.maps['init<%- id %>'] = function init() {
    var mapOptions = {
       'scrollwheel': <%- scrollwheel %>,
       'zoom': <%- zoom %>,
       'center': new window.google.maps.LatLng( <%- center.latitude %> , <%- center.longitude %> ),
     },
     target = document.getElementById('<%- id %>'),
     map = new window.google.maps.Map(target, mapOptions);
      
   <% _.each(markers, function(marker, i){%>  
     
     var opts<%- i %> = {
        'position': new window.google.maps.LatLng( <%- marker.latitude %> , <%- marker.longitude %> ),
        'map': map,
        'title': '<%- marker.name %>',
        'zIndex' : <%- i %>,
        'icon': '<%- marker.icon %>'
      };

     var infowindow<%- i %> = new window.google.maps.InfoWindow({
       content: '<%- marker.name %>'
     });

     var marker<%- i %> = new window.google.maps.Marker(opts<%- i %>);

     marker<%- i %>.addListener('click', function(){
       infowindow<%- i %>.open(map, marker<%- i %>)
     })
   <%}) %>

  }
  function makeMaps() {
    for (var map in window.hexoGmaps.maps) {
       console.log('map #', map);
       window.hexoGmaps.maps[map]();
    }
  }
  function loadScript() {
    window.hexoGmaps.googleScriptLoaded = true;
    var script = document.createElement('script');
    script.type = 'text/javascript';
        script.src = '//maps.googleapis.com/maps/api/js?v=3.exp&callback=makeMaps&key=<%- apikey %>';
    document.body.appendChild(script);
  }
  if (!window.hexoGmaps.googleScriptLoaded) {
    loadScript();
  }
</script>