javascript - How to use google marker manger with dynamically data from php -
javascript - How to use google marker manger with dynamically data from php -
hello guys have lots of google marker showing on maps. because of website page slow. got solution of google maker manger load marker. don't understand proper how load marker marker manger. google illustration differnt case code seek please help me guys index.html file
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>google maps api illustration - random weather map</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> document.write('<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/src/markermanager.js"><' + '/script>'); </script> <script type="text/javascript"> //<![cdata[ function setupmap() { var myoptions = { zoom: 4, center: new google.maps.latlng(48.25, 11.00), maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid('map'), myoptions); var listener = google.maps.event.addlistener(map, 'bounds_changed', function(){ setupweathermarkers(); google.maps.event.removelistener(listener); }); } function getweathericon() { var = math.floor(images.length*math.random()); if (!icons[i]) { var iconimage = new google.maps.markerimage('http://maps.gstatic.com/intl/en_all/mapfiles/dd-end.png', new google.maps.size(32, 32), new google.maps.point(0,0), new google.maps.point(0, 32) ); var iconshadow = new google.maps.markerimage('http://maps.gstatic.com/intl/en_all/mapfiles/dd-start.png', new google.maps.size(32, 59), new google.maps.point(0,0), new google.maps.point(0, 32) ); var iconshape = { coord: [1, 1, 1, 32, 32, 32, 32, 1], type: 'poly' }; icons[i] = { icon : iconimage, shadow: iconshadow, shape : iconshape }; } homecoming icons[i]; } function getweathermarkers() { var markerfile = 'data.json'; var batch = []; $.ajax({ url : markerfile, beforesend : function() { console.log('sending.......'); }, success:function (data) { console.log(data.photos); // loop markers $.each(data.photos, function(i,item){ // add together marker map // loadmarker(item); var tmpicon = getweathericon(); batch.push(new google.maps.marker({ position: new google.maps.latlng(item['longitude'],item['latitude']), icon: tmpicon.icon, shape: tmpicon.shape, title: 'weather marker' }) ); var listitem = $("<li/>"); $("<a/>").attr('href','#').click( function() { showmarker( marker.id ); homecoming false; }).text(item['photo_title'] ).appendto( listitem ); $('#mymaplist').prepend( listitem ); }); homecoming batch; } }) // console.log(batch); } //https://engeljournal.files.wordpress.com/2009/11/dot.jpg function setupweathermarkers() { //console.log(map); mgr = new markermanager(map); google.maps.event.addlistener(mgr, 'loaded', function(){ mgr.addmarkers(getweathermarkers(200), 3); // mgr.addmarkers(getweathermarkers(200), 6); // mgr.addmarkers(getweathermarkers(1000), 8); mgr.refresh(); }); } //]]> </script> </head> <body onload="setupmap()"> <div id="map" style="margin: 5px auto; width: 700px; height: 700px"></div> <div style="text-align: center; font-size: large;"> random weather map </div> <ul id="mymaplist"></ul> </body> </html> this data.json file
{ "count": 10785236, "photos": [{"photo_id": 27932, "photo_title": "atardecer en embalse", "photo_url": "http://www.panoramio.com/photo/27932", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/27932.jpg", "longitude": -64.404945, "latitude": -32.202924, "width": 500, "height": 375, "upload_date": "25 june 2006", "owner_id": 4483, "owner_name": "miguel coranti", "owner_url": "http://www.panoramio.com/user/4483"} , {"photo_id": 522084, "photo_title": "in memoriam antoine de saint exupéry", "photo_url": "http://www.panoramio.com/photo/522084", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/522084.jpg", "longitude": 17.470493, "latitude": 47.867077, "width": 500, "height": 350, "upload_date": "21 jan 2007", "owner_id": 109117, "owner_name": "busa péter", "owner_url": "http://www.panoramio.com/user/109117"} , {"photo_id": 1578881, "photo_title": "rosina lamberti,sunset,templestowe , victoria, australia", "photo_url": "http://www.panoramio.com/photo/1578881", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1578881.jpg", "longitude": 145.141754, "latitude": -37.766372, "width": 500, "height": 474, "upload_date": "01 apr 2007", "owner_id": 140796, "owner_name": "rosina lamberti", "owner_url": "http://www.panoramio.com/user/140796"} , {"photo_id": 97671, "photo_title": "kin-dza-dza", "photo_url": "http://www.panoramio.com/photo/97671", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/97671.jpg", "longitude": 30.785408, "latitude": 46.639301, "width": 500, "height": 375, "upload_date": "09 dec 2006", "owner_id": 13058, "owner_name": "kyryl", "owner_url": "http://www.panoramio.com/user/13058"} , {"photo_id": 25514, "photo_title": "arenal", "photo_url": "http://www.panoramio.com/photo/25514", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/25514.jpg", "longitude": -84.693432, "latitude": 10.479372, "width": 500, "height": 375, "upload_date": "17 june 2006", "owner_id": 4112, "owner_name": "roberto garcia", "owner_url": "http://www.panoramio.com/user/4112"} , {"photo_id": 57823, "photo_title": "maria alm", "photo_url": "http://www.panoramio.com/photo/57823", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/57823.jpg", "longitude": 12.900009, "latitude": 47.409968, "width": 500, "height": 333, "upload_date": "05 oct 2006", "owner_id": 8060, "owner_name": "norbert maier", "owner_url": "http://www.panoramio.com/user/8060"} , {"photo_id": 532693, "photo_title": "wheatfield in afternoon light", "photo_url": "http://www.panoramio.com/photo/532693", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/532693.jpg", "longitude": 11.272659, "latitude": 59.637472, "width": 500, "height": 333, "upload_date": "22 jan 2007", "owner_id": 39160, "owner_name": "snemann", "owner_url": "http://www.panoramio.com/user/39160"} , {"photo_id": 57819, "photo_title": "burg hohenwerfen", "photo_url": "http://www.panoramio.com/photo/57819", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/57819.jpg", "longitude": 13.189259, "latitude": 47.483221, "width": 500, "height": 333, "upload_date": "05 oct 2006", "owner_id": 8060, "owner_name": "norbert maier", "owner_url": "http://www.panoramio.com/user/8060"} , {"photo_id": 1282387, "photo_title": "thunderstorm in martinique", "photo_url": "http://www.panoramio.com/photo/1282387", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1282387.jpg", "longitude": -61.013432, "latitude": 14.493688, "width": 500, "height": 400, "upload_date": "12 march 2007", "owner_id": 49870, "owner_name": "jean-michel raggioli", "owner_url": "http://www.panoramio.com/user/49870"} , {"photo_id": 945976, "photo_title": "al tard", "photo_url": "http://www.panoramio.com/photo/945976", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/945976.jpg", "longitude": 0.490866, "latitude": 40.903783, "width": 335, "height": 500, "upload_date": "21 feb 2007", "owner_id": 3022, "owner_name": "arcadi", "owner_url": "http://www.panoramio.com/user/3022"} , {"photo_id": 73514, "photo_title": "hintersee bei ramsau", "photo_url": "http://www.panoramio.com/photo/73514", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/73514.jpg", "longitude": 12.852459, "latitude": 47.609519, "width": 500, "height": 333, "upload_date": "30 oct 2006", "owner_id": 8060, "owner_name": "norbert maier", "owner_url": "http://www.panoramio.com/user/8060"} , {"photo_id": 298967, "photo_title": "antelope canyon, ray of light", "photo_url": "http://www.panoramio.com/photo/298967", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/298967.jpg", "longitude": -111.407890, "latitude": 36.894037, "width": 500, "height": 375, "upload_date": "04 jan 2007", "owner_id": 64388, "owner_name": "artusi", "owner_url": "http://www.panoramio.com/user/64388"}]} after marker show on hover of li element have show google marker info window please help me guys want create map this help me guys pls
javascript php google-maps google-maps-api-3 markermanager
Comments
Post a Comment