Google Maps setMap is not a function - google-maps

i am dealing with the Problem that my google Maps Page shows me an error in Firebug.
The clearLocations() function is fired when i search within my dealer map.
But this error is showing up: "markers[i].setMap is not a function"
Does anyone know how to solve that problem? I searched in several forums and groups, but i am using a google.maps.Marker array so i can't find my problem.
Thanks in advance!
Code ( clearLocations() ):
function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
dealers.innerHTML = "";
}
Code ( load() ):
function load() {
map = new google.maps.Map(document.getElementById("map_canvas"), {
//center: new google.maps.LatLng(51.30174, 10.60824),
zoom: 10,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
dealers = document.getElementById("dealers");
infoWindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map
});
var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(pos);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
}

So, if I understand correctly, the Markers array is an array of LatLongs? Or is it an array of type google.maps.Marker? If it's the former then there won't be any maps functions available to it as it's not a Google maps marker.
An option might be to make an array of the markers you place on the map like this.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map
});
mapMarkers[i] = marker;
And then call
mapMarkers[i].setMap(null)

you can try this - just
console.log('=>'+markers.length);
for (var i = 0; i < markers.length; i++) {
console.log('===>'+markers[i]);
markers[i] = null;
}
markers = [];
console.log('==>'+markers.length);

Related

Remove a marker in google maps API V3

in an app building environment I'm trying to use this code:
var map = new Appery('googlemap').gmap;
var markerLatLng = new google.maps.LatLng(localStorage.getItem("markerLat"), localStorage.getItem("markerLng"));
var Titolo = 'Some Title';
var markers = [];
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
title: Titolo,
animation: google.maps.Animation.DROP
});
markers.push(marker);
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
google.maps.event.addListener(marker, 'click', function() {markers.pop();
map.refresh();
setAllMap(map);
});
but it doesn't works. Could anyone say me why? I just want to remove the last marker that the user made by clicking on any marker she/he wants.
Thank you
Removing the marker object from the array will not remove the marker from the map. You have to call setMap(null) on the marker to do so. Just do markers[markers.length -1].setMap(null) and then pop() on the array;

different content in multiple infowindows for google maps api v3

I am working on a project using google maps api v3 and am trying to make it so when a marker is clicked on a infowindow appears. I have accomplished this but now what i want is different content to be displayed when different markers are clicked on which i can't seem to figure out. any help is appreciated. thanks!
function initialize() {
var locations = [
['Phi Delta Theta', 39.511747,-84.735117],
['Pi Kappa Alpha', 39.511776, -84.735684],
['Sigma Nu', 39.513921, -84.735159],
['Sigma Alpha Epsilon', 39.514332, -84.734956],
['Beta Theta Pi', 39.5107519, -84.738549]
];
var myLatlng = new google.maps.LatLng(39.511747,-84.735117);
var mapOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var contentString = '<div id="content">'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
Here is the answer that does what you want, however it allows to open multiple infoWindow at once.
The point of it is to define multiple instances of windowinfo.
Instead of:
var infowindow = new google.maps.InfoWindow({
content: contentString
});
....
for (i = 0; i < locations.length; i++) {
}
do smth like this:
for (i = 0; i < locations.length; i++) {
var infowindow = new google.maps.InfoWindow({
content: contentString
});
}
That way you will define multiple markers, each with different content.

Implementing MarkerClusterer to Google Maps API

I know this has been covered a lot before and its a simple tweak to make it work but that's making it all the more frustrating.
I'm new to Google Maps API V3 and Javascript as a whole. I've managed to make a map with markers on but I'm wanting to implement the marker clusterer feature.
My code is as follows:
<script type="text/javascript">
var markers = [
['Wathegar', 58.443420, -3.247061, '/Projects/Wathegar/', '/images/MapsIcons/operational.png'],
['Wathegar 2', 58.436726, -3.216505, '/Projects/Wathegar_2/', '/images/MapsIcons/consented.png'],
['Sibmister', 58.570869, -3.429623, '/Projects/Sibmister/', '/images/MapsIcons/planning.png'],
['Humbleburn', 54.851982, -1.651425, '/Projects/Humbleburn/', '/images/MapsIcons/planning.png'],
['Achlachan', 58.449348, -3.452797, '/Projects/Achlachan/', '/images/MapsIcons/pre-planning.png'],
['Bonwick', 53.955025, -0.227451, '/Projects/Bonwick/', '/images/MapsIcons/pre-planning.png'],
['Garton', 54.033081, -0.494127, '/Projects/Garton/', '/images/MapsIcons/pre-planning.png'],
['Hill of Lybster', 58.603081, -3.679004, '/Projects/Hill-of-Lybster/', '/images/MapsIcons/planning.png'],
['Moota', 54.710442, -3.331947, '/Projects/Moota/', '/images/MapsIcons/pre-planning.png'],
['Sherburn Stone', 54.770432, -1.4593797, '/Projects/Sherburn-Stone/', '/images/MapsIcons/pre-planning.png'],
['Spring Brook', 53.498360, -1.624646, '/Projects/Spring_Brook/', '/images/MapsIcons/pre-planning.png'],
['Sunnyside', 55.387691, -3.949585, '/Projects/Sunnyside/', '/images/MapsIcons/pre-planning.png'],
['Thacksons Well', 52.955578, -0.759824, '/Projects/Thacksons_Well/', '/images/MapsIcons/pre-planning.png'],
];
function initializeMaps() {
var latlng = new google.maps.LatLng( 56.2, -2,5);
var myOptions = {
zoom: 6,
center:latlng,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: false,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
streetViewControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
url:markers[i][3],
icon:markers[i][4]
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
}
}
</script>
I've tried rebuilding it in the format used in this example along with a few other blogs but I don't have a good enough understanding of JS to know what I need to do.
Any help would be greatly appreciated.
Thanks!
The format of the JSON is OK, it doesn't have any effect to the MarkerClusterer.
What you are missing is to create a instance of the MarkerClusterer and to add the markers to this instance:
var mc = new MarkerClusterer(map),//MarkerClusterer-instance
marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
url:markers[i][3],
icon:markers[i][4]
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
mc.addMarker(marker);//add the marker to the MarkerClusterer
}
Please note: the linked page uses the MarkerClusterer for Maps-API-V2, for V3 use this updated Version:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js
You can also push all markers at single go to MarkerClusterer
var marker, i;
var markersArray = [];
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
url:markers[i][3],
icon:markers[i][4]
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
markersArray.push(marker);
}
var mc = new MarkerClusterer(map,markersArray),//MarkerClusterer-instance which add all markers to the MarkerClusterer

