I am working on a .net application with MVC and I have a map where some different icons are loaded, they are brought from a SQL server database, if my application works the problem I have to reload the page several times for these to be shown, there are times when the dots are shown the first time, but sometimes you have to recharge them more than once.
This function creates and loads the map with a symbology
function initMap() {
var h = { lat: 20.967778, lng: -89.621667 };
var myOptions = {
zoom: 12,
center: h,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
infowindow = new google.maps.InfoWindow();
//var marker, i;
//var bounds = new google.maps.LatLngBounds();
var icons = {
i1: {
name: 'BACHES',
icon: '../puntosimg/42.png'
},
i2: {
name: 'MALTRATO ANIMAL',
icon: "../puntosimg/52.png"
},
i3: {
name: 'LOTES BALDÍOS',
icon: "../puntosimg/62.png"
},
i4: {
name: 'VANDALISMO ',
icon: "../puntosimg/72.png"
},
i5: {
name: 'ROBO',
icon: "../puntosimg/82.png"
},
i6: {
name: 'INCENDIOS',
icon: "../puntosimg/92.png"
},
i7: {
name: 'ACCIDENTES AUTOMOVILÍSTICOS',
icon: "../puntosimg/102.png"
},
i8: {
name: 'OTROS',
icon: "../puntosimg/112.png"
}
};
var legend = document.getElementById('legend');
for (var key in icons) {
var type = icons[key];
var name = type.name;
var icon = type.icon;
var div = document.createElement('div');
div.innerHTML = '<br/><img src="' + icon + '"> ' + name;
legend.appendChild(div);
}
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(document.getElementById('legend'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById('soy'));
}
This is an Ajax function that makes the query to a controller, and returns a json with the data of the markers that are passed to variables with a for and send it to the method addMarker ()
$.ajax({
url: "/usuariofron/devolverpuntos",
success: function (data) {
for (var i = 0; i < data.length; i++) {
var des = (data[i]["punton"]);
var location = new google.maps.LatLng(data[i]["x"], data[i]["y"]);
var tipo = (data[i]["id"]);
addMarker(des, location, tipo, i);
}
}
})
This method gives the format to the bookmark with which icon it should be displayed, and it is put in an arrangement with a push
function addMarker(d, l, t, i) {
if (t == 11) {
image = "../puntosimg/112.png";
var marker = new google.maps.Marker({
position: l,
map: map,
icon: image
});
array.push(marker);
}
else if (t== 4){
image = "../puntosimg/42.png";
var marker = new google.maps.Marker({
position: l,
map: map,
icon: image
});
array.push(marker);
}
else if (t == 5) {
image = "../puntosimg/52.png";
var marker = new google.maps.Marker({
position: l,
map: map,
icon: image
});
array.push(marker);
}
else if (t == 6) {
image = "../puntosimg/62.png";
var marker = new google.maps.Marker({
position: l,
map: map,
icon: image
});
array.push(marker);
}
else if (t == 7) {
image = "../puntosimg/72.png";
var marker = new google.maps.Marker({
position: l,
map: map,
icon: image
});
array.push(marker);
}
else if (t == 8) {
image = "../puntosimg/82.png";
var marker = new google.maps.Marker({
position: l,
map: map,
icon: image
});
array.push(marker);
}
else if (t == 9) {
image = "../puntosimg/92.png";
var marker = new google.maps.Marker({
position: l,
map: map,
icon: image
});
array.push(marker);
}
else if (t == 10) {
image = "../puntosimg/102.png";
var marker = new google.maps.Marker({
position: l,
map: map,
icon: image
});
array.push(marker);
}
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(d);
infowindow.open(map, marker);
}
})(marker, i));
}
Finally this method is inserting the markers on the map
function setMapOnAll(map) {
for (var i = 0; i < array.length; i++) {
array[i].setMap(map);
}
}