<?php
$json = Loader::helper('json');
 
$propertyArray = array();
$allProperties = $pageList->get(9999);
if(count($allProperties) > 0){
    foreach($allProperties as $page){ 
        $propertyID = $page->getCollectionID();
        $title = $th->entities($page->getCollectionName());
        $lat = $page->getAttribute('lat');
        $lng = $page->getAttribute('long');
        $propertyArray[] = array('id' => $propertyID, 'title' => $title, 'lat' => $lat, 'lng' => $lng);
    } 
}
?>
 
<div id="locationsMap" style="width: 100%; height: 400px;"></div>
 
<script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=false"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize"></script>
<script type="text/javascript">
    var position;
    var markers = <?php echo $json->encode($propertyArray); ?>;
    function initialize() {        
        var myLatlng = new google.maps.LatLng(39.867588, -86.187744);
 
        //setup map
        var mapOptions = {
            zoom: 7,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true
        };
        var map = new google.maps.Map(document.getElementById("locationsMap"), mapOptions);
 
        if(markers){
            $.each(markers,function(counter,item){                
                if (item.lat != '' && item.lng != '') {
                    position = new google.maps.LatLng(item.lat,item.lng);
                }
                var marker = new google.maps.Marker({
                    map: map,
                    position: position,
                    title: item.title
                    markerID : item.id
                });
            });
        }
    }
</script>