add label overlay Google Maps -
i'm success add infowindow
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>google map lazy load</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="http://localhost/label/label.js"></script> <style> #map-canvas{ width:100%; height:500px; position: "absolute"; top: 0px; left: 0px; overflow: "hidden"; } </style> </head> <body> <div id="map-canvas"></div> <script type="text/javascript"> var map; function setmarkers(data) { console.log('setmarkers'); console.log(data); var markerjson = json.parse(data); var pos; var marker; var allmarkers = []; console.log(markerjson.length); (var = 0; < markerjson.length; i++) { pos = new google.maps.latlng(markerjson[i].latitude, markerjson[i].longitude); marker = new google.maps.marker({ position: pos, map: map, title: 'title', icon:'https://www.google.com/support/enterprise/static/geo/cdate/art/dots/red_dot.png' }); /// info window // marker['infowindow'] = new google.maps.infowindow({ content: markerjson[i].no_tiang }); var currentinfo = null; google.maps.event.addlistener(marker, 'click', function() { if(currentinfo) { currentinfo.close();} this['infowindow'].open(map, this); currentinfo = this['infowindow']; }); /// info window // allmarkers.push(marker); } } function fetchmarkers() { console.log('fetchmarkers'); var loaded_markers = ($('#loaded_markers').val() =='') ? 0 : $('#loaded_markers').val(); var offset = $('#offset').val(); console.log(loaded_markers + ' - '+ offset); $.ajax({ type: "get", url: "lazy_load_ajax.php", data: { start: loaded_markers, offset: offset }, success: function(data) { //var already_loaded = parseint(loaded_markers) + parseint(offset); // $('#loaded_markers').val(already_loaded); setmarkers(data); settimeout(function(){ // fetchmarkers(); }, 3000); } }); } function initialize() { console.log('initialize'); // center var map_center = new google.maps.latlng(0.574853, 123.048032); var mapoptions = { zoom: 13, center: map_center, //maptypeid: google.maps.maptypeid.hybrid, pancontrol: false, streetviewcontrol: false, maptypecontrol: false }; // load google map map = new google.maps.map(document.getelementbyid("map-canvas"), mapoptions); fetchmarkers(); } function loadscript() { var script = document.createelement('script'); script.type = 'text/javascript'; script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'callback=initialize'; document.body.appendchild(script); } window.onload = loadscript; </script> </body> </html> and want add label got error , marker showing 1 marker
http://img.ctrlv.in/img/15/05/31/556aa5419dbed.jpg
i add code label before code infowindow
/// label /// var label = new label({ map: map }); label.bindto('position', marker, 'position'); label.bindto('text', marker, 'position'); /// label /// /// info window // marker['infowindow'] = new google.maps.infowindow({ content: markerjson[i].no_tiang }); var currentinfo = null; google.maps.event.addlistener(marker, 'click', function() { if(currentinfo) { currentinfo.close();} this['infowindow'].open(map, this); currentinfo = this['infowindow']; }); /// info window // script label.js
// define overlay, derived google.maps.overlayview function label(opt_options) { // initialization this.setvalues(opt_options); // label specific var span = this.span_ = document.createelement('span'); span.style.csstext = 'position: relative; left: -50%; top: -8px; ' + 'white-space: nowrap; border: 1px solid blue; ' + 'padding: 2px; background-color: white'; var div = this.div_ = document.createelement('div'); div.appendchild(span); div.style.csstext = 'position: absolute; display: none'; }; label.prototype = new google.maps.overlayview; // implement onadd label.prototype.onadd = function() { var pane = this.getpanes().overlaylayer; pane.appendchild(this.div_); // ensures label redrawn if text or position changed. var me = this; this.listeners_ = [ google.maps.event.addlistener(this, 'position_changed', function() { me.draw(); }), google.maps.event.addlistener(this, 'text_changed', function() { me.draw(); }) ]; }; // implement onremove label.prototype.onremove = function() { this.div_.parentnode.removechild(this.div_); // label removed map, stop updating position/text. (var = 0, = this.listeners_.length; < i; ++i) { google.maps.event.removelistener(this.listeners_[i]); } }; // implement draw label.prototype.draw = function() { var projection = this.getprojection(); var position = projection.fromlatlngtodivpixel(this.get('position')); var div = this.div_; div.style.left = position.x + 'px'; div.style.top = position.y + 'px'; div.style.display = 'block'; this.span_.innerhtml = this.get('text').tostring(); }; i got script add label here http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html
the label javascript depends on google maps javascript api v3 loading dynamically. need load label.js after google maps javascript api loaded. simplest fix not load dynamically.
code snippet:
var map; //0.574853, 123.048032 var data = '[{"id":"1","latitude":"0.57","longitude":"123.04","no_tiang":"stuff #1"},{"id":"2","latitude":"0.56","longitude":"123.045", "no_tiang":"stuff #2"}]'; function setmarkers(data) { console.log('setmarkers'); console.log(data); var markerjson = json.parse(data); var pos; var marker; var allmarkers = []; console.log(markerjson.length); (var = 0; < markerjson.length; i++) { pos = new google.maps.latlng(markerjson[i].latitude, markerjson[i].longitude); marker = new google.maps.marker({ position: pos, map: map, title: 'title', icon: 'https://www.google.com/support/enterprise/static/geo/cdate/art/dots/red_dot.png' }); /// label /// var label = new label({ map: map, text: marker.getposition().tourlvalue(6) }); label.bindto('position', marker, 'position'); // label.bindto('text', marker, 'position'); /// label /// /// info window // marker['infowindow'] = new google.maps.infowindow({ content: markerjson[i].no_tiang }); var currentinfo = null; google.maps.event.addlistener(marker, 'click', function() { if (currentinfo) { currentinfo.close(); } this['infowindow'].open(map, this); currentinfo = this['infowindow']; }); /// info window // allmarkers.push(marker); } } function fetchmarkers() { console.log('fetchmarkers'); var loaded_markers = ($('#loaded_markers').val() == '') ? 0 : $('#loaded_markers').val(); var offset = $('#offset').val(); console.log(loaded_markers + ' - ' + offset); /* $.ajax({ type: "get", url: "lazy_load_ajax.php", data: { start: loaded_markers, offset: offset }, success: function(data) { //var already_loaded = parseint(loaded_markers) + parseint(offset); // $('#loaded_markers').val(already_loaded); setmarkers(data); settimeout(function(){ // fetchmarkers(); }, 3000); } }); */ setmarkers(data); } function initialize() { console.log('initialize'); // center var map_center = new google.maps.latlng(0.574853, 123.048032); var mapoptions = { zoom: 13, center: map_center, //maptypeid: google.maps.maptypeid.hybrid, pancontrol: false, streetviewcontrol: false, maptypecontrol: false }; // load google map map = new google.maps.map(document.getelementbyid("map-canvas"), mapoptions); fetchmarkers(); } google.maps.event.adddomlistener(window, 'load', initialize); // define overlay, derived google.maps.overlayview function label(opt_options) { // initialization this.setvalues(opt_options); // label specific var span = this.span_ = document.createelement('span'); span.style.csstext = 'position: relative; left: -50%; top: -8px; ' + 'white-space: nowrap; border: 1px solid blue; ' + 'padding: 2px; background-color: white'; var div = this.div_ = document.createelement('div'); div.appendchild(span); div.style.csstext = 'position: absolute; display: none'; }; label.prototype = new google.maps.overlayview; // implement onadd label.prototype.onadd = function() { var pane = this.getpanes().overlaylayer; pane.appendchild(this.div_); // ensures label redrawn if text or position changed. var me = this; this.listeners_ = [ google.maps.event.addlistener(this, 'position_changed', function() { me.draw(); }), google.maps.event.addlistener(this, 'text_changed', function() { me.draw(); }) ]; }; // implement onremove label.prototype.onremove = function() { this.div_.parentnode.removechild(this.div_); // label removed map, stop updating position/text. (var = 0, = this.listeners_.length; < i; ++i) { google.maps.event.removelistener(this.listeners_[i]); } }; // implement draw label.prototype.draw = function() { var projection = this.getprojection(); var position = projection.fromlatlngtodivpixel(this.get('position')); var div = this.div_; div.style.left = position.x + 'px'; div.style.top = position.y + 'px'; div.style.display = 'block'; this.span_.innerhtml = this.get('text').tostring(); };#map-canvas { width: 100%; height: 500px; position: "absolute"; top: 0px; left: 0px; overflow: "hidden"; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map-canvas"></div>
Comments
Post a Comment