I am new to google map. I need an help to implement pagination for the table content inside infowindow while clicking marker.
Here is my code :
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages': ['table']});
var map;
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var mapInfos = [];
var infoWindowView = new google.maps.InfoWindow;
function initialize()
{
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom:5,
center: new google.maps.LatLng(49.072086992455475,-5.05078125),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker=new google.maps.Marker({
position: myCenter
});
marker.setMap(map);
function mapInfoTable(container)
{
this.tableContainer = container;
var me = this;
var cssClass = {rowNumberCell: 'rowNumberCellClass'};
this.dT = new google.visualization.DataTable();
this.dT.addColumn("string", "Name");
this.dT.addColumn("string", "City");
this.populateTable = function()
{
this.dT.addRows([
['A1' ,'C1'],
['A2' ,'C2'],
['A3' ,'C3'],
['A4' ,'C4'],
['A5' ,'C5'],
['A6' ,'C6'],
['A7' ,'C7'],
['A8' ,'C8']
]);
this.draw();
}
this.table = new google.visualization.Table(document.getElementById(this.tableContainer));
this.draw = function()
{
this.table.draw(this.dT, {allowHtml: true, showRowNumber: true, cssClassNames: cssClass, page: 'enable', pageSize : 4, pagingSymbols: {prev: 'Previous',next: 'Next'}});
}
}
google.maps.event.addListener(marker, 'click', function(e) {
var InfoTab = new mapInfoTable('TableInfo');
InfoTab.populateTable(mapInfos);
var content = document.getElementById("TableInfo").innerHTML;
infoWindowView.setContent(content);
infoWindowView.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="mapCanvas" style="width:800px;height:500px"></div>
<div id="TableInfo" style="position:fixed;"></div>
</body>
</html>
Please let me know where the problem lies.
You need to wait for the 'domready' event on the infowindow before populating the table.
proof of concept fiddle
code snippet:
google.load('visualization', '1', {
'packages': ['table']
});
var map;
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
var mapInfos = [];
var infoWindowView = new google.maps.InfoWindow;
function initialize() {
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 5,
center: new google.maps.LatLng(49.072086992455475, -5.05078125),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myCenter
});
marker.setMap(map);
function mapInfoTable(container) {
this.tableContainer = container;
var me = this;
var cssClass = {
rowNumberCell: 'rowNumberCellClass'
};
this.dT = new google.visualization.DataTable();
this.dT.addColumn("string", "Name");
this.dT.addColumn("string", "City");
this.populateTable = function() {
this.dT.addRows([
['A1', 'C1'],
['A2', 'C2'],
['A3', 'C3'],
['A4', 'C4'],
['A5', 'C5'],
['A6', 'C6'],
['A7', 'C7'],
['A8', 'C8']
]);
this.draw();
}
this.table = new google.visualization.Table(document.getElementById(this.tableContainer));
this.draw = function() {
this.table.draw(this.dT, {
allowHtml: true,
showRowNumber: true,
cssClassNames: cssClass,
page: 'enable',
pageSize: 4,
pagingSymbols: {
prev: 'Previous',
next: 'Next'
}
});
}
}
google.maps.event.addListener(marker, 'click', function(e) {
var dTableInfo = document.createElement("div");
dTableInfo.id = "dTableInfo";
google.maps.event.addListener(infoWindowView, 'domready', function() {
var InfoTab = new mapInfoTable('dTableInfo');
InfoTab.populateTable(mapInfos);
});
infoWindowView.setContent(dTableInfo);
infoWindowView.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#mapCanvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="mapCanvas"></div>
Related
i need to show some marker on googlemaps.
I have write this section and i pass the data with locationList array, but the map don't show all my markers. Can you help me for understand where i have the problem?
Thank's for answers.
<asp:Content id="CustomScripts" ContentPlaceHolderID="CustomScript" runat ="server">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.837367, 11.029718),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
var temp = locationList
for (var i = 0; i < locationList.length; i++) {
var args = locationList[i].split(",");
var location = new google.maps.LatLng(args[0], args[1])
var marker = new google.maps.Marker({
position: location,
map: map
});
var j = i + 1;
marker.setTitle(message[i].replace(/(<([^>]+)>)/ig, ""));
attachSecretMessage(marker, i);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function attachSecretMessage(marker, number) {
var infowindow = new google.maps.InfoWindow({
content: message[number],
size: new google.maps.Size(50, 50)
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
$(document).ready(function () {
$("#MainContent_time1 , #MainContent_time2").datetimepicker({
dateFormat: 'yy/mm/dd',
timeFormat: 'HH:mm:ss',
pick12HourFormat: false
});
$("#MainContent_time1 , #MainContent_time2").keydown(function (e) {
var charCode = e.which;
if (charCode != 8 && charCode != 46) {
e.preventDefault();
} else {
var id = $(this).attr("id");
$("#" + id).val("");
}
});
});
</script>
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>langganan</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="markercluster.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
var cluster = [];
function load(lt,lg,zoom) {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(lt, lg),
zoom: zoom,
mapTypeId: 'roadmap'
});
var infowindow = new google.maps.InfoWindow();
downloadUrl("phpsqlajax_genxml3.php ", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("nama");
var address = markers[i].getAttribute("alamat");
var type = markers[i].getAttribute("wilayah");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
cluster.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
map.setZoom(17);
map.setCenter(marker.getPosition());
infowindow.setContent("Kode Pelanggan : "+markers[i].getAttribute("kode_pelanggan")+"<br/>"+
"Nama Pelanggan : "+markers[i].getAttribute("nama")+"<br/>"+
"Alamat Pelanggan : "+markers[i].getAttribute("alamat")+"<br/>"+
"Wilayah : "+markers[i].getAttribute("wilayah"));
infowindow.open(map, marker);
}
})(marker, i));
}
var a=15;
var mc = new MarkerClusterer(map, cluster,{
maxZoom: a /*,
// gridSize: size,
// styles: styles[style]
// */
}
);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
// google.maps.event.trigger(marker,'click');
function info(x)
{
google.maps.event.trigger(cluster[x],'click');
}
function replaceAll(find, replace, str) {
return str.replace(new RegExp(find, 'g'), replace);
}
function get(){
var tempout;
$.post('tampil.php',{ ambil: frm.ambil.value},
function(output){
var tampung = output.replace("[", "");
tampung = tampung.replace("]", "");
tampung = replaceAll('"',"",tampung);
var kode = tampung.split(",");
var latx = kode[3];
var lngx = kode[4];
load(latx,lngx,17);
info(kode[0]);
$('#nama').html(output).show();
}
);
}
function doNothing() {}
//]]>
</script>
<script type="text/javascript">
</script>
</head>
<body onload=load(-5.162764,119.443118,13)>
<form name="frm">
<center><input type="text" id="ambil" name="ambil" value="">
<input type="button" id="Cari"value="Cari" onClick="get(); "/></br>
<div id="nama"></div></center>
Open Info Window
</form>
<div id="map" style="width: 600px; height: 400px" ></div></hr>
</body>
</html>
I'm currently use a new system for my gis website and I'm getting the following error: Uncaught TypeError: Cannot read property '__e3ae_' of undefinedT.trigger
# main.js:18info # map.php:112(anonymous function)
# map.php:134jQuery.Callbacks.fire # jquery.js:3143jQuery.Callbacks.self.fireWith # jquery.js:3255done # jquery.js:9309jQuery.ajaxTransport.send.callback # jquery.js:9713
I have searched, researched and searched some more.
I am desperately trying to make it so my map changes its zoom automatically with different browser sizes as it keeps the markers on the map viewable. Right now the best thing that works for me is:
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
And even that is flawed. When the map becomes smaller, say on a mobile device, the markers eventually leave visibility since the zoom does not change. I need the zoom to change. Seemingly, this is the solution(I've done a lot of research, mostly from Stack Overflow):
map.fitBounds(firstB,secondB);
firstB, and secondB are the latitude and longitude that my markers use for their position.
I've even tried:
bounds = new google.maps.LatLngBounds();
bounds.extend(marker);
bounds.extend(smarker);
map.fitBounds(bounds);
Currently this is what I have:
<script>
var geocoder;
var map;
function initialize() {
firstB = new google.maps.LatLng(38.9395799,-104.7168500999999);
secondB = new google.maps.LatLng(38.9382571,-104.71727069999997);
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(38.938987, -104.717286);
var mapOptions = {
zoom:18,
center:latlng,
disableDefaultUI:true
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.fitBounds(firstB,secondB);
var styles=[
{
featureType:"road",
elementType:"labels",
stylers:[
{visibility:"off"}
]
}
];
map.setOptions({styles: styles});
var pinIcon = new google.maps.MarkerImage(
'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
null, /* size is determined at runtime */
null, /* origin is 0,0 */
null, /* anchor is bottom center of the scaled image */
new google.maps.Size(52, 52)
);
var marker = new google.maps.Marker({
position: firstB,
map: map,
title: 'AVS',
icon:pinIcon,
});
var firstB_contentString = '<div><p>Medical Office Building</p><p class="infoContent">6007 E Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></p></div>';
var firstB_infowindow = new google.maps.InfoWindow({
content: firstB_contentString
});
google.maps.event.addListener(marker, 'click', function() {
firstB_infowindow.open(map,marker);
});
var smarker = new google.maps.Marker({
position: secondB,
map: map,
title: 'AVS',
icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
var secondB_contentString = '<div><p>General Hospital</p><p class="infoContent">6001 E. Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></div>';
var secondB_infowindow = new google.maps.InfoWindow({
content: secondB_contentString
});
google.maps.event.addListener(smarker, 'click', function() {
secondB_infowindow.open(map,smarker);
});
google.maps.event.addListener(map, 'mousedown', function() {
firstB_infowindow.close(map,marker);
secondB_infowindow.close(map,smarker);
});
google.maps.event.addListener(marker, 'mousedown', function() {
firstB_infowindow.close();
secondB_infowindow.close();
});
google.maps.event.addListener(smarker, 'mousedown', function() {
firstB_infowindow.close();
secondB_infowindow.close();
});
/*bounds = new google.maps.LatLngBounds();
bounds.extend(marker);
bounds.extend(smarker);
map.fitBounds(bounds);*/
}
google.maps.event.addDomListener(window, 'load', initialize);
/*google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});*/
</script>
Nothing works.
Fix your bounds, make that global and call map.fitBounds in the resize handler code:
var bounds = new google.maps.LatLngBounds();
function initialize() {
var firstB = new google.maps.LatLng(38.9395799,-104.7168500999999);
var secondB = new google.maps.LatLng(38.9382571,-104.71727069999997);
bounds.extend(firstB);
bounds.extend(secondB);
Then:
google.maps.event.addDomListener(window, "resize", function() {
google.maps.event.trigger(map, "resize");
map.fitBounds(bounds);
});
working fiddle
code snippet:
var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();
function initialize() {
var firstB = new google.maps.LatLng(38.9395799,-104.7168500999999);
var secondB = new google.maps.LatLng(38.9382571,-104.71727069999997);
bounds.extend(firstB);
bounds.extend(secondB);
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(38.938987, -104.717286);
var mapOptions = {
zoom:18,
center:latlng,
disableDefaultUI:true
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.fitBounds(bounds);
var styles=[
{
featureType:"road",
elementType:"labels",
stylers:[
{visibility:"off"}
]
}
];
map.setOptions({styles: styles});
var pinIcon = new google.maps.MarkerImage(
'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
null, /* size is determined at runtime */
null, /* origin is 0,0 */
null, /* anchor is bottom center of the scaled image */
new google.maps.Size(52, 52)
);
var marker = new google.maps.Marker({
position: firstB,
map: map,
title: 'AVS',
icon:pinIcon,
});
var firstB_contentString = '<div><p>Medical Office Building</p><p class="infoContent">6007 E Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></p></div>';
var firstB_infowindow = new google.maps.InfoWindow({
content: firstB_contentString
});
google.maps.event.addListener(marker, 'click', function() {
firstB_infowindow.open(map,marker);
});
var smarker = new google.maps.Marker({
position: secondB,
map: map,
title: 'AVS',
icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
var secondB_contentString = '<div><p>General Hospital</p><p class="infoContent">6001 E. Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></div>';
var secondB_infowindow = new google.maps.InfoWindow({
content: secondB_contentString
});
google.maps.event.addListener(smarker, 'click', function() {
secondB_infowindow.open(map,smarker);
});
google.maps.event.addListener(map, 'mousedown', function() {
firstB_infowindow.close(map,marker);
secondB_infowindow.close(map,smarker);
});
google.maps.event.addListener(marker, 'mousedown', function() {
firstB_infowindow.close();
secondB_infowindow.close();
});
google.maps.event.addListener(smarker, 'mousedown', function() {
firstB_infowindow.close();
secondB_infowindow.close();
});
/*bounds = new google.maps.LatLngBounds();
bounds.extend(marker);
bounds.extend(smarker);
map.fitBounds(bounds);*/
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
google.maps.event.trigger(map, "resize");
map.fitBounds(bounds);
});
html, body, #map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
it's working but when I want to use these code in masterpage I have a problem.
this Problem is about coordinates.
it's looking work but don't take me a coordinates.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=tr"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/yonetici.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function (responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(39.909450, 34.849715);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function () {
updateMarkerAddress('Sürükleniyor...');
});
document.forms[0].txtLat.value = 40.775146501143766;
document.forms[0].txtLng.value = 30.384921661376946;
google.maps.event.addListener(marker, "drag", function () {
var latlng = marker.getPosition();
document.forms[0].txtLat.value = latlng.lat();
document.forms[0].txtLng.value = latlng.lng();
});
google.maps.event.addListener(marker, 'dragend', function () {
geocodePosition(marker.getPosition());
});
}
// Onload handler to fire off the app.
</script>
<script type="text/javascript">
$(function () {
var menu_ul = $('.menu > li > ul'),
menu_a = $('.menu > li > a');
menu_ul.hide();
menu_a.click(function (e) {
e.preventDefault();
if (!$(this).hasClass('active')) {
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true, true).slideDown('normal');
} else {
$(this).removeClass('active');
$(this).next().stop(true, true).slideUp('normal');
}
});
});
</script>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<div class="ad_googlemaps_area" >
<div id="mapCanvas"></div>
<div id="infoPanel">
<div id="info" style="display:none;" ></div>
<b>Tahmini Adres:</b>
<div id="address" ></div>
<b>Enlem</b>
<asp:TextBox ID="txtLat" runat="server"></asp:TextBox>
<b>Boylam:</b>
<asp:TextBox ID="txtLng" runat="server"></asp:TextBox>
</div>
</div>
</form>
</body>
remove the onload attribute and initialize method from your body element and javascript both instead put your code inside the pageLoad method as below:
function pageLoad(sender, args) { //use this method to load your map
var geocoder = new google.maps.Geocoder();
var latLng = new google.maps.LatLng(39.909450, 34.849715);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function () {
updateMarkerAddress('Sürükleniyor...');
});
document.forms[0].txtLat.value = 40.775146501143766;
document.forms[0].txtLng.value = 30.384921661376946;
google.maps.event.addListener(marker, "drag", function () {
var latlng = marker.getPosition();
document.forms[0].txtLat.value = latlng.lat();
document.forms[0].txtLng.value = latlng.lng();
});
google.maps.event.addListener(marker, 'dragend', function () {
geocodePosition(marker.getPosition());
});
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function (responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
// Onload handler to fire off the app.
}
Let me know if you still have trouble to load your map.
I try but same problem.
function pageLoad(sender, args) { //use this method to load your map
var geocoder = new google.maps.Geocoder();
var latLng = new google.maps.LatLng(39.909450, 34.849715);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function () {
updateMarkerAddre**strong text**ss('Sürükleniyor...');
});
no problems so far
problem Start in here
document.forms[0].txtLat.value = 40.775146501143766;
document.forms[0].txtLng.value = 30.384921661376946;
google.maps.event.addListener(marker, "drag", function () {
var latlng = marker.getPosition();
document.forms[0].txtLat.value = latlng.lat();
document.forms[0].txtLng.value = latlng.lng();
});
google.maps.event.addListener(marker, 'dragend', function () {
geocodePosition(marker.getPosition());
});
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function (responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
// Onload handler to fire off the app.
}
i user markerclustererplus and i want to show info window on cluster click. but i get undefined for all marker in a cluster. i just can't figure it out why and what can be happened. here is my code
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<style type="text/css">
html, body, #map { margin: 0; padding: 0; height: 95% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn-history/r315/trunk/markerwithlabel/src/markerwithlabel_packed.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var oncekimarker=null;
var customIcons = {
satilik: {
icon: 'images/pins/yellow.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
kiralik: {
icon: 'images/pins/blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function initialize() {
var markers = null;
var mcmarkers = [];
var globalMarker = [];
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(39, 35),
zoom: 6,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
var infowindow = new google.maps.InfoWindow();
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"))
var point = new google.maps.LatLng(lat, lng);
var html = "something";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
mcmarkers.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
}
var mcOptions = {
gridSize: 30,
maxZoom: 13,
zoomOnClick: false,
averageCenter: true
};
var mc = new MarkerClusterer(map, mcmarkers, mcOptions);
google.maps.event.addListener(mc, 'clusterclick', function(cluster) {
var content = '';
// Convert lat/long from cluster object to a usable MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
//Get markers
var yazmarkers = cluster.getMarkers();
var titles = "";
//Get all the titles
for(var i = 0; i < yazmarkers.length; i++) {
titles += yazmarkers[i].name + "\n";
}
infowindow.close();
infowindow.setContent(titles); //set infowindow content to titles
infowindow.open(map, info);
google.maps.event.addListener(map, 'zoom_changed', function() { infowindow.close() });
});
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
//infoWindow.open(map, marker);
if (oncekimarker) oncekimarker.setAnimation(null);
marker.setAnimation(google.maps.Animation.BOUNCE);
oncekimarker = marker;
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
</div>
<div id="map" style="width: 80%"></div>
</body>
</html>
any help whoul be appreciated. thanks for all your helps.
Your markers do not have a "name" property.
titles += yazmarkers[i].name + "\n";
You can add one by creating them like this
var marker = new google.maps.Marker({
name: name,
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
Warning: While this works with the API at present, it is not documented behavior, you may want to use the "title" property instead, which is documented and has the benefit of appearing on the Marker as a tooltip on mouseover.
working example