formatting infowindow google maps

34 views Asked by At

I am following a google map tutorial on youtube. All is well until I try to display the stored data on the infowindow. In the code below latitude and longitude are displayed in one line concatenated. I would like to have them in separate lines. I have tried a number of html tags as well as '/n'. No joy. Unfortunately, the tags are also displayed along with the data. Any clues would be appreciated.

  function showAllColleges(allData) {
   var infoWind = new google.maps.InfoWindow;
   Array.prototype.forEach.call(allData, function(data){
    var content = document.createElement('div');
    var strong = document.createElement('strong');
    strong.textContent = data.lat + data.lng ;
    content.appendChild(strong);
1

There are 1 answers

0
Liparia Splendens On

for anybody that is having the same problem I have cobbled the solution from a number of entries in stackoverflow.

Each data.element from the database can be displayed in the infowindow. Here I have shown how to display dacicost, lat and lng

function showAllColleges(allData) {
var infoWind = new google.maps.InfoWindow;
Array.prototype.forEach.call(allData, function(data){

var content = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent =data.dacicost
content.appendChild(strong);

content.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = data.lat
content.appendChild(text);

content.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = data.lng
content.appendChild(text);

There must be a more efficient way of doing this but, at last, this works.