Error Deploying Label in Google Maps Api

Asked

Viewed 46 times

1

Hello guys I don’t have much knowledge of java script and need a help, how to deploy a code in the google maps api to create a label at each point. Below I’m putting my code and if anyone can help me to inform me what I’m doing wrong (The labels do not appear) That picture and how I wanted it to work E exatamente isso que eu presiso

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>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="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>
javascript google-maps maps
No answers

Browser other questions tagged javascript google-maps maps

You are not signed in. Login or sign up in order to post.