Create Your Own Google Map Using Mean Stack

Hi creators!

Today I discuss about “How to create the Own Google Map using Mean Stack.I will explain everything in my personal experience . It will cover step by step approach.So this article definitely help you to understand the google map concept .I don’t want to wait .lets go…..

Introduction:

Now a days every applications integrated with the google map.ex:(hotels apps,travel apps,etc…).I assure in this article help you much. Here you can add your locations edit your location for your web application. so it will provide the great service to you.

Concept Diagram:

How the google maps works?

The blow figure explain the overall structure of the google map flows.

concept fig-1

Pre Requirements:

the following things you must configure when we create the google map appliations:

Get the key from the Google map Developers site.

googlemap developer site for key generation

create yourproject

Enable the API key

copy the key That will configure in the fron end code.

generated key-fig-3

Install the Angular JS:

Do the following steps:

use this link for the angular Js configurations.

  • Install Node JS:

Install mongo DB

Now we set all the configuration perfectly .

Procedure for the creating the Project:

Keep follow the instructions carefully.

Overall project Strucure:

Google Mean App
-- server.js ( Express server file)
--------------------------------model.js (Mongoose Schema )
--------------------------------serverapi.js (create the backe end api operation)
-- public // Frontend
--------------------- index.html
---------------------operation files.html
---- js
------ app.js (include all the controllers files and link the HTML files)
create your angular controller files(.js)
---- –--------style.css
-- package.json

The app will be composed of three sections:

  1. A frontend handling what’s displayed to the user,
  2. A controller and factory for AJAX calls and maintaining the Google Map,
  3. A server and database for hosting user data

1.Front end Operations:(index.html)

The following things are important when you create the index.html file

  • Give the link to Google Map:
  • <! — Google Maps API →

<script async defer src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyDrn605l7RPadiwdzsOlRw9O28lxfYBJ6s&callback=initMap"

type=”text/javascript”></script>

  • Give the lik to Angular JS Contoller Files

<script src=”js/app.js”></script>

<script src=”js/addCtrl.js”></script>

<script src=”js/gservice.js”></script>

  • Give the Link to JS source files

<! — JS Source →

<script src=”/bower_components/jquery/dist/jquery.js”></script><script src=”../bower_components/angular/angular.js”></script><script src=”../bower_components/angular-route/angular-route.js”></script> <script src=”../bower_components/angularjs-geolocation/dist/angularjs-geolocation.min.js”></script>

  • Now you can create your Home page of your application
Home Page For MEAN app

2.Angular js Relative Things:

we have a basic HTML page with a div for a map and a div with an HTML form for adding users. That said, there are a few things to note:

  1. We’ve included a link to the Google Maps API at the top of the page. Be sure to insert your own API into the script!
  2. We’ve included the Angular directive ng-app = mymeanapp at the top of the page. We'll use this to reference our Angular module later on.
  3. We’re using a temporary holderjs image in place of our map for now. This will let us get a quick visual of what we have.
  4. We’ve included a noValidate attribute in the HTML form element. This disables HTML form validation. Instead, we'll be using Angular to validate our form.
  5. Most importantly, note the repeated use of ng-model throughout the form. Each of these takes content in a textbox or control element and uses it to set the value of an associated property in the scope variable formData. So if a user sets his username to be "senthil", then the variable $scope.formData.username would equal "senthil" as well.
  6. Lastly, note the function ng-disabled="addForm.$invalid" . This will prevent a user from clicking the Submit button unless the form is completely valid. In our case, since all fields have the attribute of required, this means that all fields will need to be populated before the button is enabled.

3.Setup the Nodejs Server:

  • include all the middlewares
  • give the link to the mongodb database

mongoose.connect("mongodb://localhost/<database name>");

4.Create Mongoose Schema:

Let’s create a Mongoose Schema that we can use to interact with the user data we’ll be dumping into MongoDB. Navigate to your model.js file and paste the following code

var mongoose    = require('mongoose');
var Schema = mongoose.Schema;
var UserSchema = new Schema({
username: {type: String, required: true},
location: {type: [Number], required: true}, // [Long, Lat]
});

