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);
for (var i = 0; i < 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');
// Get 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 now I want add label but I got error and the marker just 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 the overlay, derived from 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 the label is redrawn if the text or position is 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 is removed from the map, stop updating its position/text.
for (var i = 0, I = this.listeners_.length; i < 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 for add label from here http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html
