Can you please take a look at this Demo and let me know how I can add Map Info window for each marker on click on Markers OR related row in the table which contain the Title value from the json file?
Here is the json data sample:
var data = {"markers":[
{ "latitude":11.606503, "longitude":122.712637, "title":"Copenhagen" },
{ "latitude":11.585988, "longitude":122.757084, "title":"Barcelona"}
]};
I need to use the titles in the info windows.
Update I tried to add these snippest to the code
bindInfoWindow(marker, map, infowindow, data.description);
function bindInfoWindow(marker, map, infowindow, strDescription) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(strDescription);
infowindow.open(map, marker);
});
but still not working
You want to use data.markers[p].title not data.description
http://jsfiddle.net/p67ZL/2/
for (p = 0; p < data.markers.length; p++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.markers[p].latitude, data.markers[p].longitude),
map: map,
draggable: true,
title: "marker " + p,
id: p
});
$('#myTable tbody:eq(1)').append('<tr class=' + marker.id + '><td>' + data.markers[p].title + '</td><td>' + data.markers[p].latitude + '</td><td>' + data.markers[p].longitude + '</td></tr>');
bindMarker(marker);
bindInfoWindow(marker, map, infowindow, data.markers[p].title);
}
Related
I'm looking how to add specific markers to my gmap.
This is the code:
LatLng coord1 = new LatLng (y, x);
advancedModel.addOverlay(new Marker(coord1, "test", "orange.png", "http://maps.google.com/mapfiles/ms/micons/blue-dot.png"));
I want to add my specific marker which is in /resources/images not this one http://maps.google.com/mapfiles/ms/micons/blue-dot.png
Can you help?
You can add custom markers in Google Maps and you can also change the marker icon, depending on the type of feature the marker's being added to. Each point of interest in the list of campus features has a type attribute.
Below code is a sample code snippet how to add custom markers:
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
You can do something like this:
Marker newMarker = new Marker(new LatLng(latitude, longitude));
newMarker.setIcon("resources/media/marker-blue-dot.png");
simpleModel.addOverlay(newMarker);
I have a fully-functioning Google Maps V3 map that works fine the way it is. However, I dislike InfoWindows because they take up too much map space when displaying the info. My solution around that is to place information in a sidebar to the right of the map. The information inside the InfoWindow would be transferred to a in that sidebar using an event to first clear existing data and then repopulate it with the current data.
I'm not sure how to take data from inside the map and bring it outside, nor how to use an event inside to move that that data outside on a 'click'.
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("tests/cfdstationsxml.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 city = markers[i].getAttribute("city");
var state = markers[i].getAttribute("state");
var zip = markers[i].getAttribute("zip");
var engine = markers[i].getAttribute("engine");
var truck = markers[i].getAttribute("truck");
var ambulance = markers[i].getAttribute("ambulance");
var special_units = markers[i].getAttribute("special_units");
var battalion = markers[i].getAttribute("battalion");
var district = markers[i].getAttribute("district");
var office = markers[i].getAttribute("office");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<div id='info' style='overflow:hidden;line-height:15px;color:black;height:200px;width:225px;'><span style='font-weight:500;text-decoration:underline;font-size:13px;'>" + name + "</span><br><span style='font-size:10px;'>" + address + "<br>" + city + ", " + state + " " + zip + "</span><br><table style='color:black;font-size:12;'><tr><td>Engine:</td><td>" + engine + "</td></tr><tr><td>Truck:</td><td>" + truck + "</td></tr><tr><td>Ambulance:</td><td>" + ambulance + "</td></tr><tr><td>Special Units:</td><td>" + special_units + "</td></tr><tr><td>Battalion:</td><td>" + battalion + "</td></tr><tr><td>District:</td><td>" + district + "</td><tr><td>Office:</td><td>" + office + "</td></tr></tr></table></div>";
var icon = 'http://www.radioman911.com/images/9px_marker.png'; // anywhere from 3px_marker.png to 8px_marker.png
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon,
title: name,
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
$("#info").appendTo("#sidebar");
//infoWindow.setContent(lmth);
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() {}
ANY help at all would be much appreciated - this has been driving me nuts on and off for a month!!
Tim
This should work for the correct value of 'id of your sidebar div';
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
document.getElementById('id of your sidebar div').innerHTML = html;
});
}
working example
I'm managing this website: http://www.gprprojecten.nl
Basically what I'm doing with is is getting a stream of data from a webservice and chaching this. Afterwards I do all kinds of things to this data, including displaying all the projects on a google map.
Problem is, that as the projectnumber grows, the (custom)pins start to overlap (not visible, not clickable).
So I want to cluster my pins.
I started working on a google maps clusterer library using A32.blog as my starting point.
But now a problem arises. As I have chosen a client side filter system called filter.js, I depend on that way of using google maps, which is with objects rather then an array of markers as used in the clusterer library.
Here is the code I use to generate my map in combination with filter.js:
var googleMap = {
center_lat_lng: [52.14, 5.3],
map: null,
markers: {},
addMarker: function (project) {
var that = this;
var image = new google.maps.MarkerImage('#Url.Content("~/Content/img/marker.png")',
new google.maps.Size(63, 27),
new google.maps.Point(0, 0),
new google.maps.Point(23, 27));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(project.loclat, project.loclong),
map: this.map,
title: project.gebouwnaam,
icon: image
});
marker.info_window_content = "<div class=\"gmapcontentwindow\"><h4>" + project.gebouwnaam + "</h4><img src=\"" + project.thumburl + "\" alt=\"" + project.gebouwnaam + "\" /><div class=\"gebouwdata\"><span class=\"date\">" + project.publicatiedatum + "</span><h5>" + project.plaats + "</h5><span>" + project.gebruiksfunctie + " | " + project.gebouwcategorie + "</span><span>" + project.licentiehouder + "</span><span class=\"stars " + project.rating + "\"></span>"
if (project.akkoorddoorexpert == "True") {
marker.info_window_content += "<span class=\"expert\"></span>"
}
var forwardUrl = '#Url.Content("~/Home/Details/")';
marker.info_window_content += "<span class=\"forward\">Lees meer >></b></span></div></div>"
this.markers[project.id] = marker
google.maps.event.addListener(marker, 'click', function () {
that.infowindow.setContent(marker.info_window_content)
that.infowindow.open(that.map, marker);
});
},
updateMarkers: function (filtering_result) {
var google_map = this;
$.each(google_map.markers, function () { this.setMap(null); })
$.each(filtering_result, function () {
google_map.markers[this.id].setMap(google_map.map);
});
},
init: function () {
var options = {
center: new google.maps.LatLng(this.center_lat_lng[0], this.center_lat_lng[1]),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(document.getElementById("gmap"), options)
this.infowindow = new google.maps.InfoWindow({
});
//var markersarray = $(this.markers).toArray();
//console.log(markersarray);
//doet het nog niet???
//http://a32.me/2012/05/handling-huge-amount-of-markers-on-google-maps-with-clusters/
//var markerCluster = new MarkerClusterer(this.map, markersarray, {
// gridSize: 10,
// minimumClusterSize: 2
//});
}
};
project is an object that is passed to the init function from filter.js
You need to add the Marker Clusterer to the global scope or keep a reference to it in your object.
I am using the code below to add markers to a map it also have a listener to remove the marker from the map but I cannot figure out how to also remove the
marker from the markerarray at the same time as time as removing it from the map.
can someone give me a pointer on how to achieve this.
function createRedMarker(Lat, Lang, html, atitle) {
var latlng = new google.maps.LatLng(Lat, Lang);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: atitle,
icon: redmarker,
shadow: mshadow
});
google.maps.event.addListener(marker, "rightclick", function() {
if (confirm("Deselect " + marker.title + " and remove from Map?")) {
marker.setMap(null);
window.status = "Deselected>" + marker.title + "<";
}
});
markersArray.push(marker);
}
Please take a look at this solution. Hope this will help.
function createRedMarker(Lat, Lang, html, atitle) {
var latlng = new google.maps.LatLng(Lat, Lang);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: atitle,
icon: redmarker,
shadow: mshadow
});
google.maps.event.addListener(marker, "rightclick", function() {
if (confirm("Deselect " + marker.title + " and remove from Map?")) {
marker.setMap(null);
for (var i = 0; i < markers.length; i++) {
if (markers[i].getPosition().equals(marker.getPosition())) {
var index = markers.indexOf(marker);
markers.splice(index, 1);
break;
}
}
window.status = "Deselected>" + marker.title + "<";
}
});
markersArray.push(marker);
}
I have successfully added a custom image for the marker on the google map. The problem is such that the default marker that is balloon still appears along with the new image.
How should remove the default marker and only use the custom image?
The following is the code block that I have used :
var image = "image url";
marker = createMarker(point, address1, town, postcode, SiteName);
marker = new google.maps.Marker({
position: point,
map: map,
icon: image
});
The code for createMarker function is as follows:
function createMarker(point, address1, town, postcode, sitename) {
var html;
var infowindow;
html = '<b>' + sitename + '</b>' + '<br/>' + address1 + '<br/>' + town + '<br/>' + postcode;
var marker = new google.maps.Marker({ position: point, map: map });
google.maps.event.addListener(marker, "mouseover", function () {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({ content: html });
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, "click", function () {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({ content: html });
infowindow.open(map, marker);
});
return marker;
}
Icon property- can be set an image OR vector path:
Example-
marker = new google.maps.Marker({
position: new google.maps.LatLng(-25.363882, 131.044922),
icon: {
path: google.maps.SymbolPath.CIRCLE,
},
or
icon: url of an image,
draggable: true,
map: map,
animation: google.maps.Animation.DROP
});
This icon property will override the default ballon icon
Or if you want to set the icon later in the code- just write- marker.setIcon("your url");
UPDATE: You are actually creating two markers at the same location, one with the custom icon and with default icon.
Here-
marker = createMarker(point, address1, town, postcode, SiteName);`// marker1`
marker = new google.maps.Marker({ `...... //marker 2`
So combine these both-
function createMarker(point, address1, town, postcode, sitename, image) {
//code
var marker = new google.maps.Marker({ position: point, map: map, icon:image });