What's the best way to retrieve information from Mongodb in order to generate a map marker?

Question

What's the best way to retrieve information from Mongodb in order to generate a map marker?

I have a map where I need to place markers. I've created a collection in MongoDB and have a sample data set ready for the marker. However, I am having trouble retrieving the data and actually creating the marker on the map.

The Map

Meteor.startup(function() {  
        GoogleMaps.load();
      });

      Template.map.helpers({  
        mapOptions: function() {
          if (GoogleMaps.loaded()) {
            return {
              center: new google.maps.LatLng(-37.8136, 144.9631),
              zoom: 8
            };
          }
        }
      });

      Template.map.helpers({
        marker: function() {
          return MarkerData.find();
         }
      });

Creating Markers

for (var i = 0; i < MarkerData.length; i++) {
        var lat = {{ lat }}
        var lng = {{ lng }}
        var title = {{ title }}
        var address = {{ address }}
        var url = {{ url }}
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat, lng),
          map: map,
          title: title,
          animation: google.maps.Animation.DROP,
        });
      }

My Collection

MarkerData = new Mongo.Collection('markerdata');

Data within the Collection

if (MarkerData.find().count() === 0) {
        MarkerData.insert({
          lat: 34.200659,
          lng: -118.519986,
          title: 'Extensions Plus HQ',
          address: '17738 Sherman Way Reseda, CA 91335',
          url: 'http://extensionsplus.com'
        }); 
      }

I will continue adding more data into the collection. This is just a test to ensure the code works properly.

javascript mongodb google-maps meteor

Answer 1

Answer №1

Fortunately, I recently included a similar feature in an application. Working with Meteor has shown me that adding a collection of markers to a Google map can be tricky, especially with around 20 markers. To address this issue, I have implemented a 500ms delay between each rendering, which adds complexity to the code. Below is the updated and functional code based on your requirements:

Template.map.onCreated(function () {
  var self = this;

  // Initialize the map
  self.state = new ReactiveDict('myTemplate.state');
  self.state.set('mapMarkers', []);

  // Set up the map
  GoogleMaps.ready('myMap', function (map) {
    self.state.set('mapReady', true);
  });
});

Template.map.onRendered(function(){
  var self = this;
  // Add markers to the UI when ready
  // Note: Google Maps may not handle adding all markers at once properly, leading to errors.
  // We push markers to an array first and then render them separately with a delay using autorun.
  GoogleMaps.ready('myMap', function onMapReady(map) {
    // Setting up dependencies
    var isMapReady = self.state.get('mapReady');
    var hasData = !!MarkerData.findOne();
    var isGoogleDefined = typeof(google) !== 'undefined';
    var theMarkers = MarkerData.find({}, {sort: {state:1}});
    var allMarkers = [];
    var infoWindows = [];

    if ( isMapReady && hasData && isGoogleDefined ) {
      var markers = theMarkers.fetch();

      _.each(markers, function (marker, i, cursor) {
        var latitude = marker.lat;
        var longitude = marker.lng;
        var latlng = new google.maps.LatLng(latitude, longitude);

        // Building the info window for marker details
        infoContent = '<strong>' + marker.title + '</strong>' +'<br/>' + marker.address;
        
        infoWindow = new google.maps.InfoWindow({
          content: infoContent,
          disableAutoPan: true
        });

        // Creating the marker to place on the map
        marker = new google.maps.Marker({
          position: latlng
        });

        // Adding the marker to the UI state
        allMarkers.push(marker);
        infoWindows.push(infoWindow);
        self.state.set('mapMarkers', markers);
      });
    }

    self.autorun(function () {
      var markerLength = allMarkers.length;
      var targetLength = theMarkers.count();

      if ( markerLength === targetLength ) {
        _.each(allMarkers, function( marker, index, list ){
          Meteor.setTimeout(function(){
            var mapInstance = GoogleMaps.maps.myMap.instance;

            // Placing the marker on the map
            marker.setMap(mapInstance);
            
            google.maps.event.addListener(marker, 'click', function () {
              infoWindows[index].open(mapInstance, marker);
            });
            
            google.maps.event.addListener(marker, 'mouseout', function () {
              infoWindows[index].close();
            });
          }, 500);
        });
      }
    });
  });
});

Template.map.helpers({
  mapOptions: function () {
    if (GoogleMaps.loaded()) {
      return {
        center: new google.maps.LatLng(-37.8136, 144.9631),
        zoom: 8
      };
    } else {
      return null;
    }
  },
  allMarkers: function () {
    return MarkerData.find();
  }
});

