Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I would just like to add the following Google Map stylers to my WP maps, but a little lost on where to include in the .twig

Here are the stylers:

[
 {
"stylers": [
  { "saturation": -100 },
  { "gamma": 0.96 }
   ]
  }
]

And my map .twig:

{% if wp.get_post_meta(post.ID, '_property_latitude').0 and wp.get_post_meta(post.ID, '_property_longitude').0%}
<h2>{{ wp.__('Map', 'aviators') }}</h2>

<div id="property-map"></div>

<script type="text/javascript">
    jQuery(document).ready(function($) {
        function LoadMapProperty() {
            var locations = new Array(
                [{{ wp.get_post_meta(post.ID, '_property_latitude').0 }}, {{ wp.get_post_meta(post.ID, '_property_longitude').0 }}]
            );
            var types = new Array(
                '{{ wp.wp_get_object_terms(post.ID, 'property_types').0.slug }}'
            );
            var markers = new Array();
            var plainMarkers = new Array();

            var mapOptions = {
                center: new google.maps.LatLng({{ wp.get_post_meta(post.ID, '_property_latitude').0 }}, {{ wp.get_post_meta(post.ID, '_property_longitude').0 }}),
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false
            };

            var map = new google.maps.Map(document.getElementById('property-map'), mapOptions);

            $.each(locations, function(index, location) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(location[0], location[1]),
                    map: map,
                    icon: '{{ wp.get_template_directory_uri() }}/assets/img/marker-transparent.png'
                });

                var myOptions = {
                    draggable: true,
                    content: '<div class="marker ' + types[index] + '"><div class="marker-inner"></div></div>',
                    disableAutoPan: true,
                    pixelOffset: new google.maps.Size(-21, -58),
                    position: new google.maps.LatLng(location[0], location[1]),
                    closeBoxURL: "",
                    isHidden: false,
                    // pane: "mapPane",
                    enableEventPropagation: true
                };
                marker.marker = new InfoBox(myOptions);
                marker.marker.isHidden = false;
                marker.marker.open(map, marker);
                markers.push(marker);
            });

            google.maps.event.addListener(map, 'zoom_changed', function() {
                $.each(markers, function(index, marker) {
                    marker.infobox.close();
                });
            });
        }

        google.maps.event.addDomListener(window, 'load', LoadMapProperty);

        var dragFlag = false;
        var start = 0, end = 0;

        function thisTouchStart(e) {
            dragFlag = true;
            start = e.touches[0].pageY;
        }

        function thisTouchEnd() {
            dragFlag = false;
        }

        function thisTouchMove(e) {
            if ( !dragFlag ) return;
            end = e.touches[0].pageY;
            window.scrollBy( 0,( start - end ) );
        }

        document.getElementById("property-map").addEventListener("touchstart", thisTouchStart, true);
        document.getElementById("property-map").addEventListener("touchend", thisTouchEnd, true);
        document.getElementById("property-map").addEventListener("touchmove", thisTouchMove, true);
    });

</script>

{% endif %}

Help?

share|improve this question
1  
So how is this on topic? It's twig, which is a templating engine not implemented by PHP. –  kaiser Aug 18 '13 at 19:00
    
A lot of developers are now using .twigs in Wordpress. I'll close however, given your comment. –  cunningfox Aug 19 '13 at 18:18
    
Please, adding an edit isn't needed. There will be close votes if people got that opinion. If you want to bring it on topic, simply rework your question so it can be answered. Off topic: Could you point to some themes using the Twig templating engine? –  kaiser Aug 19 '13 at 18:24
add comment

Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.