getting the above error when trying to load my map. Currently no map is displaying, and can't seem to find an answer anywhere! Any help would be greatly appreciated! My js code is as follows:
<script type="text/javascript" src = "/js/jquery-1.11.2.js">
var map = null;
var iLoadPoints = 0;
function initialize() {
var mapOptions = {
center: {lat: 54.872128, lng: -6.284874},
zoom: 13
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
jQuery(document).ready(function($){
$.getJSON('/markers/json', function (data) {
var locations = JSON.parse(data);
for (var i = 0; i < locations.length; i++) {
addMarker(locations[i].lat, locations[i].lng);
}
});
});
}
google.maps.event.addListenerOnce(map, 'idle', function () {
iLoadPoints += 1;
if (iLoadPoints === 2) {
initialize();
}
});
google.maps.event.addDomListener(window, 'load', function () {
iLoadPoints += 1;
if (iLoadPoints === 2) {
initialize();
}
});
Your jQuery(..)ready function is inside the initialize function. and you don't call the initialize function. this is wrong. It can't work.
I have comment the part dependent form your configuration and added the call to the initialize function for a brief test. (see below)
<script type="text/javascript" src = "/js/jquery-1.11.2.js">
var map = null;
var iLoadPoints = 0;
function initialize(){
var mapOptions = {
center: {lat: 54.872128, lng: -6.284874},
zoom: 13
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
jQuery(document).ready(function($){
/* $.getJSON('/markers/json', function (data) {
var locations = JSON.parse(data);
for (var i = 0; i < locations.length; i++) {
addMarker(locations[i].lat, locations[i].lng);
}
});*/
});
}
/* google.maps.event.addListenerOnce(map, 'idle', function () {
iLoadPoints += 1;
if (iLoadPoints === 2) {
initialize();
}
});
google.maps.event.addDomListener(window, 'load', function () {
iLoadPoints += 1;
if (iLoadPoints === 2) {
initialize();
}
});*/
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I think you must redesign your app.. movinge the part in jQuery..... function in a proper aree o function inside the initialize() function.
Related
I have a div as follows to display a google map:
#map {
width: 300px;
height: 300px;
border: 1px solid #DDD;
}
<div id="map"></div>
I want to display the map with a zoom level that fits the bounds of the above viewport.
When I code as follows it works fine:
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map($('#map')[0], {zoom: 10});
geocoder.geocode({ 'address': generatedAddress }, function (results, status) {
if (status == 'OK') {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
if (results[0].geometry.viewport)
map.fitBounds(results[0].geometry.viewport);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
When I use typeahead-addresspicker.js to generate the map it zooms in too far?
I've narrowed it down to the following code. When you call the AddressPicker.prototype.updateMap function the boundsForLocation option on AddressPicker.prototype.initMap function should return this.map.fitBounds(response.geometry.viewport); When I debug I can see that it is hitting the following code inside the AddressPicker.prototype.updateBoundsForPlace function as expected:
if (response.geometry.viewport) {
console.log('test');
return this.map.fitBounds(response.geometry.viewport);
}
What I don't understand is how it gets wired back to the google.maps.Map - I'm not familiar with ptototypejs? So basically running through it, we initilize the map by calling initMap, then we call the updateMap function. Inside updateMap function we are calling the following snippet of code:
if (_this.map) {
if ((_ref = _this.mapOptions) != null) {
_ref.boundsForLocation(response);
}
}
which is suppose to set the bounds by calling the updateBoundsForPlace but the google maps options doesnt expose any property called boundsForLocation?
AddressPicker.prototype.initMap = function() {
var markerOptions, _ref, _ref1;
if ((_ref = this.options) != null ? (_ref1 = _ref.map) != null ? _ref1.gmap : void 0 : void 0) {
this.map = this.options.map.gmap;
} else {
this.mapOptions = $.extend({
zoom: 3,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP,
boundsForLocation: this.updateBoundsForPlace
}, this.options.map);
this.map = new google.maps.Map($(this.mapOptions.id)[0], this.mapOptions);
}
this.lastResult = null;
markerOptions = $.extend({
draggable: true,
visible: false,
position: this.map.getCenter(),
map: this.map
}, this.options.marker || {});
this.marker = new google.maps.Marker(markerOptions);
if (markerOptions.draggable) {
return google.maps.event.addListener(this.marker, 'dragend', this.markerDragged);
}
};
AddressPicker.prototype.updateMap = function(event, place) {
if (this.options.placeDetails) {
return this.placeService.getDetails(place, (function(_this) {
return function(response) {
var _ref;
_this.lastResult = new AddressPickerResult(response);
if (_this.marker) {
_this.marker.setPosition(response.geometry.location);
_this.marker.setVisible(true);
}
if (_this.map) {
if ((_ref = _this.mapOptions) != null) {
_ref.boundsForLocation(response);
}
}
return $(_this).trigger('addresspicker:selected', _this.lastResult);
};
})(this));
} else {
return $(this).trigger('addresspicker:selected', place);
}
};
AddressPicker.prototype.updateBoundsForPlace = function(response) {
if (response.geometry.viewport) {
return this.map.fitBounds(response.geometry.viewport);
} else {
this.map.setCenter(response.geometry.location);
return this.map.setZoom(this.options.zoomForLocation);
}
};
Managed to fix by commenting out the following lines:
//if (response.geometry.viewport) {
// return this.map.fitBounds(response.geometry.viewport);
//} else {
this.map.setCenter(response.geometry.location);
return this.map.setZoom(this.options.zoomForLocation);
//}
I'm using the Google Maps Javascript API to let users draw custom polygons with properties to be entered into a database. Before inserting them into the database though, they need to be able to delete selected shapes they've drawn.
This function isn't throwing any errors but it also isn't deleting the feature. What am I doing wrong?
var selectedshape;
function initMap() {
map = new google.maps.Map(document.getElementById('map2'), {
zoom: 1,
center: { lat: -1, lng: 1 }
});
function clearSelection() {
if (selectedShape) {
selectedShape = null;
}
}
function setSelection(shape) {
clearSelection();
selectedShape = shape;
}
map.data.addListener('click', function(event) {
map.controls[google.maps.ControlPosition.TOP_RIGHT].clear()
setSelection(event.feature);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerControlDiv);
map.data.revertStyle();
map.data.overrideStyle(event.feature, { strokeWeight: 8 });
selectID = event.feature.getProperty('uniqid')
selectID = event.feature.getProperty('uniqgeom')
$(".getSelectID").attr("id", selectID)
});
bounds = new google.maps.LatLngBounds();
map.data.addListener('addfeature', function(event) {
processPoints(event.feature.getGeometry(), bounds.extend, bounds);
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
var uniqid = "_" + Date.now();
feature_type = event.feature.getGeometry().getType()
if (feature_type == 'LineString') {
encoded_geom = event.feature.getProperty('uniqgeom') || google.maps.geometry.encoding.encodePath(event.feature.getGeometry().getArray());
} else {
encoded_geom = event.feature.getProperty('uniqgeom') || google.maps.geometry.encoding.encodePath(event.feature.getGeometry().getArray()[0].getArray())
}
event.feature.setProperty('encoded_geom', encoded_geom);
selectID = encoded_geom
$(".getSelectID").attr("id", selectID)
event.feature.setProperty('uniqid', uniqid);
});
function deleteSelectedShape() {
map.controls[google.maps.ControlPosition.TOP_RIGHT].clear()
if (selectedShape) {
map.data.forEach(function(feature) {
if (feature.getProperty('uniqid') == selectedShape.uniqid) {
map.data.remove(feature);
}
});
}
}
I believe the problem is a syntax error in
if (feature.getProperty('uniqid') == selectedShape.uniqid) {
I've attempted to embed a map inside an InfoWindow in order to create a pop up with a preview of the clustering. However once the InfoWindow is closed, the map div fails to render.
My attempt of a simplified jsfiddle, http://jsfiddle.net/behewur2/
function initialize() {
var mapOptions = {
center: {
lat: -34.9290,
lng: 138.6010
},
zoom: 8,
streetViewControl: false,
overviewMapControl: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var mcOptions = {
gridSize: 30,
zoomOnClick: false
};
var mcOptionsZoom = {
gridSize: 30,
zoomOnClick: true
};
var mc = new MarkerClusterer(map, [], mcOptions);
google.maps.event.addListener(mc, 'clusterclick',
function (cluster) {
if (typeof infowindow !== 'undefined') prevInfoWindow = infowindow;
infowindow = new google.maps.InfoWindow({
content: $('#inner-map-canvas')[0]
});
if (typeof prevInfoWindow !== 'undefined') prevInfoWindow.close();
infowindow.setPosition(cluster.getCenter());
infowindow.open(map);
google.maps.event.trigger(innermap, 'resize');
innermap.setZoom(innermap.getZoom());
for (var i = 0; i < cluster.getMarkers().length; i++) {
innermc.addMarker(
new google.maps.Marker({
position: cluster.getMarkers()[i].position,
map: innermap,
icon: cluster.getMarkers()[i].icon,
title: cluster.getMarkers()[i].title
}),
false);
}
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(mapOptions.center.lat, mapOptions.center.lng),
map: map,
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=0|FF0000|000000'
});
mc.addMarker(marker, false);
var innermap = new google.maps.Map(document.getElementById("inner-map-canvas"), mapOptions);
var innermc = new MarkerClusterer(innermap, [], mcOptionsZoom);
}
google.maps.event.addDomListener(window, 'load', initialize);
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDKxl8sh1TEN61taio3wdbGwuSI8FVeQ5k"></script>
<script type="text/javascript" src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer_packed.js"></script>
<div id="map-canvas"></div>
<div id="inner-map-canvas">
</dev>
It would be better to dynamically create the div node in the infowindow, it is destroyed when the infowindow is closed.
google.maps.event.addListener(mc, 'clusterclick', function (cluster) {
if (typeof infowindow !== 'undefined') prevInfoWindow = infowindow;
var innermapNode = document.createElement("div");
innermapNode.setAttribute("id", "inner-map-canvas");
innermapNode.style.height = "300px";
innermapNode.style.width = "300px";
infowindow = new google.maps.InfoWindow({
content: innermapNode
});
if (typeof prevInfoWindow !== 'undefined') prevInfoWindow.close();
infowindow.setPosition(cluster.getCenter());
infowindow.open(map);
innermap = new google.maps.Map(innermapNode, mapOptions);
innermc = new MarkerClusterer(innermap, [], mcOptionsZoom);
google.maps.event.addListener(infowindow, 'domready', function () {
google.maps.event.trigger(innermap, 'resize');
// innermap.setZoom(innermap.getZoom());
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < cluster.getMarkers().length; i++) {
innermc.addMarker(
new google.maps.Marker({
position: cluster.getMarkers()[i].position,
map: innermap,
icon: cluster.getMarkers()[i].icon,
title: cluster.getMarkers()[i].title,
keycount: cluster.getMarkers()[i].keycount
}),
false);
bounds.extend(cluster.getMarkers()[i].position);
}
google.maps.event.trigger(innermap, 'resize');
innermap.fitBounds(bounds);
});
});
proof of concept fiddle
code snippet:
function colorForCount(count) {
if (count == 1) return '4080FE';
if (count == 2) return 'F7C207';
if (count > 2 && count < 5) return 'F50D07';
if (count >= 5) return 'FF00F0';
else return 'B600FF';
}
var innermap;
var innermc;
function initialize() {
var mapOptions = {
center: {
lat: -34.9290,
lng: 138.6010
},
zoom: 8,
streetViewControl: false,
overviewMapControl: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var mcStyles = [{
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png",
height: 53,
width: 53
}, {
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m2.png",
height: 53,
width: 53
}, {
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png",
height: 53,
width: 53
}, {
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m4.png",
height: 53,
width: 53
}, {
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m5.png",
height: 53,
width: 53
}];
var mcOptions = {
gridSize: 30,
zoomOnClick: false,
styles: mcStyles
};
var mcOptionsZoom = {
gridSize: 30,
zoomOnClick: true,
styles: mcStyles
};
var mc = new MarkerClusterer(map, [], mcOptions);
mc.setCalculator(function(markers, numStyles) {
var count = markers.length;
var total = 0;
var max = 0;
var index = 0;
if (max == 1) index = 0;
if (max == 2) index = 2;
if (max > 2 && max < 5) index = 3;
if (max >= 5) index = 4;
return {
text: count,
index: index
};
});
google.maps.event.addListener(mc, 'clusterclick',
function(cluster) {
if (typeof infowindow !== 'undefined') prevInfoWindow = infowindow;
var innermapNode = document.createElement("div");
innermapNode.setAttribute("id", "inner-map-canvas");
innermapNode.style.height = "300px";
innermapNode.style.width = "300px";
infowindow = new google.maps.InfoWindow({
content: innermapNode
});
if (typeof prevInfoWindow !== 'undefined') prevInfoWindow.close();
infowindow.setPosition(cluster.getCenter());
infowindow.open(map);
innermap = new google.maps.Map(innermapNode, mapOptions);
innermc = new MarkerClusterer(innermap, [], mcOptionsZoom);
google.maps.event.addListener(infowindow, 'domready', function() {
google.maps.event.trigger(innermap, 'resize');
// innermap.setZoom(innermap.getZoom());
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < cluster.getMarkers().length; i++) {
innermc.addMarker(
new google.maps.Marker({
position: cluster.getMarkers()[i].position,
map: innermap,
icon: cluster.getMarkers()[i].icon,
title: cluster.getMarkers()[i].title,
keycount: cluster.getMarkers()[i].keycount
}),
false);
bounds.extend(cluster.getMarkers()[i].position);
}
google.maps.event.trigger(innermap, 'resize');
innermap.fitBounds(bounds);
});
});
google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
var mapBnds = map.getBounds();
var mapSpan = mapBnds.toSpan();
for (var i = 0; i < 25; i++) {
var latRan = (Math.random() * mapSpan.lat() / 2) + mapSpan.lat() / 4;
var lngRan = (Math.random() * mapSpan.lng() / 2) + mapSpan.lng() / 4;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(mapBnds.getSouthWest().lat() + latRan, mapBnds.getSouthWest().lng() + lngRan),
map: map,
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=' + i + '|FF0000|000000'
});
mc.addMarker(marker, false);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
/**
* Pull out the unique keys and counts.
* #param {Object} json The Inventory object.
* #return {Array.<{portal:{portalGuid:string,portalLocation:string,
* portalImageUrl:string,portalTitle:string,portalAddress:string},
* count:number}>}
*/
function getKeys(json) {
// parse the json string
var inventory = json.gameBasket.inventory;
// loop over the inventory items to find keys
var keys = [];
var iitckeys = {};
for (var i = 0; i < inventory.length; i++) {
// if it's a key, attempt to add to the key list
var item = inventory[i];
if (item[2].resource && item[2].resource.resourceType == "PORTAL_LINK_KEY") {
addKey(keys, iitckeys, item[2].portalCoupler);
} else if (item[2].resource && (item[2].resource.resourceType == "CAPSULE" || item[2].resource.resourceType == "INTEREST_CAPSULE")) {
parseCapsule(keys, iitckeys, item[2].container.stackableItems);
}
}
// return back the keys
return {
keys: keys,
iitckeys: iitckeys
};
}
/**
* Parse the items within a capsule.
* #param {Array.<{portal:{portalGuid:string,portalLocation:string,
* portalImageUrl:string,portalTitle:string,portalAddress:string},
* count:number}>} keys The current key array.
* #param {Array.<Object>} items The capsule's contents.
*/
function parseCapsule(keys, iitckeys, items) {
for (var i = 0; i < items.length; i++) {
if (typeof items[i].exampleGameEntity[2].resource !== 'undefined') {
if (items[i].exampleGameEntity[2].resource.resourceType == "PORTAL_LINK_KEY") {
var count = items[i].itemGuids.length;
while (count > 0) {
addKey(keys, iitckeys, items[i].exampleGameEntity[2].portalCoupler);
count--;
}
}
}
}
}
/**
* Add a key def to the keys list.
* #param {Array.<{portal:{portalGuid:string,portalLocation:string,
* portalImageUrl:string,portalTitle:string,portalAddress:string},
* count:number}>} keys The current key array.
* #param {{portalGuid:string,portalLocation:string,portalImageUrl:string,
* portalTitle:string,portalAddress:string}} keyDef The key definition.
*/
function addKey(keys, iitckeys, keyDef) {
// try to find the key and increment the count
console.log("keyDef : " + keyDef);
for (var i = 0; i < keys.length; i++) {
if (keys[i].portal.portalGuid == keyDef.portalGuid) {
keys[i].count++;
iitckeys[keyDef.portalGuid] ++;
return;
}
}
// couldn't find the key, add it
keys.push({
portal: keyDef,
count: 1
});
iitckeys[keyDef.portalGuid] = 1;
}
function getLatLng(location) {
var newLoc = parseInt(location, 16);
//if MSB is set
if ((newLoc & 0x80000000) !== 0x00000000) {
console.log("neg");
return (newLoc - 0x100000000) / 1E6;
} else {
console.log("pos");
return newLoc / 1E6;
}
}
body,
html {
height: 100%;
width: 100%;
}
#map-canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.cluster img {
width: 53px;
height: 53px;
}
#commands {
width: 100%;
}
#inner-map-canvas {
width: 300px;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<div id="map-canvas"></div>
<div id="keyjson"></div>
I am having trouble when trying to fix the vertical bands issue on Google Maps API for javascript.
The fact is that I only have access to the jQuery that is loaded automatically by the CRM.
In fact, I need to set the max-width property to none for all the img tags inside my Map div (#map-canvas).
This works if I edit the HTML code directly from Firefox Tools, but I can't find a way to have this done automatically.
The code I have access to looks like this:
var mymap;
jQuery.Class("MapView",{
initialize:function(){
var mapOptions = {
center: { lat: 45.447541, lng: 11.7451883},
zoom: 14
};
return new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
},{});
jQuery(document).ready(function(){
mymap = MapView.initialize();
});
$(window).bind("load", function() {
$('#map-canvas').find('img').css('max-width: none');
$("#map-canvas").hide().fadeIn('fast');
});
I tried a bunch of other online tutorials, but I've not been able to solve this.
Does anyone know a way to pull me out of this?
Thanks,
Riccardo
EDIT:
So, here's my complete code up to now:
var mymap;
var mymap_markers = [];
jQuery.Class("MapView",{
registerOnChangeEventOfSourceModule: function () {
jQuery('#sourceModule').on('change', function (e) {
jQuery('#picklistFields').find('option').remove().end().append('<option value="--">--</option>').val('--');
var element = jQuery(e.currentTarget);
var params = {};
var sourceModule = element.val();
params = {
'module': 'Map',
'action': "GetCVAjax",
'mode': "changeModule",
'sourceModule': sourceModule
};
AppConnector.request(params).then(
function (data) {
if (data) {
jQuery.each(data.result.options, function (i, item) {
var o = new Option(item, i);
jQuery(o).html(item);
jQuery("#picklistFields").append(o);
jQuery("#picklistFields").trigger('liszt:updated');
});
}
},
function (jqXHR, textStatus, errorThrown) {
alert(textStatus);
}
);
});
},
registerOnChangeEventOfCustomView: function () {
jQuery('#picklistFields').on('change', function (e) {
var element = jQuery(e.currentTarget);
var params = {};
var cvid = element.val();
var module = jQuery('#sourceModule').val();
params = {
'module': 'Map',
'action': "GetCVAjax",
'mode': "getMarkers",
'sourceModule': module,
'cvid': cvid
};
for (var i = 0; i < mymap_markers.length; i++) {
mymap_markers[i].setMap(mymap);
}
mymap_markers = [];
AppConnector.request(params).then(
function (data) {
if (data) {
jQuery.each(data.result, function (i, item) {
var myLatlng = new google.maps.LatLng(item['coords']['lat'],item['coords']['lng']);
var popupcontentCV = "<table class=\"table table-condensed table-striped table-bordered\"><tr><td colspan=\"2\"><strong>"+item['title']+"</strong></td></tr>";
jQuery.each(item['data'], function (label, value){
popupcontentCV += "<tr><td>"+app.vtranslate(label,module)+"</td><td>"+value+"</td></tr>";
});
popupcontentCV += "</table>";
var infowindow = new google.maps.InfoWindow({
content: popupcontentCV,
maxWidth: 315,
maxHeight: 550
});
var marker = new google.maps.Marker({
position: myLatlng,
map: mymap,
title: item['data']['title']
});
mymap_markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(mymap,marker);
});
});
}
},
function (jqXHR, textStatus, errorThrown) {
alert(textStatus);
}
);
});
},
initialize:function(){
var mapOptions = {
center: { lat: 45.447541, lng: 11.7451883},
zoom: 14
};
return new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
},{});
jQuery(document).ready(function(){
mymap = MapView.initialize();
MapView.registerOnChangeEventOfSourceModule();
MapView.registerOnChangeEventOfCustomView();
});
google.maps.event.addListener(mymap, 'idle', function () {
$('#map-canvas img').css('max-width', 'none');
});
/*
$(window).bind("load", function() {
$('#map-canvas').find('img').css('max-width: none');
$("#map-canvas").hide().fadeIn('fast');
});*/
Try either a CSS rule or with jQuery:
CSS
#map-canvas img {
max-width: 100%;
}
jQuery
google.maps.event.addListenerOnce(map, 'idle', function () {
$('#map-canvas img').css('max-width', '100%');
});
I am not sure whether you should set the max-width to none or 100%. Try both. And maybe try to write your CSS rule with !important if it doesn't work right away.
For the jQuery version, I added the css() function within the map idle event listener (therefore you are sure the map is loaded and ready).
Edit
I can't test your code but you can try this way:
jQuery(document).ready(function () {
mymap = MapView.initialize();
google.maps.event.addListenerOnce(mymap, 'idle', function () {
$('#map-canvas img').css('max-width', '100%');
});
MapView.registerOnChangeEventOfSourceModule();
MapView.registerOnChangeEventOfCustomView();
});
I have wrote this code to load markers from geojson and put it into markercluster. I'am not able to clear markercluster when the user select something else into dropdown list but clearMarkers() does nothing.
var markercluster;
$('#map_tracks').gmap({ 'center': '45.752051,6.295604', 'zoom': 12 }).bind('init', function(ev, map) {
$('#choose_tracks').change(function() {
var selected = $('#choose_tracks').val();
if ( selected != 'none' )
{
$("#map_tracks").gmap('clear', 'overlays');
$('#map_tracks').gmap('loadKML', 'sentier', 'http://example.com/media/kml/tracks/'+selected+'.kml');
$.getJSON( "http://example.com/media/geojson/tracks_poi/"+selected+".geojson").done(function( data ) {
if ( markercluster != undefined )
{
markercluster.clearMarkers();
}
$.each( data["features"], function( key, val ) {
var longitude = val["geometry"]["coordinates"][0];
var latitude = val["geometry"]["coordinates"][1];
var nom = val["properties"]["NOM"];
var type = val["properties"]["TYPE"];
$('#map_tracks').gmap('addMarker', {
'position': new google.maps.LatLng(latitude, longitude),
'icon':'http://example.com/media/kml/sentiers_img_poi/'+markersIcons[type]['name']
}).click(function() {
$('#map_tracks').gmap('openInfoWindow', { 'content': nom }, this);
});
});
markercluster = new MarkerClusterer(map, $('#map_tracks').gmap('get', 'markers'));
$('#map_tracks').gmap('set', 'MarkerClusterer', markercluster);
});
drawPath(selected);
}
});
});
How to clear markercluster ?