CODEWITHSUNDEEP
node.jsmongodbgoogle-mapsexpressmongoose
Sarvesh Kulkarni
Sarvesh Kulkarni

Reputation: 981

Displaying user information on Google Map on click of the location using node js, express and mongodb

I am doing a small project which takes user information like name, age, location etc and display it on the Google map on click of that location.

I have completed the first part i.e., taking user information using node js, express and Mongo db.

I am not understanding how to go to next part and display that information on Google maps on click of that location.

Any tutorial or pointers would be helpful on how to go forward. Thanks.

Upvotes: 2

Views: 977

Answers (1)

sBanda
sBanda

Reputation: 379

If you are asking how to display markers on webpage you might want to check google documentation:

  • To create a marker on map documentation is here, also if you want to add a custom marker image sample is here.
  • To display the information on the google maps on marker sample here.

I'm assuming you are storing the marker information in your DB, so you can retrieve it from there, just create a schema for marker and markerinfo.

Way to add a marker to map with onClick event:

map.addListener('click', function(e) {
    placeMarker(e.latLng, map);
});

function placeMarker(position, map) {
    var marker = new google.maps.Marker({
        position: position, // {lat: -100.000, lng: 100.000};
        map: map
    });
    map.panTo(position);
}

Getting marker from express api with jQuery:

$.getJSON("/api/marker/1", function(json) {

placeMarker(json,map);

});

Ping me if you have questions;

Good luck;

Upvotes: 1

Related Questions