Ler json de arquivo local para gerar uma mapa

[Rengavitp 0]

Boa noite pessoal, 

 

Estou precisando gerar um mapa com a api do google maps, achei um modelo na net  e consegui adaptar para o que eu preciso, porém as coordenadas dos pontos que serão adicionados no maps estão no formato json e estático no mesmo arquivo. eu preciso fazer com que ao invés de carregar dali eu tenha um arquivo json local que é lido, assim posso gerar esse arquivo antes de abrir o mapa. Alguém pode me ajudar, sou novo com javascript e com json, não estou conseguindo sozinho, se alguém puder ajudar agradeço. abaixo segue o map.js para análise.

var map;
var infoWindow;

//aqui que preciso mudar
var markersData =[
   {
      lat: -27.6386333,
      lng: -48.745,
      nome: "Barra",
      morada1:"Rua Diogo Cão, 125",
      morada2: "Praia da Barra",
      codPostal: "3830-772 Gafanha da Nazaré" 
   },
   {
      lat: -27.59955,
      lng: -48.7498167,
      nome: "Costa Nova",
      morada1:"Quinta dos Patos, n.º 2",
      morada2: "Praia da Costa Nova",
      codPostal: "3830-453 Gafanha da Encarnação" 
   },
   {
      lat: -27.6247167,
      lng: -48.7129167,
      nome: "Gafanha da Nazaré",
      morada1:"Rua dos Balneários do Complexo Desportivo",
      morada2: "Gafanha da Nazaré",
      codPostal: "3830-225 Gafanha da Nazaré" 
   } 
];

function initialize() {

   var mapOptions = {
      center: new google.maps.LatLng(40.601203,-8.668173),
      zoom: 9,
      mapTypeId: 'roadmap',
   };

   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

   // cria a nova Info Window com referência à variável infowindow
   // o conteúdo da Info Window será atribuído mais tarde
   infoWindow = new google.maps.InfoWindow();

   // evento que fecha a infoWindow com click no mapa
   google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
   });

   // Chamada para a função que vai percorrer a informação
   // contida na variável markersData e criar os marcadores a mostrar no mapa
   displayMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);

// Esta função vai percorrer a informação contida na variável markersData
// e cria os marcadores através da função createMarker
function displayMarkers(){

   // esta variável vai definir a área de mapa a abranger e o nível do zoom
   // de acordo com as posições dos marcadores
   var bounds = new google.maps.LatLngBounds();

   // Loop que vai estruturar a informação contida em markersData
   // para que a função createMarker possa criar os marcadores
   for (var i = 0; i < markersData.length; i++){

      var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
      var nome = markersData[i].nome;
      var morada1 = markersData[i].morada1;
      var morada2 = markersData[i].morada2;
      var codPostal = markersData[i].codPostal;

      createMarker(latlng, nome, morada1, morada2, codPostal);

      // Os valores de latitude e longitude do marcador são adicionados à
      // variável bounds
      bounds.extend(latlng);
   }

   // Depois de criados todos os marcadores
   // a API através da sua função fitBounds vai redefinir o nível do zoom
   // e consequentemente a área do mapa abrangida.
   map.fitBounds(bounds);
}

// Função que cria os marcadores e define o conteúdo de cada Info Window.
function createMarker(latlng, nome, morada1, morada2, codPostal){
   var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      title: nome
   });

   // Evento que dá instrução à API para estar alerta ao click no marcador.
   // Define o conteúdo e abre a Info Window.
   google.maps.event.addListener(marker, 'click', function() {

      // Variável que define a estrutura do HTML a inserir na Info Window.
      var iwContent = '<div id="iw_container">' +
            '<div class="iw_title">' + nome + '</div>' +
         '<div class="iw_content">' + morada1 + '<br />' +
         morada2 + '<br />' +
         codPostal + '</div></div>';

      // O conteúdo da variável iwContent é inserido na Info Window.
      infoWindow.setContent(iwContent);

      // A Info Window é aberta.
      infoWindow.open(map, marker);
   });
}