And so, I have the maplace.js working on a seperate page but without the markers: here <http://www.thisadmin.co.uk/action/plods/map.php>
original page is now here <http://www.thisadmin.co.uk/action/plods/map1.php> On Thursday, July 28, 2016 at 11:34:28 PM UTC+1, John Biddulph wrote: > > 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.
