0

Como faria para preencher marcadores de estados no google maps, buscando os dados da latitude, longitude e titulo de um banco de dados.

Hoje já tenho essa função funcionando, porém os dados dos estados estão fixos em um javascript.

Abaixo está o código que tenho hoje:

function init_map() {
    var myOptions = {
        zoom: 4,
        center: new google.maps.LatLng(-14.2392976,-53.1805017),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(-27.276409, -48.844043),
        icon: "img/1444113052_map-marker.png",
        title: "Santa Catarina"
    });
    marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(-18.5779703,-45.4514505),
        icon: "img/1444113052_map-marker.png",
        title: "Minas Gerais"
    });
}


google.maps.event.addDomListener(window, "load", init_map);
2
  • Você já tem um banco de dados com essas informações? Em que formato? Commented 26/10/2016 às 23:30
  • Na verdade não tenho a tabela ainda. Será uma coisa bem simples, com a latitude, longitude e titulo. O formato estava pensando em json ou xml. Commented 26/10/2016 às 23:36

1 Resposta 1

0

Olá,

Faz então o resultado deste banco ser escrito em formato Json, com php ou a linguagem que preferir. Os dados ficam em uma matriz, que depois você acessa com um loop. Confere esta documentação:

https://developers.google.com/maps/documentation/javascript/examples/icon-complex

  var beaches = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
  ];

for (var i = 0; i < beaches.length; i++) {
      var beach = beaches[i];
      var marker = new google.maps.Marker({
        position: {lat: beach[1], lng: beach[2]},
        map: map,
        title: beach[0],
        zIndex: beach[3]
      });
    }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .