Hello everyone, I'm not very knowledgeable about java script and I need a help, how to deploy a code in google maps api to create a label at each point. Below I am putting my code and if someone can help me to inform me what I am doing wrong (The label does not appear) This image and how I wanted it to work
I took this example here
<!DOCTYPE html>
<head>
<script src="../gerenciador/assets/components/library/jquery/jquery.min.js? v=v2.1.0"></script>
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script><scripttype="text/javascript" src="http://www.google.com/jsapi"></script><scripttype="text/javascript" src="label.js"></script>
<style type="text/css">
.labels {
color: red;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
font-weight: bold;
text-align: center;
width: 40px;
border: 2px solid black;
white-space: nowrap;
}
</style>
<script type="text/javascript" src="cliente/label.js"></script>
<script>
var infoWindow = null;
var map = null;
var markersArray = [];
function initialize() {
var myLatlng = new google.maps.LatLng(-22.904546, -43.097979);
var myOptions = {
zoom : 8,
center : myLatlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
// Inicio do Jonson para altera a cor do Mapa
var pink_parks = [
];
map.setOptions({styles: pink_parks});
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
// Fim do jonson
infoWindow = new google.maps.InfoWindow;
updateMaps();
window.setInterval(updateMaps, 30000);
}
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
}
/*
* Método que realiza chama o caminho do xml de dados
* e atualiza o mapa
*/
function updateMaps() {
// Vamos remover o que já havia de overlay
// É possível implementar a remoção e inclusão seletiva
clearOverlays();
var timestamp = new Date().getTime();
var data = 'gps/dataxml.xml?t=' + timestamp;
//Me guardo o direito a não explicar o óbvio, novamente
$.get(data, {}, function(data) {
$(data).find("gps").each(
function() {
var gps = $(this);
var nome = gps.attr("nome");
var alti = gps.attr("alti");
var bateria = gps.attr("bateria");
var id_saida = gps.attr("id_saida");
var id_motorista = gps.attr("id_motorista");
var latlng = new google.maps.LatLng(parseFloat(gps
.attr("lat")), parseFloat(gps.attr("longi")));
var marker = new google.maps.Marker({
position : latlng,
map : map,
title: id_saida,
//icon: icon.icon,
labelContent: "$425K",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75} ,
});
//Opa... bora guardar as referências dos markers??
markersArray.push(marker);
google.maps.event.addListener(marker, "click", function()
{});
});
});
0
}
google.setOnLoadCallback(initialize);
</script>
<body class="" style="background: #4a8bc2; " onload="hidden()" >
<div class="">
<div id="" style="height: 460px;">
<div id="map_canvas" style="position: absolute; top: 10%; left: 0%;
width: 100%; height: 765px"></div>
<div id="log"></div></div>
</div></p>
</body>
</html>
My xml
<gps><gps lat="-23.000787" longi="-43.001940" id_motorista="124" p_nome="Murilo Barros" nome="Fabio H de O Rangel" p_tipo_veiculo="" id_saida="308" start="16/Mar/3" hora_start="" p_tipo_serv="" title="" vei="BUS" placa="kov-6095" cor="" foto1="" fotom="0cf4cf381a80d3c9c94fd0b388cf22ad.jpg" id_pax=""/>
<gps lat="-23.000787" longi="-43.001940" id_motorista="124" p_nome="Murilo Barros" nome="Fabio H de O Rangel" p_tipo_veiculo="" id_saida="308" start="16/Mar/3" hora_start="" p_tipo_serv="" title="" vei="BUS" placa="kov-6095" cor="" foto1="" fotom="0cf4cf381a80d3c9c94fd0b388cf22ad.jpg" id_pax=""/>
<gps lat="-22.709931" longi="-42.626153" id_motorista="75" p_nome="Colombia - 16 pax" nome="CARLA RODRIGUES DE VASCONCELLOS" p_tipo_veiculo="" id_saida="305" start="16/Mar/3" hora_start="" p_tipo_serv="" title="" vei="BUS" placa="lpz-4050" cor="" foto1="" fotom="f9db82872944c9af856e9753bef0c7cc.jpg" id_pax=""/>
<gps lat="-22.909909" longi="-42.626167" id_motorista="81" p_nome="Mariana Wyse" nome="Fabio Guia" p_tipo_veiculo="" id_saida="307" start="16/Mar/3" hora_start="" p_tipo_serv="" title="" vei="BUS" placa="kov-6555" cor="" foto1="" fotom="14db0116f632d1ef5c1b6039ec9e33b9.jpg" id_pax=""/>
</gps>