javascript - GoogleMap error cause by markercluster -
hi guys i'm having problem don't understand why , have tried google error got doesn't help. seems markercluster causing problem did try in other application works fine. have tried delete
var markercluster = new markerclusterer(map, markers); but got error
uncaught typeerror: cannot read property '__e3_' of undefined
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=aizasycwdpcih080dnctyc-uprmlon2mt2bmsuk&sensor=true"></script> <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script> <script type="text/javascript" src="findout.js"></script> findout.js
var markers = []; var places =array(); function createtooltip(marker, key) { //create tooltip var tooltipoptions={ marker:marker, content:places[key].tooltip_html, cssclass:'tooltip' // name of css class apply tooltip }; var tooltip = new tooltip(tooltipoptions); } function refresh(){ setinterval(function(){ loadmarker(); },5000); }; function initialize() { var initiallocation; var northpole = new google.maps.latlng(90, 105); var kl = new google.maps.latlng(3.1597,101.7000); var browsersupportflag = new boolean(); var map; var marker; var mapoptions; var mapdiv = document.getelementbyid("map_canvas"); if(places.length){ mapoptions = { center: new google.maps.latlng(3.1597,101.7000), maxzoom:21, zoom: 17, disabledefaultui: true, maptypeid: google.maps.maptypeid.roadmap, maptypecontrol: true, maptypecontroloptions: { style: google.maps.maptypecontrolstyle.dropdown_menu, position: google.maps.controlposition.top_left } }; map = new google.maps.map(mapdiv,mapoptions ); (var key in places){ (function(myplace){ if (myplace) { if(myplace.icon_html !== ''){ var icon = { url:myplace.icon_html, origin:new google.maps.point(0,0), anchor:new google.maps.point(8,41) }; var shadow={ url:"image/shadow.png", origin: new google.maps.point(0,0), anchor:new google.maps.point(8,41) }; }else{ var icon = { url:"image/default.png", origin:new google.maps.point(0,0), anchor:new google.maps.point(8,41) }; var shadow={ url:"image/shadow.png", origin: new google.maps.point(0,0), anchor:new google.maps.point(8,41) }; } var marker = new google.maps.marker({ map: map, shadow:shadow, url:myplace.url_html, icon:icon, position: new google.maps.latlng(myplace.position.lat, myplace.position.lng) }); markers.push(marker); createtooltip(marker, key); google.maps.event.addlistener(marker, 'click', function() { marker.setanimation(google.maps.animation.bounce); settimeout(function() {marker.setanimation(null);}, 2000); opennewbackgroundtab(marker.url); }); function opennewbackgroundtab(url){ var = document.createelement("a"); a.href = url; var evt = document.createevent("mouseevents"); //the tenth parameter of initmouseevent sets ctrl key evt.initmouseevent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null); a.dispatchevent(evt); } } })(places[key]); } } var markercluster = new markerclusterer(map, markers); // try w3c geolocation (preferred) if(navigator.geolocation) { browsersupportflag = true; navigator.geolocation.getcurrentposition(function(position) { initiallocation = new google.maps.latlng(position.coords.latitude,position.coords.longitude); var marker = new google.maps.marker({ position:initiallocation, icon:'image/user.png', title:'you here !' }); $('#findout').on('shown', function (e) { google.maps.event.trigger(map, 'resize'); marker.setmap(map); map.setcenter(initiallocation); }); }, function() { handlenogeolocation(browsersupportflag); }); } // browser doesn't support geolocation else { browsersupportflag = false; handlenogeolocation(browsersupportflag); } function handlenogeolocation(errorflag) { if (errorflag === true) { alert("geolocation service failed."); initiallocation = kl; } else { alert("stop using ie"); initiallocation = northpole; } map.setcenter(initiallocation); } } google.maps.event.adddomlistener(window, "load", initialize); function loadmarker(){ var page = new date().gettime(); $.ajax({ url:"js/datatesting.xml", datatype: 'xml', cache: false, data: {page: page}, success: onloadmarker }); console.log("loadmarker running" ) }; function onloadmarker(data){ $(data).find("merchantmarker").each(function(){ places.push({ url_html:""+$(this).find('merchantprofileurl').text()+"",//mapshop profile url tooltip_html: "<div id='tooltips'>\n\ <div class='cover' style='background-image:url(image/default.jpg);'>\n\ <table style='margin-left:20px;'>\n\ <tr>\n\ <td><img class='photo img-circle' src='"+$(this).find('merchantprofilpicture').text()+"'>\n\ </td>\n\ </tr>\n\ <tr>\n\ <th class='text-center'><p>\n\ "+$(this).find('merchantname').text()+"\n\ </p></th>\n\ </tr>\n\ </table>\n\ </div>\n\ <div class='status'>\n\ <p>"+$(this).find('merchantaboutus').text()+"</p>\n\ </div>\n\ </div>", icon_html:''+$(this).find('merchantmapmarker').text()+'', //mapshop marker position:{lat:$(this).find('merchantlat').text(), lng:$(this).find('merchantlon').text()} // shop lat , lon }); }); console.log('onloadmarker running') }; $(document).ready(function(){ $('#findout').click(function(){ $('#suggestion').hide(); $('#function_stream').hide(); $('#function_me').hide(); $('#function_findout').show(); }); loadmarker(); refresh(); }); and error(without delete markercluster) 
sorry guys have no choice asking question on stackoverflow.
the function loadmarker() called on document.ready , asynchronously populate places-array.
your function initialize() called on window.load, happen after document.ready , call of loadmarker() , sure happen before places-array populated in callback of loadmarker() .
but map instanciated inside initialize() when places-array not empty, map never instanciated , argument map provided markerclusterer undefined , not expected google.maps.map-instance(what causes error)
you may call initialize @ earliest @ end of onloadmarker(), because there places populated.
Comments
Post a Comment