4

I decided this week that I'd like to learn Node.js (I'm not a programmer). I've been having a lot of fun with it so far but I'm stuck at the moment.

I've created a basic app using Express. Let's say I have a route /locations. I set my get request to render the related view and to find (using Mongoose's .find method) all docs in my location model. I know I can pass the docs to the view like this:

app.get('/locations', function(req, res) {
    Location.find({}, function(err, docs) {
        res.render('locations/index', {
            title: 'Locations',
            user: req.user,
            docs: docs  
        });
   });
});

I can then, for example, access the results in the (Jade) view and list them by doing something like:

if(docs.length)
    each location in docs
        p #{location.name} is at #{location.coordinates}

I want to add all these locations (using coordinates stored with each 'location') to a Google Map. I have an example map displaying on the view using the following script in the head, taken from the Google Maps API documentation.

function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var mapOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    }
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    var marker = new google.maps.Marker({
        position: myLatlng,
        title: "Hello World!"
    });
    marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

I figured where the marker variable is created then set I could loop through my 'docs' and create and set a marker for each location stored in my database. That said, I'm too new to this and I can't seem to figure out how to do it as the script in the head can't access the 'docs' that I've passed to the view.

Any advice? Thanks in advance, it's much appreciated.

Darryl Young
  • 2,145
  • 2
  • 20
  • 19

1 Answers1

7

I JSON.stringify() any objects that my client scripts need and insert it as HTML5 data-whatever attributes.

For example:

//app.js
app.get('/map', function(req, res){
  var data = {
    id: '1234',
    LL: {
      lat: 42.1,
      lng: 80.8,
  };
  res.locals.docsJSON = JSON.stringify([data]);
  res.render('locations/index');
});

//jade
!!!
html
  body(data-locations=locals.docsJSON)
  script
    var docs = JSON.parse($('body').attr('data-locations'));
    console.log(docs[0].LL);
Plato
  • 10,812
  • 2
  • 41
  • 61
  • Thanks for the advice, it's much appreciated. Sorry it took so long to get back and accept but it's done now at least. I used your idea and attached the locations in a data attribute on the div that contains the map. Once I've looped through the data and created a pin for each location I removed the data attribute. There wasn't anything sensitive in there but it's a bit cleaner and I still have the locations on the view, but in an array I created prior to rendering the map. Thanks again! – Darryl Young Aug 11 '13 at 10:47
  • @Plato how can i add multiple markers on a map? Do i need AJAX? I'm using HTML/EJS not jade. – Abhishek Dey Mar 24 '15 at 05:47
  • @AbhishekDe to manipulate the map in the browser you somehow need to get the array of data to the client javascript. this answer is just an example of transporting the array from a server to client js. once you have the array, create and add the markers one by one as in OP's post – Plato Mar 24 '15 at 15:05