Polyline no Google Maps com Array Json

Elnata COsta · Junho 2, 2014

Bom pessoal eu queria inserir polyline em meu google maps de a cordo com as coordenadas que são passadas pelo Json, fazendo um array com o jquery, porém não consigo fazer isso :( , segue o link do json:

http://voemercosul.com/v2/index.php/acars/getJson

Código do mapa:

function initialize(){
    var latlng = new google.maps.LatLng(0, 23);
    var myOptions = {
      zoom: 4,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var url = "http://voemercosul.com/v2/index.php/acars/getJson";
    var mypath = new Array();
        $.getJSON(url, function (data) {

            //  Parse the Linestring field into an array of LatLngs
            $.each(data.bindings, function(index, record) {
                line = JSON.parse(record.Linestring);
        //  Parse the array of LatLngs into Gmap points
        for(var i=0; i < line.length; i++){
        //Tokenise the coordinates
        var coords = (new String(line[i])).split(",");
                    mypath.push(new google.maps.LatLng(coords[4], coords[5]));
        }
                var polyline = new google.maps.Polyline({
                  path: mypath,
                  strokeColor: '#ff0000',
                  strokeOpacity: 1.0,
                  strokeWeight: 3
                });

                polyline.setMap(map);

            });

        });
    }

     google.maps.event.addDomListener(window, 'load', initialize);

Me ajudem pf. Grato :D

Snowden · Junho 3, 2014

// continuação...

$.getJSON('http://voemercosul.com/v2/index.php/acars/getJson').done(function( data ){

var mypath = new Array();

$.each( data.bindings, function(i, value){

mypath.push( new google.maps.LatLng(value.latitude, value.longitude) );

});

var polyline = new google.maps.Polyline({

path: mypath,

strokeColor: '#ff0000',

strokeOpacity: 1.0,

strokeWeight: 3

});

polyline.setMap(map);

});

// continuação...

Elnata COsta · Junho 4, 2014

Não funcionou mano, olha meu código como ficou, se você quiser testar aí, aparece o mapa normalmente, porém, não insere o polyline. :(

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
     #map_canvas {
        width: 1024px;
        height: 700px;
      }
</style>

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

<script type="text/javascript">

function initialize(){
    var latlng = new google.maps.LatLng(0, 23);
    var myOptions = {
      zoom: 4,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

   
  
      $.getJSON('http://voemercosul.com/v2/index.php/acars/getJson').done(function( data ){
var mypath = new Array();
	$.each( data.bindings, function(i, value){
		mypath.push( new google.maps.LatLng(value.latitude, value.longitude) );
	});
	
var polyline = new google.maps.Polyline({
	path: mypath,
	strokeColor: '#ff0000',
	strokeOpacity: 1.0,
	strokeWeight: 3
});
 
polyline.setMap(map);
});
    }

     google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

Snowden · Junho 5, 2014

function initialize(){
$.getJSON('SUA URL').done(function( data ){
	var myOptions = {
		zoom: 4,
		center: new google.maps.LatLng(
			data.bindings[0].latitude, 
			data.bindings[0].longitude
		),
		mapTypeId: google.maps.MapTypeId.ROADMAP
    }
	
    var map = new google.maps.Map(
		document.getElementById("map_canvas"), 
		myOptions
	);

	var mypath = new Array();
		$.each( data.bindings, function(i, value){
			mypath.push( 
				new google.maps.LatLng(
					value.latitude, 
					value.longitude
				)
			);
		});

	var polyline = new google.maps.Polyline({
		path: mypath,
		strokeColor: '#ff0000',
		strokeOpacity: 1.0,
		strokeWeight: 3
	}); 
	
	polyline.setMap(map);
});
}

NOTA:

essa função..

google.maps.event.addDomListener(window, 'load', initialize);

substitui essa

<body onload="initialize()">

ou vise e versa

Elnata COsta · Junho 5, 2014

function initialize(){
$.getJSON('SUA URL').done(function( data ){
	var myOptions = {
		zoom: 4,
		center: new google.maps.LatLng(
			data.bindings[0].latitude, 
			data.bindings[0].longitude
		),
		mapTypeId: google.maps.MapTypeId.ROADMAP
    }
	
    var map = new google.maps.Map(
		document.getElementById("map_canvas"), 
		myOptions
	);

	var mypath = new Array();
		$.each( data.bindings, function(i, value){
			mypath.push( 
				new google.maps.LatLng(
					value.latitude, 
					value.longitude
				)
			);
		});

	var polyline = new google.maps.Polyline({
		path: mypath,
		strokeColor: '#ff0000',
		strokeOpacity: 1.0,
		strokeWeight: 3
	}); 
	
	polyline.setMap(map);
});
}

NOTA:

essa função..

google.maps.event.addDomListener(window, 'load', initialize);

substitui essa

<body onload="initialize()">

ou vise e versa

Amigo, sou meio leigo em javascript mas olha meu código, identico ao seu mano, e não aparece mapa nem nada, fica tudo em branco.. :(

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polylines</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
// This example creates a 2-pixel-wide red polyline showing
// the path of William Kingsford Smith's first trans-Pacific flight between
// Oakland, CA, and Brisbane, Australia.

function initialize(){
$.getJSON('http://voemercosul.com/v2/index.php/acars/getJson').done(function( data ){

  
  
	var myOptions = {
		zoom: 6,
		center: new google.maps.LatLng(
			data.bindings[0].latitude, 
			data.bindings[0].longitude
		),
		mapTypeId: google.maps.MapTypeId.ROADMAP
    }
	
    var map = new google.maps.Map(
		document.getElementById("map_canvas"), 
		myOptions
	);
 
	var mypath = new Array();
		$.each( data.bindings, function(i, value){
			mypath.push( 
				new google.maps.LatLng(
					value.latitude, 
					value.longitude
				)
			);
		});
 
	var polyline = new google.maps.Polyline({
		path: mypath,
		strokeColor: '#ff0000',
		strokeOpacity: 1.0,
		strokeWeight: 3
	}); 
	
	polyline.setMap(map);
});
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Snowden · Junho 5, 2014

shuashuashua...

Na página de um ( CTRL + SHIFT + J )

No seu console, deve constar que seu acesso não ta sendo permitido..

Mais o script que postei acima funciona perfeitamente, para vê-lo funcionar, copie todo o código da página http://voe... cole no bloco de notas e salve como quiser e chame-o na url.

exemplo:

$.getJSON('arquivo-salvo.txt').done(...

Elnata COsta · Junho 5, 2014

shuashuashua...

Na página de um ( CTRL + SHIFT + J )

No seu console, deve constar que seu acesso não ta sendo permitido..

Mais o script que postei acima funciona perfeitamente, para vê-lo funcionar, copie todo o código da página http://voe... cole no bloco de notas e salve como quiser e chame-o na url.

exemplo:
$.getJSON('arquivo-salvo.txt').done(...

kkkkkkkk sinceramente não sei oq acontece, já coloquei tanto em localhost como no servidor e não funciona, olha aí o link do site http://voemercosul.com/acars.php, apareceu um tanto de coisa agora no console!! kkkkkk

Snowden · Junho 5, 2014

ERRO:

O elemento "map_canvas", não existe.

Troque essa linha:

document.getElementById("map_canvas"),

pro essa:

document.getElementById("map-canvas"), // <div id="map-canvas"></div>

outra.. já que a página da rodando online no mesmo domínio que a url requisitada no script pode por a url direto.

$.getJSON('http://voemercosul.com/v2/index.php/acars/getJson').done(...

Arquivado

Polyline no Google Maps com Array Json

Recommended Posts

Elnata COsta 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Snowden 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Elnata COsta 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Snowden 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Elnata COsta 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Snowden 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Elnata COsta 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Snowden 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Fóruns

Tempo Real

Informação importante