My markers are generated from xml parser. Its working and showing eg 7 markers, but when I added MC then it shows only 1 marker.
Check my js.
Maybe it problem is here? markers.push(marker); ?
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(52.6145, 21.3418);
var mapOptions = {
zoom: 6,
center: chicago
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("db/parse_xml.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 cover = markers[i].getAttribute("cover");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<div id='infobox'><img src='" + cover + "'/><b>" + name + "</b><br>" + address + " <br/><input type='button' id='end' onClick=calcRoute() name='" + name + "," + address + "' value='Wyznacz trasę'></div>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
document.getElementById('pasekBoczny').innerHTML += '<li class="list-sidebar" ><a href="javascript:myclick(' + i + ')" >' + name + '</a></li>';
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
});
}
markers is a DOMNodeList, which doesn't have a method push
Create an array and populate the array with the google.maps.Marker's
var markers = xml.documentElement.getElementsByTagName("marker"),
markerArray=[];
for (var i = 0; i < markers.length; i++) {
/**
* your code
**/
//markers.push(marker);<--error, remove it, currently the script will stop here
markerArray.push(marker);//add this instead
}
var markerCluster = new MarkerClusterer(map, markerArray);
Related
I query 2 "sets" of coordinates from a database, showing a track that we have flown a balloon.
I place the markers during takeoff and landing.
Now I want to draw a polyline between takeoff and landing in the 2 tracks, but for some reason also the 2 landing sites linked with the polyline.
Example: http://minballontur.dk/all/showtracknew.php
I cannot figure out what happens - I try to write the length of my coordinate array to 0, in each loop, but it does not help.
function load() {
var lastlat;
var lastlng;
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(55.44, 11.80),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow;
var flightPlanCoordinates = [];
<?php while($row = mysql_fetch_array($result)) { ?>
// Change this depending on the name of your PHP file
flightPlanCoordinates.length = 0;
downloadUrl("phpsqlajax_genxmlall.php?LogDate=<?php echo $row['Log_Date'] ?>&TimeOfDay=<?php echo $row['TimeOfDay'] ?>&Log_Name=<?php echo $row['Log_Name'] ?>", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
flightPlanCoordinates[i] = new google.maps.LatLng(markers[i].getAttribute("lat"), markers[i].getAttribute("lng"));
}
flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2
});
flightPath.setMap(map);
//Show first marker
var name = markers[0].getAttribute("name");
var address = markers[0].getAttribute("address");
var type = markers[0].getAttribute("BalloonStatus");
var point = new google.maps.LatLng(
parseFloat(markers[0].getAttribute("lat")),
parseFloat(markers[0].getAttribute("lng")));
var html = "<div style = 'height:75px;width:250px'><b>" + name + "</b> <br/>" + address +"<br/> Status : "+type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
lastlat = markers[0].getAttribute("lat");
lastlng = markers[0].getAttribute("lng");
//Show last marker
var point1 = new google.maps.LatLng(
parseFloat(markers[0].getAttribute("lat")),
parseFloat(markers[0].getAttribute("lng")));
var point2 = new google.maps.LatLng(
parseFloat(markers[markers.length-1].getAttribute("lat")),
parseFloat(markers[markers.length-1].getAttribute("lng")));
var distance = getDistance(point1, point2);
var distancekm = Math.round((distance/1000)*10)/10;
var name = markers[markers.length-1].getAttribute("name");
var address = markers[markers.length-1].getAttribute("address");
var type = markers[markers.length-1].getAttribute("BalloonStatus");
var point = new google.maps.LatLng(
parseFloat(markers[markers.length-1].getAttribute("lat")),
parseFloat(markers[markers.length-1].getAttribute("lng")));
var html = "<div style = 'height:75px;width:250px'><b>" + name + "</b> <br/>" + address +"<br/>Distance : "+ distancekm +" km<br/> Status : "+type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
lastlat = markers[markers.length-1].getAttribute("lat");
lastlng = markers[markers.length-1].getAttribute("lng");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
bounds.extend(new google.maps.LatLng(markers[i].getAttribute("lat"), markers[i].getAttribute("lng")));
}
map.fitBounds(bounds);
}); //Downlaod URL
<?php } ?> //End DB Loop
} // Load
You are using the same array of coordinates in both asynchronous callback functions. It is being reset to 0 length outside of the callback functions, before either of them runs, so you are ending up with all the coordinates from both polylines in the second one.
Something like this should work:
function load() {
var lastlat;
var lastlng;
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(55.44, 11.80),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow;
<?php while($row = mysql_fetch_array($result)) { ?>
downloadUrl("phpsqlajax_genxmlall.php?LogDate=<?php echo $row['Log_Date'] ?>&TimeOfDay=<?php echo $row['TimeOfDay'] ?>&Log_Name=<?php echo $row['Log_Name'] ?>", function(data) {
// declare a new array of coordinates in each callback function.
var flightPlanCoordinates = [];
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
flightPlanCoordinates[i] = new google.maps.LatLng(markers[i].getAttribute("lat"), markers[i].getAttribute("lng"));
}
flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2
});
flightPath.setMap(map);
//Show first marker
var name = markers[0].getAttribute("name");
var address = markers[0].getAttribute("address");
var type = markers[0].getAttribute("BalloonStatus");
var point = new google.maps.LatLng(
parseFloat(markers[0].getAttribute("lat")),
parseFloat(markers[0].getAttribute("lng")));
var html = "<div style = 'height:75px;width:250px'><b>" + name + "</b> <br/>" + address +"<br/> Status : "+type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
lastlat = markers[0].getAttribute("lat");
lastlng = markers[0].getAttribute("lng");
//Show last marker
var point1 = new google.maps.LatLng(
parseFloat(markers[0].getAttribute("lat")),
parseFloat(markers[0].getAttribute("lng")));
var point2 = new google.maps.LatLng(
parseFloat(markers[markers.length-1].getAttribute("lat")),
parseFloat(markers[markers.length-1].getAttribute("lng")));
var distance = getDistance(point1, point2);
var distancekm = Math.round((distance/1000)*10)/10;
var name = markers[markers.length-1].getAttribute("name");
var address = markers[markers.length-1].getAttribute("address");
var type = markers[markers.length-1].getAttribute("BalloonStatus");
var point = new google.maps.LatLng(
parseFloat(markers[markers.length-1].getAttribute("lat")),
parseFloat(markers[markers.length-1].getAttribute("lng")));
var html = "<div style = 'height:75px;width:250px'><b>" + name + "</b> <br/>" + address +"<br/>Distance : "+ distancekm +" km<br/> Status : "+type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
lastlat = markers[markers.length-1].getAttribute("lat");
lastlng = markers[markers.length-1].getAttribute("lng");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
bounds.extend(new google.maps.LatLng(markers[i].getAttribute("lat"), markers[i].getAttribute("lng")));
}
map.fitBounds(bounds);
}); //Download URL
<?php } ?> //End DB Loop
} // Load
I have a map that displays markers through a for loop.
function map_view_initialize() {
var properties = <?php echo is_array($properties) ? json_encode($properties) : $properties; ?>;
var index;
var mapOptions = {
center: {lat: 32.752601, lng: 9.801254},
zoom: 12,
};
var map = new google.maps.Map(document.getElementById('map_view_canvas'),
mapOptions);
infowindow = new google.maps.InfoWindow();
for (var index = 0; index < properties.length; index++) {
var latlng = new google.maps.LatLng(properties[index].property_latitude, properties[index].property_longitude);
var agent = properties[index].agent_firstname + ' ' + properties[index].agent_lastname;
var propertyName = properties[index].property_name;
var agentId = properties[index].agent_id;
var propertyLocation = properties[index].location_name;
var owner = properties[index].owner_firstname + ' ' + properties[index].owner_lastname;
var ownerTel = properties[index].owner_telephone_number;
var markerContent = "<div><h4>" + propertyName + "</h4>\n\
<h5>Location: " + propertyLocation + "</h5>\n\
<p>" + owner + " " + ownerTel + "</p>\n\
</div>";
var marker = new MarkerWithLabel({
agent:agentId,
position: latlng,
map: map,
labelContent: agent,
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels",
labelStyle: {opacity: 0.75}
});
marker.content = markerContent;
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(this.content);
infoWindow.open(this.getMap(), this);
});
}
}
I also have a group of buttons which are related with the agentId property of each marker.
#foreach($agents as $agent)
<button id="{{$agent->person_id}}" onclick="filterMarkers(this.id);" type='button' class='btn btn-success btnMargin btn-xs'>{{$agent->agent_lastname}} {{$agent->agent_firstname}}</button>
#endforeach
When i press one of these buttons then this function runs
function filterMarkers(agentId){
var element = document.getElementById(agentId);
var cls = hasClass(element,'notActive');
if(!cls){
element.classList.add("notActive");
element.style.opacity = 0.5;
}
else if(cls){
element.classList.remove("notActive");
element.style.opacity = 1;
}
}
I want to toggle the visibility of each marker by using my buttons (see the second block of code). For example when i press the button with the id=1 i need to hide/show the markers that the agentId property equals to 1.
You need an index of the marker associated to the agentId eg (defined in global area):
var markerIndex=[];
In the loop you must set for every agentId the associated marker
markerInded[agentId]=marker
and for toggle the marker you need functions for hide and show the marker eg
toggleMarkerOff(agentId){
markerIndex[agentId].setMap(null);
}
toggleMarkerOff(agentId){
markerIndex[agentId].setMap(map);
}
then you can call the prpoer function in the related element event
i am writing a certain code for showing multiple marker the google map. I Put all the value in a ListBox and trying read value in a loop and put it in map. I also write javascript. But While i am reading through loop some error occours. i am writing windows form application .
Dim lat, lon As String
Dim finalstr As String
Dim latlongroup As String
For i As Integer = 0 To ListBox1.Items.Count - 1
Dim tempstr = ListBox1.Items.Item(i)
If tempstr <> " " Then
tempstr = ListBox1.Items(i)
End If
latlongroup = "{" & "tempstr:" & tempstr & " }"
latlongroup = latlongroup & " , " & "{" & "tempstr:" & tempstr & " }"
finalstr = tb1.Text & vbCrLf & latlongroup
finalstr = finalstr & tb2.Text
Me.WebBrowser1.DocumentText = finalstr
Next
the java script part is
var markers = [
];
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var i = 0;
var interval = setInterval(function () {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "red";
icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.DROP,
icon: new google.maps.MarkerImage(icon)
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
i++;
if (i == markers.length) {
clearInterval(interval);
var bounds = new google.maps.LatLngBounds();
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
}, 80);
}
I have just loaded the following code into my webpage and after many hours of troubleshooting, I can't get the Markers to show up?
I have confirmed that the parsing php file is working.
Javascript:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var customIcons = {
accom: {
icon: 'images/google_map_icon_green.png'
},
food: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
function initialize() {
var mapCanvas = document.getElementById('map_canvas');
var mapOptions = {
center: new google.maps.LatLng(
<?php if ($_COOKIE[company] == 'ch') { echo $ch[hls_lat].", ".$ch[hls_long]; } elseif ($_COOKIE[company] == 'shc') { echo $shc[hls_lat].", ".$shc[hls_long]; } elseif ($_COOKIE[company] == 'lmh') { echo $lmh[hls_lat].", ".$lmh[hls_long]; }?>),
zoom: 12,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
var infoWindow = new google.maps.InfoWindow;
downloadUrl("required/xml_parse.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute("id");
var name = markers[i].getAttribute("name");
var icao = markers[i].getAttribute("icao");
var type = markers[i].getAttribute("type");
var elev = markers[i].getAttribute("elev");
var conname = markers[i].getAttribute("contactname");
var connum = markers[i].getAttribute("contactnum");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> - " + icao + "<br/>" + conname + " - " + connum;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
SetMap: map_canvas,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map_canvas, infoWindow, html);
}
});
function bindInfoWindow(marker, map_canvas, 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>
HTML:
<br />
<div class="inner-article-header"><h2>Map of Locations</h2></div>
<div id="map_canvas" style="height:565px; width:754px; margin:2px;"></div>
</div>
This is incorrect:
SetMap: map_canvas,
Should be (see MarkerOptions in the documentation):
map: map,
corrected marker constructor:
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
Add the parsing of the XML into the initialize function, so map is valid when you add the markers:
function initialize() {
var mapCanvas = document.getElementById('map_canvas');
var mapOptions = {
center: new google.maps.LatLng(0,0),
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(mapCanvas, mapOptions);
downloadUrl("example.xml", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute("id");
var name = markers[i].getAttribute("name");
var icao = markers[i].getAttribute("icao");
var type = markers[i].getAttribute("type");
var elev = markers[i].getAttribute("elev");
var conname = markers[i].getAttribute("contactname");
var connum = markers[i].getAttribute("contactnum");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> - " + icao + "<br/>" + conname + " - " + connum;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
working example (using one of my existing xml files, since you didn't provide any example data)
You have additional problems with the call to bindInfoWindow and its definition (map_canvas, should be map)
I'm adding a number of markers to a Google Map from xml through a for loop. When I click the marker for the infowindow to pop up I get an error stating 'cannot call method "open" of undefined'. What am I doing wrong here?
jQuery
var markers = xml.documentElement.getElementsByTagName('marker');
//function to create unique id
var getMarkerUniqueId = function(lat, lng) {
return lat + '_' + lng;
}
//function to get lat/lng
var getLatLng = function(lat,lng) {
return new google.maps.LatLng(lat, lng);
}
//cycle through and create map markers for each xml marker
for (var i = 0; i < markers.length; i++) {
//create vars to hold lat/lng from database
var lat = parseFloat(markers[i].getAttribute('lat'));
var lng = parseFloat(markers[i].getAttribute('lng'));
//create a unique id for the marker
var markerId = getMarkerUniqueId(lat, lng);
var name = markers[i].getAttribute('Type');
var html = '<b>' + name + '</b>';
//create the marker on the map
var marker = new google.maps.Marker({
map: the_Map,
position: getLatLng(lat, lng),
id: 'marker_' + markerId
});
//put the markerId into the cache
markers_arr[markerId] = marker;
infoWindow[i] = new google.maps.InfoWindow({
content: html,
position: getLatLng(lat, lng),
});
infobox[i] = google.maps.event.addListener(marker,'click',function() {
infoWindow[i].open(the_Map,marker);
});
}
You need a closure:
infobox[i] = google.maps.event.addListener(marker,'click',function() {
return function (windowToOpen) {
windowToOpen.open(the_Map,marker);
}(infoWindow[i]);
});
At the time you executing infoWindow[i].open value of i is equals markers.length. you should create a context for each infowindow
modifie Code:
function createContext (marker, iw){
google.maps.event.addListener(marker,'click',function() {
iw.open(the_Map,marker);
/ });
}
for (var i = 0; i < markers.length; i++) {
....
infobox[i] = createContext(marker, infoWindow[i]);
}