Marcadores de mapas de Google con javascript y PHP

I am building an application that has a database of people's names, info about them and their current location. I managed to create a maps using Google maps javascript API, and mark your current location. however, i cant seem to be able to use a PHP loop to place a marker with an info window for every person in my database. Here is my code:

    lat = position.coords.latitude;
lon = position.coords.longitude;

//init map
myOptions = {
   center: new google.maps.LatLng(lat, lon),
   zoom: 15,
   mapTypeId: google.maps.MapTypeId.ROADMAP
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var image = '';
var loca = new google.maps.LatLng(lat, lon);
var currnetLocationMarker = new google.maps.Marker({
position: loca,
map: map,
animation: google.maps.Animation.DROP,
icon: image
var contentString;
var marklatlng;
$query = mysql_query("SELECT * FROM gigs");
$i = 0;
while($data = mysql_fetch_array($query))
echo "
contentString = 'Name: <b>" . $data['name'] . "</b><br> Info: <b>" . $data['desc'] . "    </b>';
var infowindow" . $i . " = new google.maps.InfoWindow({
content: contentString
marklatlng = new google.maps.LatLng(" . $data['lat'] . ", " . $data['lng'] . ");
var marker" . $i . " = new google.maps.Marker({
position: markLatlng,
map: map,
google.maps.event.addListener(marker" . $i . ", 'click', function() {
infowindow" . $i . ".open(map,marker" . $i . ");


preguntado el 10 de marzo de 12 a las 13:03

2 Respuestas

It would be better to json_encode your data, pass that to a variable in javascript, and then loop over it using javascript. Even better would be using AJAX requests to fetch the data.

function fetchGigs() {
  $gigs = new Array();
  $query = mysql_query("SELECT * FROM gigs");
  while($gig = mysql_fetch_array($query)) {
    $gigs[] = $gig; 
  return $gigs;

Y en tu javascript:

// your other code...
var gigs = <?php echo json_encode(fetchGigs()); ?>

var createMarkerAt = function(lat, lng) {
  var latLng, marker;
  latLng = new google.maps.LatLng(lat, lng);
  marker = new google.maps.Marker({
    position: latLng,
    map: map,
  return marker;

var createMarkerForGig = function (gig) {
  var marker, info;
  marker = createMarkerAt(, gig.lng);
  info = new google.maps.InfoWindow({
    content: 'Name: <b>"' + + '"</b><br>Info: <b>"' + gig.desc + '"</b>'
  google.maps.event.addListener(marker, 'click', function() {, marker);
  return marker;

// Add markers for all the gigs.
var len = gigs.length;
for (var i = 0; i<len; i++) {

Documentación para php_encode()

respondido 10 mar '12, 21:03

Sorry, im not very familiar with javascript. can you give me a code example please? - arielschon12

Working on it, but if your going to try this with a big table and without ajax, you're going to get a very slow website.. - mcls

That should work. But I seriously recommend using AJAX and PDO instead of mysql_query cosas. - mcls

For some reason this does not work, it gives back a white screen.. maybe a problem in the loop? - arielschon12

Any errors you can see? Make sure to turn on error_reporting in php (error_reporting(E_ALL | E_STRICT); ini_set("display_errors", 1); - mcls

When I wrote a similar application I used php to write the string of a javascript array representing my data and then used straight js once i got to building strings for the api. However, since I have discovered how easy it is to write a PHP powered API to return JSON objects of my database I just use jQuery to query my homebrew API for the json data and then work with that. It truly is incredibly easy to do with SLIM. Here is a link

respondido 10 mar '12, 14:03

Sorry, i just didn't get what you are talking about. I just want to loop some javascript code over and over again untill i did it for every piece of data in my db. - arielschon12

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.