Creating Points in Google Maps with PHP Data

Question

What I need

I need that through PHP I receive locations and can mark them as points in Google Maps.

What I did

I created a part in Ajax to call the PHP script that does the query and returns the json. It receives the data. He’s adding the dots on the map, but when I click on one of them he doesn’t open the box with the information.

JS

var map;
var idInfoBoxAberto;
var infoBox = [];
var markers = [];
var localizacao = [];
//var markerPonto = new google.maps.Marker({});
var markerPonto;
var contador = 0;
var l = 0;
var contentString;
var infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxWidth: 300
});

/*Método que inicia configurações iniciados do mapa*/
function initialize() {
    var latlng = new google.maps.LatLng(-23.5514565,-46.6224739);

    var options = {
        zoom: 6,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("mapa"), options);

    /*Novo parte - adiciona ponteiro geolocalizador(de acordo com as coordenadas informadas em 'latlng'*/
    geocoder = new google.maps.Geocoder();

    marker = new google.maps.Marker({
        map: map,
        draggable: true,
    });

    marker.setPosition(latlng);

    /*Parte de loop com banco de dados*/
    $.ajax({
        url : 'verificaAjax.php',
        success : function(msg){
            if (msg.status == 0) {
                msg.errorMsg.forEach(ShowResults);
                //JSON.parse(msg.errorMsg).forEach(ShowResults);

            }
        },
        error:function (xhr, ajaxOptions, thrownError) {
            alert("Erro no Processamento dos Dados. Entre em contato com o setor de Tecnologia e informe a mensagem abaixo:\n"+xhr.responseText);
        }

    });

}

// Função para retornar os valores
function ShowResults(value, index, ar) {
    contentString = '<h2>'+value['razao_social']+'</h2>';

    localizacao.push({
        nome: value['razao_social'],
        latlng: new google.maps.LatLng(value['latitude'],value['longitude'])
    });


    /*
    markerPonto.position(localizacao[l].latlng);
    markerPonto.icon('img/marcador.png');
    markerPonto.map(map);
    markerPonto.title(localizacao[l].nome);
    */


    markerPonto = new google.maps.Marker({
        position: localizacao[l].latlng,
        icon: 'img/marcador.png',
        map: map,
        title: localizacao[l].nome
    });

    google.maps.event.addListener(markerPonto, 'click', function() {
        infowindow.open(map,v);
    });

    ++l;


}

PHP

<?php
    header('Content-type: application/json;');
    require('bd.php');

    $bancoDeDados = new Bd();

    //Armazena o resultado
    $mensagemResultado = array("status" => 1, "errorMsg" => array());

    //Obtem todos os resultados de pontos de entrega
    $resultadoConsulta = $bancoDeDados->selectPontos();
    if (count($resultadoConsulta) > 0) {
        $mensagemResultado["status"] = 0;
        $mensagemResultado["errorMsg"] = array_merge($mensagemResultado["errorMsg"],$resultadoConsulta);
    }

    echo json_encode($mensagemResultado);

Answer 1

I’m assuming that:

• On the map, only one box should remain open, the infowindow (I mean, by clicking another marker closes the infowindow and re-opens in the new location)

• The social reason can be very long

I made the following changes to the map to show the box when a marker is clicked.

I took the initial definition of content of the box because it will be replaced after.

var infowindow = new google.maps.InfoWindow({
    // content: contentString,   
    maxWidth: 300
});

Add the keyword var before the markerPonto (without this var, the markerPonto turns global variable), and we want a separate for each addListener.

var markerPonto = new google.maps.Marker({
    ...

Finally, for each listener, you need to create a new scope to remember the value of the Social Reason. For this I use an anonymous function. (functions create new scopes in Javascript). Without using it, would appear the same value, the last, in all boxes.

  (function(contentString) {
    google.maps.event.addListener(markerPonto, 'click', function() {
      infowindow.setContent('<div style="line-height: 1.35;">' + contentString + '</div>');
      infowindow.open(map, markerPonto);
    });
  })(contentString);

The addition of line-height is to avoid a problem I found while testing. Without it, a scrollbar appeared inside the box.

I faked the part about pulling data by simply calling ShowResults :

ShowResults({'razao_social': 'Carlos',
           'latitude': -23.44,
           'longitude': -43.22,
          });

See demonstration on Jsfiddle