InfoWindow on Marker using MarkerClusterer

This is my html code. I've try anything to add an infowindow on the markers but it don't wanna work. My data is loading from the "Alle_Ortswahlen.page1.xml" file.
Do anyone have an idea how can I add infoWindow to each marker?
<script type="text/javascript">
google.load('maps', '3', {
other_params: 'sensor=false'
});
google.setOnLoadCallback(initialize);
function initialize() {
var stack = [];
var center = new google.maps.LatLng(48.136, 11.586);
var options = {
'zoom': 5,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("Field4"));
var lng = parseFloat(markers[i].getAttribute("Field6"));
var marker = new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map: map,
title:"This is a marker"
});
stack.push(marker);
}
var mc = new MarkerClusterer(map,stack);
});
}
</script>
Before the for cycle, make an empty infowindow object.
var infowindow = new google.maps.InfoWindow();
Than in the for cycle, after the marker, add an event listener, like this:
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("You might put some content here from your XML");
infowindow.open(map, marker);
}
})(marker, i));
There is some closure magic happening when passing the callback argument to the addListener method. If you are not familiar with it, take a look at here:
Mozilla Dev Center: Working with Closures
So, your code should look something like this:
google.load('maps', '3', {
other_params: 'sensor=false'
});
google.setOnLoadCallback(initialize);
function initialize() {
var stack = [];
var center = new google.maps.LatLng(48.136, 11.586);
var options = {
'zoom': 5,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
var infowindow = new google.maps.InfoWindow();
GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("Field4"));
var lng = parseFloat(markers[i].getAttribute("Field6"));
var marker = new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map: map,
title:"This is a marker"
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("You might put some content here from your XML");
infowindow.open(map, marker);
}
})(marker, i));
stack.push(marker);
}
var mc = new MarkerClusterer(map,stack);
});
}
So what you need to do is add some code, inside your for-loop, associating an infowindow onclick event handler with each marker. I'm assuming you only want to have 1 infowindow showing at a time, i.e. you click on a marker, the infowindow appears with relevant content. If you then click on another marker, the first infowindow disappears, and a new one reappears attached to the other marker. Rather than having multiple infowindows all visible at the same time.
GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
// just create one infowindow without any content in it
var infowindow = new google.maps.InfoWindow({
content: ''
});
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("Field4"));
var lng = parseFloat(markers[i].getAttribute("Field6"));
var marker = new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map: map,
title:"This is a marker"
});
// add an event listener for this marker
google.maps.event.addListener(marker , 'click', function() {
// assuming you have some content in a field called Field123
infowindow.setContent(markers[i].getAttribute("Field123"));
infowindow.open(map, this);
});
stack.push(marker);
}
var mc = new MarkerClusterer(map,stack);
});

Reset bounds on Google Maps API v3

How can I reset the bounds of a GoogleMap when user selects an option? Bounds have already been set to include a 'big picture' of the area, I want to zoom to a specfic area when the user selects an option...and need to do so by resetting the bounds. Extending to include the lat/longs won't work, as they are already included.
You have to create a new bounds object, add the map points to it, and then add the bounds object to the map.
Condensed solution:
//Create new bounds object
var bounds = new google.maps.LatLngBounds();
//Loop through an array of points, add them to bounds
for (var i = 0; i < data.length; i++) {
var geoCode = new google.maps.LatLng(data[i][1], data[i][2]);
bounds.extend(geoCode);
}
//Add new bounds object to map
map.fitBounds(bounds);
My complete solution for removing existing markers, getting an updated array of points via ajax, adding them to the map, and then resetting the map boundries.
<script type="text/javascript">
var map;
var markers = [];
$(document).ready(function () {
initialize();
setInterval(function () {
setMarkers();
}, 3000);
});
google.maps.visualRefresh = true;
function initialize()
{
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(45, -93),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
setMarkers();
}
function setMarkers()
{
removeMarkers();
var bounds = new google.maps.LatLngBounds();
$.ajax({
url: "/Your/Url?variable=123",
dataType: "json",
success: function (data) {
//Data returned is made up of string[3]
if (data != null) {
//loop through data
for (var i = 0; i < data.length; i++) {
var geoCode = new google.maps.LatLng(data[i][1], data[i][2]);
var marker = new google.maps.Marker({
position: geoCode,
map: map,
title: data[i][0],
content: '<div style="height:50px;width:200px;">' + data[i][0] + '</div>'
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.content);
infowindow.open(map, this);
});
markers.push(marker);
bounds.extend(geoCode);
}
}
map.fitBounds(bounds);
}
});
}
function removeMarkers()
{
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
}