HTML5 PyroCMS Example - HighwayofLife/PyroStreams-Geocoder-Field-Type GitHub Wiki

First ensure your theme is HTML5 by checking the Doctype. HTML5 themes use: <!DOCTYPE html>.

PyroCMS Page Editor

To use in a single PyroCMS page, go to source (don't use a WYSIWYG editor) and enter something like the following example, which uses our example stream "people" with 2 fields: name and location.

{{ streams:cycle stream="people" }}
<h2>{{ name }}</h2>
<div class="map-canvas" data-lat="{{ location:lat }}" data-lng="{{ location:lng }}" id="map_canvas_{{ count }}"></div>
{{ /streams:cycle }}

In this example, we're using the HTML5 data attributes to set latitude and longitude.

PyroCMS Page Editor - Script

Next, either in the "Script" portion of the page editor, or in a page source, add the following (if using in the script field, drop the <script ...> declaration:

<script type="text/javascript">
function initialize() {
    $('.map-canvas').each(function() {
        var id = this,
            canvas = $(this),
            latlng = new google.maps.LatLng(canvas.data('lat'), canvas.data('lng')),
            mapOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(id, mapOptions);
        
        var marker = new google.maps.Marker({
            position: latlng,
            title:"Hello World!"
        });

        // To add the marker to the map, call setMap();
        marker.setMap(map);
    });
}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
  document.body.appendChild(script);
}

$(document).ready(function() {
    loadScript();
});
</script>

We're loading the Google Maps API script asynchronously and run the callback function initialize() when it loads. When the DOM loads, we call loadScript. You could also do this using jQuery's .load() function. In our example, the marker on the map will display "Hello World" as a tooltip when you mouseover.

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️