Upload Json to Google Maps

Question

I am drawing a Poligono on the google map, I managed, but as it is big it got a very repetitive code that I would like to isolate in one . json but could not.

I tried to do something simple with Jquery loading the file and putting it in a variable and tried with the Geojson google, but also did not work.

The direct code in . js works but wanted to isolate.

today is like this:

    var vareaRegiao = [
    { lat: -23.211000, lng: -46.71100 },
    { lat: -23.204000, lng: -46.70700 },
    { lat: -23.205000, lng: -46.70300 },
    { lat: -23.209000, lng: -46.70400 },
    { lat: -23.207000, lng: -46.70000 },
    { lat: -23.209000, lng: -46.69200 },
    { lat: -23.206000, lng: -46.68700 },
    { lat: -23.213000, lng: -46.66800 },
    { lat: -23.206000, lng: -46.67000 },
    { lat: -23.196000, lng: -46.65900 },
    { lat: -23.190000, lng: -46.66200 },
    { lat: -23.169000, lng: -46.65400 },
    { lat: -23.165000, lng: -46.65400 },
    { lat: -23.163000, lng: -46.65400 },
    { lat: -23.155000, lng: -46.66400 },
    { lat: -23.129000, lng: -46.67200 },
// e mais 200 linhas parecidas...
 ];

    var varea_atibaia_monta = new google.maps.Polygon({
        paths: vareaRegiao,
        strokeColor: '#FF0000',
        strokeOpacity: 0.9,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.04
    });
    varea_atibaia_monta.setMap(map);
    //fim area atibaia

How do I make jquery read a json and put the content into the variable vareaRegiao ?

tried:

var vareaRegiao;
  $.getJSON(Pontos.json, function (data) {
vareaRegiao = data;
}

tried:

var vareaRegiao;
$.ajax({
   type: "GET",
   url: "/projto/Pontos.json,
   dataType: "json",
   success: function (data) {
           vareaRegiao = data;      
});

Most of the time it does not give error, but in debug it does not load the values.

UPDATE: I tried so:

var vareaRegiao;
$.ajax({
    type: "GET",
    url: "/scripts/coi/bordas.json",
    dataType: "json",
    success: function (data) {
        console.log(data);
        vareaRegiao = data;
        inicia_tempo_real(vareaRegiao);
    }
});


function inicia_tempo_real(vareaRegiao) {
    mapOptions = {
        center: new google.maps.LatLng(-23.120520, -46.546923),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    infoWindow = new google.maps.InfoWindow();
    map = new google.maps.Map($('#map_canvas')[0], mapOptions);


    //area
    var varea_atibaia_monta = new google.maps.Polygon({
        paths: vareaRegiao,
        strokeColor: '#FF0000',
        strokeOpacity: 0.9,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.04
    });
    varea_atibaia_monta.setMap(map);
    //fim area
}

My JSON:

[
    { "lat": -23.211000, "lng": -46.71100 },
    { "lat": -23.204000, "lng": -46.70700 },
    { "lat": -23.205000, "lng": -46.70300 },
    { "lat": -23.209000, "lng": -46.70400 },
    { "lat": -23.207000, "lng": -46.70000 },
    { "lat": -23.209000, "lng": -46.69200 },
    { "lat": -23.206000, "lng": -46.68700 },
    { "lat": -23.213000, "lng": -46.66800 },
    { "lat": -23.206000, "lng": -46.67000 },
    { "lat": -23.196000, "lng": -46.65900 }//removi algumas linhas
]

Answer 1

That’s what I told you to put the map initiation call on the success of ajax, and also pay attention when calling the library, in this example I used <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<div id="map" style="width: 400px; height: 400px;"></div>
<script>

    function initMap(vareaRegiao) {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 5,
            center: {lat: 24.886, lng: -70.268},
            mapTypeId: google.maps.MapTypeId.TERRAIN
        });

        var varea_atibaia_monta = new google.maps.Polygon({
            paths: vareaRegiao,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35
        });
        varea_atibaia_monta.setMap(map);
    }
    
    var vareaRegiao;
    $.ajax({
        type: "GET",
        url: "https://hacker-news.firebaseio.com/v0/item/8863.json?print=pretty", // isto é só uma coisa qualquer para este exemplo, troque pelo servico correto ("/projto/Pontos.json")
        dataType: "json",
        success: function (data) {
            vareaRegiao = [ // aqui entram os dados que realmente deseja, que vieram de /projto/Pontos.json
                {lat: 25.774, lng: -80.190},
                {lat: 18.466, lng: -66.118},
                {lat: 32.321, lng: -64.757},
                {lat: 25.774, lng: -80.190}
            ];
            initMap(vareaRegiao);
        }
    });
</script>

Example in JSFIDDLE

Answer 2

var vareaRegiao = $.getJSON("/projto/Pontos.json", function (json) {
    return json;
}

Make the result vareaRegiao[numero de chave].lat and vareaRegiao[numero de chave].lng

I’ll set an example:

$(document).ready(function() {

	$.getJSON('http://beta.json-generator.com/api/json/get/NkmG8_zBZ', function(json) {
		for (x=0; x<json.length; x++) {
          console.log('getjson>'+json[x].nome);
        }
	});

	$.ajax({
		type: 'get',
		url: 'http://beta.json-generator.com/api/json/get/NkmG8_zBZ',
		dataType : 'json',
		success: function(json) {
		  for (x=0; x<json.length; x++) {
            console.log('ajax>'+json[x].cidade);
          }
		},
		error: function(err) {
			console.log(err);
		}
	});
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>