Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
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>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
>
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>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>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(...
>
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
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(...
// continuação...
// continuação...