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
Related
I'm trying to place a marker on click in google maps along with populating input boxes with the lat and lng. I need the code to clear all the existing markers first before placing the new marker and updating the lat and lng. everything works except when I add code to try clear all the markers.
The below code works perfectly but does not clear the old markers before placing the new one.
Thank you.
Working code without clearing existing markers...
<div id="map"></div>
<script>
var map;
function initMap() {
var latlng = new google.maps.LatLng(-29, 25);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: latlng,
});
google.maps.event.addListener(map, 'click', function(event){
var marker_position = event.latLng;
marker = new google.maps.Marker({
map: map,
draggable: false
});
marker.setPosition(marker_position);
document.getElementById("latFld").value = event.latLng.lat();
document.getElementById("lngFld").value = event.latLng.lng();
})
}
</script>
Not working code with clearing markers before adding a new one...
<div id="map"></div>
<script>
var map;
var markersArray = [];
function initMap() {
var latlng = new google.maps.LatLng(-29, 25);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: latlng,
});
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(event){});
google.maps.event.addListener(map, 'click', function(event){
var marker_position = event.latLng;
marker = new google.maps.Marker({
map: map,
draggable: false
});
clearOverlays();
marker.setPosition(marker_position);
document.getElementById("latFld").value = event.latLng.lat();
document.getElementById("lngFld").value = event.latLng.lng();
})
}
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
}
Thank you.
seem you have placed the code in the wrong place .. try
<div id="map"></div>
<script>
var map;
var markersArray = [];
function initMap() {
var latlng = new google.maps.LatLng(-29, 25);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: latlng,
});
clearOverlays();
marker = new google.maps.Marker({
map: map,
draggable: false
});
google.maps.event.addListener(marker,"click",function(event){});
google.maps.event.addListener(map, 'click', function(event){
var marker_position = event.latLng;
marker.setPosition(marker_position);
markersArray.push(marker);
document.getElementById("latFld").value = event.latLng.lat();
document.getElementById("lngFld").value = event.latLng.lng();
})
}
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
markersArray = [];
}
</script>
I've been stuck on this issue for a while now and could really use some help. In a Google Map, I have a list of markers which are being treated as a markerArray, with their own custom icons. But along with displaying those markers, I would like for it to create a marker which is placed at the users geotagged location. I have tried merging the suggestions I've come across here on stack overflow, and have successfully gotten the users browser to center the map based off of geolocation, but whenever I try to add a marker outside of the standard var=locations, all of the markers disappear. I am providing my working code, which simply lacks the feature to add the "current location" marker. If anyone has any input, I'd be thrilled.
var map = null;
var markerArray = [];
function initialize() {
var myOptions = {
zoom: 13,
center: new google.maps.LatLng(40.746613, -73.990109),
mapTypeControl: false,
navigationControl: false,
streetViewControl: false,
zoomControl: false,
styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"off"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"}]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}]
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(initialLocation);
});
}
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var locations = [
['90 West Apartment', 40.709943, -74.014430, 7, 'images/pin2.png'],
['Caffe Vita', 40.719652, -73.988411, 6, 'images/pin1.png'],
['Croxleys Ale House', 40.722480, -73.983386, 5, 'images/pin1.png'],
['Grays Papaya', 40.778291, -73.981829, 4, 'images/pin2.png'],
['The Back Room', 40.718723, -73.986913, 3, 'images/pin1.png'],
['MUD Coffee', 40.729912, -73.990678, 2, 'images/pin1.png'],
['Nurse Bettie', 40.718820, -73.986863, 1, 'pin2.png']];
for (var i = 0; i < locations.length; i++) {
createMarker(new google.maps.LatLng(locations[i][1], locations[i][2]),locations[i][0], locations[i][3], locations[i][4]);
}
mc.addMarkers(markerArray, true);
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
function createMarker(latlng, myTitle, myNum, myIcon) {
var contentString = myTitle;
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: myIcon,
zIndex: Math.round(latlng.lat() * -100000) << 5,
title: myTitle
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
markerArray.push(marker);
}
window.onload = initialize;
Let's try this.
Put this in your initialize(): navigator.geolocation.getCurrentPosition(showPosition);
Then define showPosition:
var showPosition = function (position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Do whatever you want with userLatLng.
var marker = new google.maps.Marker({
position: userLatLng,
title: 'Your Location',
map: map
});
}
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);
Problem with "Multiple Markers InfoWindows" on Google Map API.
There are 2 problems:
Markers are showing SAME InfoWindow
Again, Markers are NOT CLICKABLE on mobile devices.
Here is my code:
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(60.037760, -44.100494),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var locations = [
['Alvin', 60.074433, -44.011917],
['Sirius', 60.037760, -44.100494]
];
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
var infowindow = new google.maps.InfoWindow({content: locations[i][0]});
new google.maps.event.addListener( marker, 'click', function() {
infowindow.open(map,this);
});
}
Create global reference to infowindow.
var infowindow = new google.maps.InfoWindow();
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
new google.maps.event.addListener( marker, 'click', function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map,this);
});
}
I have this code that reads data from an xml file and puts the marker on the map.
What i want to do is to read the xml file automatically every 5 seconds, and so update the position of the marker.
I tried adding setInterval to the function, but the problem is that the previous marker is not deleted. Just add another marker to the map and so on.
(I dont want the entire map updated, just the marker)
<script type="text/javascript">
var map = null;
function createMarker(latlng, html) {
var contentString = html;
var image = new google.maps.MarkerImage('http://www.google.com/mapfiles/markerA.png',
new google.maps.Size(20, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var shadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
new google.maps.Size(37, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var marker = new google.maps.Marker({
position: latlng,
map: map,
shadow: shadow,
icon: image,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
}
function initialize() {
var myOptions = {
zoom: 13,
center: new google.maps.LatLng(-18.432713,-70.317993),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
setInterval(function() {
downloadUrl("data.xml", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var html = "<strong>Taxi Arica</strong></br><strong>Latitud:</strong> " + markers[i].getAttribute("lat") + "</br><strong>Longitud:</strong> " + markers[i].getAttribute("lng");
var marker = createMarker(point,html);
}
});
},5000);
}
var infowindow = new google.maps.InfoWindow(
{size: new google.maps.Size(150,50)});
</script>
To update the position of a marker, you should call setPosition:
var new_marker_position = new google.maps.LatLng(53.345735, -6.259548);
marker.setPosition(new_marker_position);