

<!-- local_vflibs/googlemapframe -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>

<script type="text/javascript" src="{{protocol}}://maps.googleapis.com/maps/api/js?key={{googleapikey}}&callback=initialize"></script>

<script type="text/javascript">

    function initialize() {
        var latlng = new google.maps.LatLng({{lat}}, {{lng}});
        var myOptions = '{{{optionsstr}}}';
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        map.setOptions({styles: administrative});
        for (i = 0; i < mks ; i++) {
            marker[i].setMap(map);
        }
    }

    {{#markerimages}}
    var image{{classname}} = new google.maps.MarkerImage("{{{imfullpath}}}",
                                new google.maps.Size({{{sizeinfo0}}}, {{{sizeinfo1}}}),
                                new google.maps.Point(0, 0),
                                new google.maps.Point(10, {{{sizeinfo1}}}));
    {{/markerimages}}
    {{#shadowimages}}
    var shadow{{classname}} = new google.maps.MarkerImage("{{{imfullpath}}}",
                                new google.maps.Size({{{sizeinfo0}}}, {{{sizeinfo1}}}),
                                new google.maps.Point(0, 0),
                                new google.maps.Point(10, {{{sizeinfo1}}}));
    {{/shadowimages}}

    var latlngmarks = new Array();
    var marker = new Array();
    var mks = 0;

    {{#markers}}
    latlngmarks[mks] = new google.maps.LatLng({{lat}}, {{lng}});
    marker[mks] = new google.maps.Marker({
           position: latlngmarks[mks],
           title:"{{title}}",
           {{#hasshadow}}
           shadow:shadow{{markerclass}},
           {{/hasshadow}}
           icon:image{{markerclass}}
    });
    mks++;
    {{/markers}}

    var administrative = [{
        featureType: "all",
        stylers: [{
            saturation: -40
        }]
    },{
        featureType: "administrative",
        stylers: [{ hue: "#1300FF" },
            { saturation: 80 }]
    },{
        featureType: "road.highway",
        stylers: [{ gamma: "4.0" }]
    },{
        featureType: "road.local",
        stylers: [{ visibility: "off" }]
    },{
        featureType: "road.arterial",
        stylers: [{ gamma: "5.0" }]
    },{
        featureType: "poi",
        stylers: [{ visibility: "off" }]
    },{
        featureType: "transit",
        stylers: [{ visibility: "off" }]
    },{
        featureType: "landscape.natural",
        stylers: [{ visibility: "off" }]
    },{
        featureType: "landscape.man_made",
        stylers: [{ hue: "#FF4000" },
            { saturation: 80 }]
    },{
        featureType: "administrative.country",
        stylers: [{ hue: "#1300FF" },
            { saturation: 80 }]
    },{
        featureType: "administrative.province",
        stylers: [{ hue: "#00B9FF" },
            { saturation: 70 }]
    }];
</script>
</head>
<body onload="initialize()">
{{^googleapikey}}
{{#str}}missinggooglekey, local_vflibs{{/str}}
{{/googleapikey}}
{{#googleapikey}}
  <div id="map_canvas" style="width:100%; height:100%"></div>
{{/googleapikey}}
</body>
</html>
<!-- /local_vflibs/googlemapframe -->

