[Google Maps API v3] Circles from maplacejs not showing on my page properly

[John Biddulph]

Hi, on my website here
http://www.thisadmin.co.uk/action/plods/map.php I would like to be able to 
show the editable circle, when I first load the page, I can see it flicker 
on and disappear. 

Here is what I am using (Circles part)
http://maplacejs.com/


and here is my code:
 <script type="text/javascript">
  $( function() {
    $( "#slider-range-max" ).slider({
      range: "max",
      min: 1,
      max: 160934,
      value: 16093,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
      }
    });
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
  } );
  </script>
<script type="text/javascript">
$(document).ready(function() {
$("#results" ).load( "fetch_map_markers.php"); //load initial records
$("#towns" ).load( "fetch_towns.php"); //load initial records

//executes code below when user click on pagination links
$("#results").on( "click", ".pagination a", function (e){
e.preventDefault();
$(".loading-div").show(); //show loading element
var page = $(this).attr("data-page"); //get page number from link
$("#results").load("fetch_pages.php",{"page":page}, function(){ //get 
content from PHP page
$(".loading-div").hide(); //once done, hide loading element
});

});
$('select[name="towns"]').change(function() {
var town = $('select[name="towns"]').val();
$("#results" ).load( "fetch_pages.php?rsTown="+town);
});
});
</script>
<script>

    function initialize() {
        var map;
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
            mapTypeId: "roadmap",
            center: new google.maps.LatLng(52.791331, -1.918728), // 
somewhere in the uk BEWARE center is required
            zoom: 14,
        };

        // Display a map on the page
        map = new google.maps.Map(document.getElementById("map"), 
mapOptions);
        map.setTilt(45);

        // Multiple Markers
        var markers = <?php echo json_encode( $markers ); ?>;

        // Display multiple markers on a map
        var infoWindow = new google.maps.InfoWindow();
        var marker, i;
        
        // Loop through our array of markers & place each one on the map
        for (i = 0; i < markers.length; i++) {
            var position = new google.maps.LatLng(markers[i][1], 
markers[i][2]);
            bounds.extend(position);
            marker = new google.maps.Marker({
                position: position,
                map: map,
                title: markers[i][0]
            });

            // Allow each marker to have an info window
            google.maps.event.addListener(marker, 'click', (function 
(marker, i) {
                return function () {
                    infoWindow.setContent(markers[i][0]);
                    infoWindow.open(map, marker);
                }
            })(marker, i));

            // Automatically center the map fitting all markers on the 
screen
            map.fitBounds(bounds);
        }

        // Create marker
        var marker = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(50.8849691, -0.2123609),
          title: 'South Downs Plod start'
        });

        // Add circle overlay and bind to marker
        //var circle = new google.maps.Circle({
        //  map: map,
        //  radius: 16093,    // 10 miles in metres
        //  fillColor: '#AA0000'
        //});
        //circle.bindTo('center', marker, 'position');

        var Circle = [
    {
        lat: 51.51328,
        lon: -0.09021,
        circle_options: {
            radius: 160,
            editable: true
        },
        title: 'Editable circle',
        html: 'Change my size',
        visible: false,
        draggable: true
    }
];

        new Maplace({
            locations: Circle,
            map_div: '#map',
            start: 4,
            view_all_text: 'Points of interest',
            type: 'circle',
            shared: {
                zoom: 16,
                html: '%index'
            },
            circleRadiusChanged: function(index, point, marker) {
                $('#radiusInfo').text(
                    ' - point #' + (index+1) + ' size: ' + 
parseInt(marker.getRadius()) + 'mt.'
                );
            }
        }).Load();

        //Override our map zoom level once our fitBounds function runs 
(Make sure it only runs once)
        var boundsListener = google.maps.event.addListener((map), 
'bounds_changed', function (event) {
            this.setZoom(7);
            google.maps.event.removeListener(boundsListener);
        });

        

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



</script>


-- 
You received this message because you are subscribed to the Google Groups 
"Google Maps JavaScript API v3" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-maps-js-api-v3+unsubscr...@googlegroups.com.
To post to this group, send email to google-maps-js-api-v3@googlegroups.com.
Visit this group at https://groups.google.com/group/google-maps-js-api-v3.
For more options, visit https://groups.google.com/d/optout.