In this model.js you can create your own data fields with different data types.

important is the fact that MongoDB requires coordinates to be ordered in [Long, Lat] format. (Backwards-seeming. I know. But very important.) This is especially important to remember because Google Maps requires coordinates in the other direction [Lat, Long]. Just try to keep things straight as you're working.

5.Things in Route files:

Here you ca create your operations route files.As for my practice I created the (/users) this will display the all the places in the database

6.Angular js Integration part:

1.Declar the all modules

var app = angular.module('meanMapApp', ['addCtrl', 'geolocation']);

2.Create the GOOGLE Map Factory Service:

  1. Convert each into a Google Maps readable format and

2) Drop Google Map markers to the correct coordinates. Additionally, we’re going to need to build functionality for pop-ups and clickable map coordinates.

To handle all of this, we’re going to create a new Angular Factory. This factory will be used by our addCtrl controller to complete all of the logic associated with map building.

Go ahead and open your public->app->gservice.js file.

Note:I attached the github source file.You can verify that

https://github.com/senthil123hotshot/article

1) First, we created a generic Angular module and factory called gservice and specified that it depends on the$http service.

2) We initialized a set of key variables:

  • The googleMapService object that will hold the refresh function we'll use to rebuild the map,
  • The locations array which will hold all of the converted locations in the database.
  • The selectedLat and selectedLong variables, which hold the specific location we're looking at during any point in time.

3) We then created a refresh() function, which takes new coordinate data and uses it to refresh the map. To do this, the function performs an AJAX call to the database and pulls all of the saved records. It then takes these records and passes them to a function called convertToMapPoints, which loops through each record -- creating an array of Google formatted coordinates with pre-built pop-up messages. (Note that Google formats its coordinates [Lat, Long], so we needed to flip the order from how we saved things in MongoDb).

4) Once the values have been converted, the refresh function sets off the initialize() function. This function, creates a generic Google Map and places it in the index.html file where the div id of map exists. The initialize function, then loops through each of the locations in the locations array and places a blue-dot marker on that location's geographic position. These markers are each given a listener that opens their message boxes on click. Finally, the initialize() function ends with a bouncing red marker being placed at the initial location (pre-set to center of America as of now).

5) The refresh() function is run immediately upon window load, allowing the map to be seen right away.

If you’re still with me, then let’s incorporate our gservice and refresh() functions in the rest of the app. Since we'll be using the refresh() function whenever we add a new user, it makes sense to include it in our addCtrl.js file.

// Refresh the map with new data
gservice.refresh($scope.formData.latitude, $scope.formData.longitude);

3.Adding Clickability:

We’ve done some great things here, but right now — there is no way for users to actually set their location on the map before submitting. Everyone is just stuck in the center of Kansas. So let’s create some functionality for map clicks.

First, add the following service properties in the section for initializing variables:

googleMapService.clickLat  = 0;
googleMapService.clickLong = 0;

Next, add the below listener to the bottom of the initialize() function, right under the section that set the initial location as a bouncing red marker.

// Clicking on the Map moves the bouncing red marker
google.maps.event.addListener(map, 'click', function(e){
var marker = new google.maps.Marker({
position: e.latLng,
animation: google.maps.Animation.BOUNCE,
map: map,
icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
});
    // When a new spot is selected, delete the old red bouncing marker
if(lastMarker){
lastMarker.setMap(null);
}

Note:

here I used the red color dot marker.you can you any kind of the market and icon for your own sites

Bouncing Clickable marker

here the red marker has the bouncing animation

the green color markers are the plotted location.

When we clicking some marker in the map it will display the entire details about the location’s

all the details are retrive from the database

Finally we get the basic google map for our applications .

Conclusion:

Source Code:

https://github.com/senthil123hotshot/article

Reference:

https://scotch.io/tutorials/making-mean-apps-with-google-maps-part-i#toc-grabbing-dependencies-and-setting-up-the-html

I hope this article help you to understand the google map creation by using MEAN stack.If any queries ping me

<senthil111itworld@gmail.com>

Keep Slapping the Keyboard,until something good Happens-senthil