Boas,
Primeiro de começar a explicar o meu problema quero que saibam que sou novo nisto. Eu trabalho bem com HTML, CSS e percebo algumas coisas de javascript e de php mas não sou nenhum expert xD
O meu problema é o seguinte... eu quero que no mapa apareça os pontos que se vai adicionando à base de dados, mas como não sei quantos pontos poderá haver tenho que utilizar o while (penso eu).
Vou vos mostrar o código que tenho feito, onde vai buscar os dados a bd e como tenho o while dentro do javacript (que não sei se é possível ou não).
obs: quando tento executar o código com os dois whiles que tenho o mapa não funciona, mas quando os tiro já funciona mas como é claro sem os pontos porque esses estão na bd.
PHP e Javascript:
Código :
HTML (body):
Código :
Primeiro de começar a explicar o meu problema quero que saibam que sou novo nisto. Eu trabalho bem com HTML, CSS e percebo algumas coisas de javascript e de php mas não sou nenhum expert xD
O meu problema é o seguinte... eu quero que no mapa apareça os pontos que se vai adicionando à base de dados, mas como não sei quantos pontos poderá haver tenho que utilizar o while (penso eu).
Vou vos mostrar o código que tenho feito, onde vai buscar os dados a bd e como tenho o while dentro do javacript (que não sei se é possível ou não).
obs: quando tento executar o código com os dois whiles que tenho o mapa não funciona, mas quando os tiro já funciona mas como é claro sem os pontos porque esses estão na bd.
PHP e Javascript:
Código :
<script src="jquery-1.11.0.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif]<script>
$(document) .ready(function(){
if( navigator.geolocation )
navigator.geolocation.getCurrentPosition(success, fail);
else
$("map").html("HTML5 Not Supported");
});[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif]function success(position)
{
var googleLatLng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var mapOtn = {
zoom : 13,
center : googleLatLng,
mapTypeId: google.maps.MapTypeId.ROAD
}[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif]var Pmap = document.getElementById("map");
var map = new google.maps.Map(Pmap, mapOtn);
//aqui começa os popups de todos os eventos
//LOCALIZAÇÃO ACTUAL
addMarkerLocalizacao(map, googleLatLng, "Minha Localização");
//TODAS AS LOCALIZAÇÕES DA BASE DE DADOS
<?php
$result = mysql_query("SELECT * FROM eventos");
while($row = mysql_fetch_assoc($result)){
echo "
addMarker".$row['id']."(map, ".$row['id'].", '".$row['conteudo_evento']."');
";
}
?>
//aqui acaba os popups de todos os eventos
}[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif]//aqui é o point da minha localização actual
function addMarkerLocalizacao(map, googleLatLng, content) {
var markerOptn = {
position : googleLatLng,
map : map,
animation : google.maps.Animation.BOUNCE
};
var marker = new google.maps.Marker(markerOptn);
var infoWindow = new google.maps.InfoWindow ({ content: content,
position: googleLatLng});
google.maps.event.addListener(marker, "click", function(){
infowindow.open(map);
});
}[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif]//aqui começa os points de todos os eventos
//TODAS LOCALIZAÇÕES DA BASE DE DADOS
<?php
$result = mysql_query("SELECT * FROM eventos");
while($row = mysql_fetch_assoc($result)){
echo "
var ".$row['id']." = new google.maps.LatLng(".$row['cordenadas'].");
function addMarker".$row['id']."(map, googleLatLng, content) {
var markerOptn = {
position : ".$row['id'].",
map : map,
animation : google.maps.Animation.DROP,
};
var marker = new google.maps.Marker(markerOptn);
var infoWindow = new google.maps.InfoWindow ({ content: content,
position: ".$row['id']."});
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map);
});
}
";
}
?>[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif]//aqui acaba os points de todos os eventos[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif]//function fail - quando a função dá erro
function fail(error)
{
var errorType = {
//mother of all errors :P
0: "Unknown Error",
1: "Permission denied by the user",
2: "Position of the user not available",
3: "Request timed out"
};
var errMsg = errorType[error.code];
if(error.code == 0 || error.code == 2) {
errMsg = errMsg+" - "+error.message;
}
$("map").html(errMsg);
}
</script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif]<script>
$(document) .ready(function(){
if( navigator.geolocation )
navigator.geolocation.getCurrentPosition(success, fail);
else
$("map").html("HTML5 Not Supported");
});[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif]function success(position)
{
var googleLatLng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var mapOtn = {
zoom : 13,
center : googleLatLng,
mapTypeId: google.maps.MapTypeId.ROAD
}[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif]var Pmap = document.getElementById("map");
var map = new google.maps.Map(Pmap, mapOtn);
//aqui começa os popups de todos os eventos
//LOCALIZAÇÃO ACTUAL
addMarkerLocalizacao(map, googleLatLng, "Minha Localização");
//TODAS AS LOCALIZAÇÕES DA BASE DE DADOS
<?php
$result = mysql_query("SELECT * FROM eventos");
while($row = mysql_fetch_assoc($result)){
echo "
addMarker".$row['id']."(map, ".$row['id'].", '".$row['conteudo_evento']."');
";
}
?>
//aqui acaba os popups de todos os eventos
}[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif]//aqui é o point da minha localização actual
function addMarkerLocalizacao(map, googleLatLng, content) {
var markerOptn = {
position : googleLatLng,
map : map,
animation : google.maps.Animation.BOUNCE
};
var marker = new google.maps.Marker(markerOptn);
var infoWindow = new google.maps.InfoWindow ({ content: content,
position: googleLatLng});
google.maps.event.addListener(marker, "click", function(){
infowindow.open(map);
});
}[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif]//aqui começa os points de todos os eventos
//TODAS LOCALIZAÇÕES DA BASE DE DADOS
<?php
$result = mysql_query("SELECT * FROM eventos");
while($row = mysql_fetch_assoc($result)){
echo "
var ".$row['id']." = new google.maps.LatLng(".$row['cordenadas'].");
function addMarker".$row['id']."(map, googleLatLng, content) {
var markerOptn = {
position : ".$row['id'].",
map : map,
animation : google.maps.Animation.DROP,
};
var marker = new google.maps.Marker(markerOptn);
var infoWindow = new google.maps.InfoWindow ({ content: content,
position: ".$row['id']."});
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map);
});
}
";
}
?>[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif]//aqui acaba os points de todos os eventos[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif]//function fail - quando a função dá erro
function fail(error)
{
var errorType = {
//mother of all errors :P
0: "Unknown Error",
1: "Permission denied by the user",
2: "Position of the user not available",
3: "Request timed out"
};
var errMsg = errorType[error.code];
if(error.code == 0 || error.code == 2) {
errMsg = errMsg+" - "+error.message;
}
$("map").html(errMsg);
}
</script>
HTML (body):
Código :
<div id="map"></div>