delete accountdelete accountdelete accountdelete accountdelete accountdelete accountdelete accountdelete accountdelete accountdelete accountdelete accountdelete accountdelete accountdelete accountdelete accountdelete accountdelete accountdelete accountdelete accountdelete accountdelete account
define array of markers first, push every created marker there , call markerclusterer on array. approach worked me once , that's suggested in code froom googlemaps listed:
var markers = []; function create_marker(mappos, maptitle, mapdesc, infoopendefault, dragable, removable, iconpath, mtype) { var marker = new google.maps.marker({ position: mappos, map: map, draggable:dragable, animation: google.maps.animation.drop, icon: iconpath }); markers.push(marker); } run create_marker function (in case after parsing ajax data) , create clusters like
markerclusterer = new markerclusterer(map, markers, { maxzoom: zoom, gridsize: size, styles: styles[style] }); you might want call refreshmap() when using remove_marker() or save_marker() functions update markerclusterer object.
be sure include jquery, google maps api , markerclusterer script. here's complete output codepen:
var infowindows = []; var markers = []; var markerclusterer = null; var map = null; var imageurl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' + 'chco=ffffff,008cff,000000&ext=.png'; var pinicon = "icons/pin_green.png"; var pinicon = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' + 'chco=ffffff,00ff8c,000000&ext=.png'; function refreshmap() { if (markerclusterer) { markerclusterer.clearmarkers(); // markerclusterer.addmarkers(markers,true) markerclusterer.addmarkers(markers) } } function clearclusters(e) { e.preventdefault(); e.stoppropagation(); markerclusterer.clearmarkers(); } //////////custom code var mapcenter = new google.maps.latlng(47.701829, -122.179969); var map; function map_initialize() { var googlemapoptions = { center: mapcenter, // map center zoom: 13, maxzoom: 22, minzoom: 4, zoomcontroloptions: { style: google.maps.zoomcontrolstyle.small, position: google.maps.controlposition.right_top }, maptypeid: google.maps.maptypeid.roadmap, styles: roadmap_styles }; map = new google.maps.map(document.getelementbyid("map"), googlemapoptions); $.get("map_process.php", function(data) { $(data).find("marker").each(function() { var pin_firstname = $(this).attr('pin_firstname'); var pincore_fulladdress = '<p>' + $(this).attr('pincore_fulladdress') + '</p>'; var pin_status = $(this).attr('pin_status'); var point = new google.maps.latlng(parsefloat($(this).attr('pincore_lat')), parsefloat($(this).attr('pincore_lng'))); create_marker(point, pin_firstname, pincore_fulladdress, false, false, false, "icons/pin_blue.png"); }); }); google.maps.event.addlistener(map, 'click', function(event) { var editform = '<p><div class="marker-edit">' + '<form action="ajax-save.php" method="post" name="savemarker" id="savemarker">' + '<label for="ppinstatus"><span>status:</span> <select name="ppinstatus" class="save-type"><option value="sold">sold</option><option value="cancelled">cancelled</option>' + '<option value="house">rejected</option></select></label><br/>' + '<label for="pfullname"><span>customer name:</span><input type="text" name="pfullname" class="save-name" placeholder="enter title" maxlength="40" /></label>' + '<label for="pdesc"><span>address :</span><textarea name="pdesc" class="save-desc" placeholder="enter address" maxlength="150"></textarea></label>' + '</form>' + '</div></p><button name="save-marker" class="save-marker">save marker</button>'; create_marker(event.latlng, 'add new pin', editform, true, true, true, pinicon); }); markerclusterer = new markerclusterer(map, markers, { maxzoom: 15, gridsize: 4, styles: clusterer_styles }); $('#refresh').click(function() { refreshmap() }) $('#clear').click(function() { clearclusters() }) } function create_marker(mappos, maptitle, mapdesc, infoopendefault, dragable, removable, iconpath, mtype) { var marker = new google.maps.marker({ position: mappos, map: map, draggable: dragable, animation: google.maps.animation.drop, icon: iconpath }); markers.push(marker); console.log(markers) refreshmap() var contentstring = $('<div class="marker-info-win">' + '<div class="marker-inner-win"><span class="info-content">' + '<h1 class="marker-heading">' + mtype + '</h1>' + maptitle + mapdesc + '</span><button name="remove-marker" class="remove-marker">remove marker</button>' + '</div></div>'); var infowindow = new google.maps.infowindow(); infowindow.setcontent(contentstring[0]); var removebtn = contentstring.find('button.remove-marker')[0]; var savebtn = contentstring.find('button.save-marker')[0]; google.maps.event.adddomlistener(removebtn, "click", function(event) { remove_marker(marker); }); if (typeof savebtn !== 'undefined') { //add click listner save marker button google.maps.event.adddomlistener(savebtn, "click", function(event) { var mreplace = contentstring.find('span.info-content'); var mname = contentstring.find('input.save-name')[0].value; var mdesc = contentstring.find('textarea.save-desc')[0].value; var mtype = contentstring.find('select.save-type')[0].value; if (mname == '' || mdesc == '') { alert("please enter correct information disposition new pin!"); } else { save_marker(marker, mname, mdesc, mtype, mreplace); } }); } infowindows.push(infowindow) google.maps.event.addlistener(marker, 'click', function() { for (var in infowindows) { infowindows[a].close() } infowindow.open(map, marker); }); if (infoopendefault) { for (var in infowindows) { infowindows[a].close() } infowindow.open(map, marker); } } function remove_marker(marker) { if (marker.getdraggable()) { marker.setmap(null); } else { var mlatlang = marker.getposition().tourlvalue(); var mydata = { del: 'true', latlang: mlatlang }; $.ajax({ type: "post", url: "map_process.php", data: mydata, success: function(data) { marker.setmap(null); alert(data); }, error: function(xhr, ajaxoptions, thrownerror) { alert(thrownerror); } }); } } function save_marker(marker, mname, maddress, mtype, replacewin) { var mlatlang = marker.getposition().tourlvalue(); var mydata = { pin_firstname: mname, pincore_fulladdress: maddress, latlang: mlatlang, pin_status: mtype }; console.log(replacewin); $.ajax({ type: "post", url: "map_process.php", data: mydata, success: function(data) { replacewin.html(data); marker.setdraggable(false); marker.seticon('icons/pin_blue.png'); }, error: function(xhr, ajaxoptions, thrownerror) { alert(thrownerror); } }); } $(document).ready(function() { map_initialize(); }); var clusterer_styles = [ [{ url: imageurl, height: 35, width: 35, anchor: [16, 0], textcolor: '#ff00ff', textsize: 10 }, { url: imageurl, height: 45, width: 45, anchor: [24, 0], textcolor: '#ff0000', textsize: 11 }, { url: imageurl, height: 55, width: 55, anchor: [32, 0], textcolor: '#ffffff', textsize: 12 }], [{ url: imageurl, height: 27, width: 30, anchor: [3, 0], textcolor: '#ff00ff', textsize: 10 }, { url: imageurl, height: 36, width: 40, anchor: [6, 0], textcolor: '#ff0000', textsize: 11 }, { url: imageurl, width: 50, height: 45, anchor: [8, 0], textsize: 12 }], [{ url: imageurl, height: 26, width: 30, anchor: [4, 0], textcolor: '#ff00ff', textsize: 10 }, { url: imageurl, height: 35, width: 40, anchor: [8, 0], textcolor: '#ff0000', textsize: 11 }, { url: imageurl, width: 50, height: 44, anchor: [12, 0], textsize: 12 }] ]; var roadmap_styles = [{ stylers: [{ saturation: -100 }] }, { featuretype: "water", elementtype: "geometry.fill", stylers: [{ color: "#0099dd" }] }, { elementtype: "labels", stylers: [{ visibility: "off" }] }, { featuretype: "poi.park", elementtype: "geometry.fill", stylers: [{ color: "#aadd55" }] }, { featuretype: "road.highway", elementtype: "labels", stylers: [{ visibility: "on" }] }, { featuretype: "road.arterial", elementtype: "labels.text", stylers: [{ visibility: "on" }] }, { featuretype: "road.local", elementtype: "labels.text", stylers: [{ visibility: "on" }] }, {}]#map{ width: 100%; height: 100%; background-color: #aaa; } html, body { height: 100%; } .button { width: 10rem; height: 3rem; background: #b5cdde; color: #fff; text-align: center; position: absolute; bottom: 1rem; right: 3vw; z-index: 50; line-height: 3rem; font-size: 20px; font-family: sans-serif; text-transform: uppercase; box-shadow: 1px 1px 2px #aac; cursor: pointer; border-radius: 3px; border: 2px solid darken(#b5cdde,10%); } .button:hover { background: darken(#b5cdde,10%) } .button:nth-child(2) { right: 13vw; } .marker-edit { width: 10vw; }<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0.2/src/markerclusterer.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <div id='map'></div> <div class='button' id='refresh'> refresh </div> <div class='button' id='clear'> clear </div>
Comments
Post a Comment