0

I am trying to learn how to load the Google map markers' location from Mongodb using Node.js. I managed to retrieve locations from the database and console.log them. I defined a variable in a node module so I can directly refer to that in the my google map script and I have also tried to use the answer in this question (How can I add markers to Google Maps using Node.js/Express/MongoDB?) but I don't want to have them in the body of the page, I want to use the variable directly as marker's location in google map script but the map doesn't show anything. Here is the code I have in my app.js

var data = require ("./public/assets/js/data.js");
app.get('/test', function(req, res){
console.log (data)
 res.render('ViewMode');
});

this is my data.js file:

var mongoose = require ('mongoose');
var data = new Array();
 mongoose.model('stories').find({},function(err, companies) {
        for (var i = 0; i < companies.length; i++) {
        data[i] = JSON.stringify(companies[i].location);

            }
 });
module.exports = data;

and this is my Google map script:

<script src="assets/js/data.js"></script>

<script>

function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var mapOptions = {
    center: new google.maps.LatLng(53.467216, -2.233701),
    disableDoubleClickZoom: true, 
    zoom: 15,
  };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

var markers = [];
    for (var i = 0; i < 100; i++) {
      var location = data[i];
      var latLng = new google.maps.LatLng(location);
      var marker = new google.maps.Marker({
        position: latLng
      });
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);
  }

google.maps.event.addDomListener(window, 'load', initialize);
</script>

I would really appreciate it if you let me know where am doing wrong. Thanks

Community
  • 1
  • 1
MSH
  • 73
  • 1
  • 3
  • 11
  • What does the contents of `data` look like? I'm pretty sure your problem is that you have your latlng coordinates as strings, causing this to fail: `var latLng = new google.maps.LatLng(location);` You might need to parse the two separate lat and lng values from the `location` variable – duncan Jun 10 '14 at 11:05
  • Thanks for your answer. Yeah that's right I have latLng as a string. my data looks like this: [ '"(53.464111624815494, -2.2338683903217316)"', '"(53.46692188087774, -2.2315509617328644)"', '"(53.46413717343583, -2.2330529987812042)"', '"(53.4639838814831, -2.235284596681595)"', '"(53.464034978862195, -2.232538014650345)"', '"(53.466385391816004, -2.2270019352436066)"' ] I will try with separate ones to see whether it works or not now – MSH Jun 10 '14 at 11:43

1 Answers1

0

So if your data array looks like this:

[ 
    '"(53.464111624815494, -2.2338683903217316)"', 
    '"(53.46692188087774, -2.2315509617328644)"', 
    '"(53.46413717343583, -2.2330529987812042)"', 
    '"(53.4639838814831, -2.235284596681595)"', 
    '"(53.464034978862195, -2.232538014650345)"', 
    '"(53.466385391816004, -2.2270019352436066)"' 
]

Then each instance of location looks like (including the " characters):

"(53.464111624815494, -2.2338683903217316)"

So you'll need to parse out the individual latitude and longitude values from that string. I'd try something like:

<script>
    var data = [ 
        '"(53.464111624815494, -2.2338683903217316)"', 
        '"(53.46692188087774, -2.2315509617328644)"', 
        '"(53.46413717343583, -2.2330529987812042)"', 
        '"(53.4639838814831, -2.235284596681595)"', 
        '"(53.464034978862195, -2.232538014650345)"', 
        '"(53.466385391816004, -2.2270019352436066)"' 
    ];

    for (var i = 0; i < data.length; i++) {
        var mylocation = data[i];

        var lat = mylocation.replace(/^\"\(([0-9-.]*),.*/g, "$1");
        var lng = mylocation.replace(/.*,\s*([0-9-.]*)\)\"$/g, "$1");
        var latLng = new google.maps.LatLng(lat, lng);
    }
</script>

NB: I'd also be very wary of using a variable called location - this is likely to lead to confusion and possible conflict with the location object.

duncan
  • 31,401
  • 13
  • 78
  • 99
  • Great!!, yeah that's true the data has these"" in it. I did all you said. I changed location to place but still It can't upload the markers. I have two questions: 1- is it necessary to stringify the data? and 2- as it works when I define the data as it is, am sure there is something wrong with the calling data variable in my google map javascript. my database will be updated all the time so I want the script to get the data variable from the database. it seems like just calling data variable which is defined in the data.js file in the google map script doesn't work. so how I can fix this one? – MSH Jun 10 '14 at 13:38
  • 1
    Not sure I understand what you're asking. All I know is that the LatLng constructor expects two floating point numbers. If your data comes from a string (e.g. even just `var lat = "12.345";`) you need to then use parseFloat() on it to make sure it's understood by the Google API – duncan Jun 10 '14 at 13:44
  • Also it might be worth updating your question with what the contents of your `companies` array looks like – duncan Jun 10 '14 at 13:45
  • now I understand it. by my second question I meant that in your answer var data is defined by all it's content('"(53.464111624815494, -2.2338683903217316)",.....) but I want the variable 'data' to be updated when any new marker is added to my database. so I tried to make this connection (between the script I have for my google map api and my database) by defining a module (data.js) and using the variable data which is defined in it in the script but seems like this doesn't work. how I should change my app.js or data.js codes to achieve this connection? – MSH Jun 10 '14 at 13:56
  • Sounds like you need to make constant AJAX requests to get a new copy of `data` when it changes. I don't know if MongoDB or Node can take care of this for you – duncan Jun 10 '14 at 14:16
  • Okay great, I will have a look on it, thanks for your answer. – MSH Jun 10 '14 at 14:55