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
Related
<!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
Im triying to create a map with a marker from a position taken from a database. I succeed creating the map using this tutorial. The problem is that i have to enter manually the center position when i create the map.
¿Is there a way to center the map using the marker?. The code that im using is the following:
<!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>
<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'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("loadposition.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("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("Latitud")),
parseFloat(markers[i].getAttribute("Longitud")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, 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() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
Also my XML generated file looks like this:
<markers>
<marker Latitud="-33.449148" Longitud="-70.552886"/>
</markers>
Thanks a lot!
I used this in an app after adding the marker. Might help you.
bounds = new google.maps.LatLngBounds();
bounds.extend(marker.position);
if (!bounds.isEmpty())
map.panTo(bounds.getCenter());
Original idea was to find the center of a bunch of markers, so this might be overkill.
I have been racking my head on this for hours and can not seem to get this to work. When this code gets ran nothing shows on the map, I have confirmed that the markerlist array is being populated into the DOM. Nothing is being shown on the map though. Any help would be great! Thanks!
<!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>Marker Cluster Test</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { height: 100% }
</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/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>
<script type="text/javascript">
//<![CDATA[
function initialize() {
var center = new google.maps.LatLng(38.860479, -104.771461);
var myOptions = {
center: center,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
var markerlist = [];
downloadUrl("phpsqlajax_genxml.php", function(data) {;
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var type = markers[i].getAttribute("type");
var vehid = markers[i].getAttribute("vehid");
var point = new google.maps.LatLng(
markers[i].getAttribute("lat"),
markers[i].getAttribute("lng"));
var html = "<b>VehID:</b>"+vehid;
var marker = new google.maps.Marker({position: point,});
markerlist.push(marker);
}
});
var mc = new MarkerClusterer(map, markerlist);
}
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 onload=initialize();>
<div id="map"/>
</body>
</html>
You are populating the markerclusterer before the markerlist is populated, you need to do it inside the downloadUrl callback function:
downloadUrl("phpsqlajax_genxml.php", function(data) {;
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var type = markers[i].getAttribute("type");
var vehid = markers[i].getAttribute("vehid");
var point = new google.maps.LatLng(
markers[i].getAttribute("lat"),
markers[i].getAttribute("lng"));
var html = "<b>VehID:</b>"+vehid;
var marker = new google.maps.Marker({position: point,});
markerlist.push(marker);
}
var mc = new MarkerClusterer(map, markerlist);
});
I want to view and remove markers on map depending on user click over location type..
I am using this code to remove markers
1- Define markersArray as global array
var markersArray =new Array();
2- Define clearOverlays function
function clearOverlays() {
if ( markersArray && markersArray.length) {
google.maps.Map.prototype.clearOverlays = function() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
}
markersArray = [];
markersArray = new Array();
markersArray.length = 0;
}
}
3- I call the function when I want to remove the markers
The problem is that: Nothing is removed from the map!
I wonder to know why!
Edit: Here where I add markers and push them into markersArray
downloadUrl("getPlacesForType/"+markerType+"/"+lang, function(data) {
var xml = data.responseXML;
var myMarkersArray = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < myMarkersArray.length; i++) {
var name = myMarkersArray[i].getAttribute("name");
var version = myMarkersArray[i].getAttribute("version");
var description = myMarkersArray[i].getAttribute("description");
var type = myMarkersArray[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(myMarkersArray[i].getAttribute("lat")),
parseFloat(myMarkersArray[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + description;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point ,
icon: icon.icon,
shadow: icon.shadow
});
markersArray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
}
});
try using an array to store markers. you need to push each marker while creating it.
var markerArray=[];
var locations = [ [56.066877,21.069274], [55.279849,26.048155] ];
for (i = 0; i < locations.length; i++)
{
marker = new MarkerWithLabel({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map
});
markerArray.push(marker);
} /
and for deleting markers,
function deleteMarkers() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
take a look at this small example,
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var markersArray = [];
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListener(map, 'click', function (e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
markersArray.push(marker);
map.panTo(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
</script>
</head>
<body>
<input type="button" value="deletemarker" onclick="deleteOverlays()" />
<div id="map-canvas"></div>
</body>
</html>
Hi this is my first post here..
I have been playing around with google maps trying to make a list of campsites in France.
I have got to the point of reading an xml file of the data
Loading the map and clustering the results and it all works but very slow.
Q1 Is there a limit on the number of markers you can render even using the clusterer (there are >7000 records at the moment)
Q2
Is there anything obviously wrong with the code I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Read XML in Microsoft Browsers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false&language=en®ion=GB" type="text/javascript"></script>
<script src="scripts/markerclusterer.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/style_1024.css" />
<script type="text/javascript">
var xmlDoc;
function loadxml() {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.onreadystatechange = readXML;
xmlDoc.load("xml_files/France_all.xml");
}
function readXML() {
if (xmlDoc.readyState == 4) {
//alert("Loaded");
//set up map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(0, 0),
mapTypeControl: true,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow({ maxWidth: 100 });
var marker, i
var markers = [];
var html = [];
var x = (xmlDoc.getElementsByTagName("placemark").length);
//for (i = 0; i < x; i++) {
for (i = 0; i < x; i++) {
//document.write(xmlDoc.documentElement.childNodes[1].firstChild.tagName) + '<br>';
desc = xmlDoc.getElementsByTagName("description")[i].text;
lat = parseFloat((xmlDoc.getElementsByTagName("latitude")[i].text));
lon = parseFloat((xmlDoc.getElementsByTagName("longitude")[i].text));
myicon = (xmlDoc.getElementsByTagName("icon")[i].text);
//create new point
var point = new google.maps.LatLng(lat, lon);
//create new marker
marker = new google.maps.Marker({
position: point,
panControl: false,
map: map,
icon: myicon
});
//increae map bounds
bounds.extend(point);
//fit to bounds
map.fitBounds(bounds);
//add reference to arrays
markers.push(marker);
html.push(desc);
//add listener
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(html[i]);
infowindow.open(map, marker);
}
})(marker, i));
//alert(i + " " + desc +" added!");
};
//var mc = new MarkerClusterer(map);
var mcOptions = {gridSize: 50, maxZoom: 15 };
var mc = new MarkerClusterer(map, markers, mcOptions);
}
}
</script>
</head>
<body onload="loadxml()">
<div style="height:100%; width:100%">
<div id="map" style="float:left; width:50%; height:100%">
<!--filled via script-->
</div>
<div style="float:left; width:50%; height:100%">
<h4>Select Region</h4>
<select>
<option value="Alsace" onclick="loadxml()">Alsace</option>
</select>
</div>
</div>
</body>
</html>
This article may help. A tile based solution (FusionTables, KmlLayer, or a server based custom map) will render more quickly than native Google Maps API v3 objects, even with clustering. You may be seeing the transfer and processing time of the xml file.