Answer 2

Fortunately, I recently included a similar feature in an application. Working with Meteor has shown me that adding a collection of markers to a Google map can be tricky, especially with around 20 markers. To address this issue, I have implemented a 500ms delay between each rendering, which adds complexity to the code. Below is the updated and functional code based on your requirements:

Template.map.onCreated(function () {
  var self = this;

  // Initialize the map
  self.state = new ReactiveDict('myTemplate.state');
  self.state.set('mapMarkers', []);

  // Set up the map
  GoogleMaps.ready('myMap', function (map) {
    self.state.set('mapReady', true);
  });
});

Template.map.onRendered(function(){
  var self = this;
  // Add markers to the UI when ready
  // Note: Google Maps may not handle adding all markers at once properly, leading to errors.
  // We push markers to an array first and then render them separately with a delay using autorun.
  GoogleMaps.ready('myMap', function onMapReady(map) {
    // Setting up dependencies
    var isMapReady = self.state.get('mapReady');
    var hasData = !!MarkerData.findOne();
    var isGoogleDefined = typeof(google) !== 'undefined';
    var theMarkers = MarkerData.find({}, {sort: {state:1}});
    var allMarkers = [];
    var infoWindows = [];

    if ( isMapReady && hasData && isGoogleDefined ) {
      var markers = theMarkers.fetch();

      _.each(markers, function (marker, i, cursor) {
        var latitude = marker.lat;
        var longitude = marker.lng;
        var latlng = new google.maps.LatLng(latitude, longitude);

        // Building the info window for marker details
        infoContent = '<strong>' + marker.title + '</strong>' +'<br/>' + marker.address;
        
        infoWindow = new google.maps.InfoWindow({
          content: infoContent,
          disableAutoPan: true
        });

        // Creating the marker to place on the map
        marker = new google.maps.Marker({
          position: latlng
        });

        // Adding the marker to the UI state
        allMarkers.push(marker);
        infoWindows.push(infoWindow);
        self.state.set('mapMarkers', markers);
      });
    }

    self.autorun(function () {
      var markerLength = allMarkers.length;
      var targetLength = theMarkers.count();

      if ( markerLength === targetLength ) {
        _.each(allMarkers, function( marker, index, list ){
          Meteor.setTimeout(function(){
            var mapInstance = GoogleMaps.maps.myMap.instance;

            // Placing the marker on the map
            marker.setMap(mapInstance);
            
            google.maps.event.addListener(marker, 'click', function () {
              infoWindows[index].open(mapInstance, marker);
            });
            
            google.maps.event.addListener(marker, 'mouseout', function () {
              infoWindows[index].close();
            });
          }, 500);
        });
      }
    });
  });
});

Template.map.helpers({
  mapOptions: function () {
    if (GoogleMaps.loaded()) {
      return {
        center: new google.maps.LatLng(-37.8136, 144.9631),
        zoom: 8
      };
    } else {
      return null;
    }
  },
  allMarkers: function () {
    return MarkerData.find();
  }
});

What's the best way to retrieve information from Mongodb in order to generate a map marker?

Answer №1

Similar questions

Filtering records by a joined association in Rails using Ajax

Unresolved styles in React component linked to styles.css file

The Facebook messenger checkbox plugin does not appear to be displaying correctly

Revamp the layout of the lower HTML video menu

Struggles with integrating a disappearing navigation bar when scrolling - JavaScript

Once this code is executed, Javascript ceases to function

passport.js and express.js working together to seamlessly redirect users back to the original page after completing oauth authentication

Unable to locate the index.js entry file in React Native

Zone.js error: Promise rejection caught

Leveraging NextJS14 Static Site Generation (SSG) for seamless Authentication with Clerk

Breaking free from JavaScript[/CSS] within <script>[/<style>] tags: Discovering the flaws in the current system

Utilizing React Router V4 to Render Dual Components on a Single Route

Locate an element by filtering and finding two distinct values using the .eq() method

Issues with excessive firing of JQuery blur and hide functions

Utilizing a function to populate an attribute using .attr() in d3

The directive attribute in AngularJS fails to connect to the directive scope

Unable to launch meteor application because of mongo's unexpected exit

What steps do I need to take to ensure the progress bar extends all the way to the end of the sn

Utilize the onChangeText function in React Native to filter out each individual value within a nested array

Troubleshooting logic errors and repetitive functions in AngularJS