Google Map Location Coordinates Using Bootbox In ASP.NET MVC

100

Article

bootbox.min.zip

Introduction

What Is Bootbox In Asp.net Mvc?

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes

Use Bootstrap modals for creating, managing or removing any of the required DOM elements or JS event handlers.

Bootbox.js is designed to make using Bootstrap modals easier.

Image Reference

File reference

I attached one zip file to get “bootbox.min.js”.

Description

Here I used the Place changed event handler of the Google Autocomplete TextBox to get the selected place, its address and its location coordinates i.e. Latitude and Longitude.

To know more details about Google map , Visit My Blogs and articles.

http://www.c-sharpcorner.com/members/satyaprakash-samantaray

Steps To Be Followed

Step1

Create a Mvc 5 application named “SatyaGoogleMapBootstrapMVC”.

Step2

Create a controller class file named “HomeController.cs”.

Code Ref

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace SatyaGoogleMapBootstrapMVC.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult PlaceCord()
{
return View();
}
}
}

Code Description

Here I created a controller action method named “PlaceCord()”.

public ActionResult PlaceCord()
{
return View();
}

Step3

Add a Bootbox javascript library of version v4.4.0. Named “bootbox.min.js”.

This file I added to show alert pop up instead of traditional javascript alert box.

Also it is bootstrap supporting and multiplatform view support,

Step4

Create a view named “PlaceCord.cshtml”.

Code Ref

@{
ViewBag.Title = "Satyaprakash Goolge Map Coordinate";
}
<title>@ViewBag.Title</title>
<h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's Goolge Map Place Coordinate Using MVC and BOOTSTRAP</h2>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="bootbox.min.js"></script>
<style>
input[type=text], select {
width: 80%;
padding: 12px 20px;
margin: 10px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkVZYQFe4YYva_g5ulymGDt9EBoVjjZJ8&libraries=places">
</script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function () {
var places = new google.maps.places.Autocomplete(document.getElementById('txtLoc'));
google.maps.event.addListener(places, 'place_changed', function () {
var place = places.getPlace();
var address = place.formatted_address;
var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();
var mesg = "Location Address Is : " + address;
mesg += "\nLocation Latitude Is : " + latitude;
mesg += "\nLocation Longitude Is: " + longitude;
//alert(mesg); //For Normal Javascript Alert.
bootbox.alert(mesg); //For bootstrap Javascript Alert.
});
});
</script>
<input type="text" id="txtLoc" placeholder="Mention location...." />
<footer>
<p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@
</footer>

Code Description

The HTML Markup consists of an HTML TextBox using which the Google Places Autocomplete will be implemented.

The very first thing is to inherit the Google Maps API script along with the places library. Then inside the Google Maps window load event handler, the Google Places Autocomplete is applied to the TextBox and then the place_changed event handler is assigned to it.

The place_changed event handler is triggered when a place is selected in the Google Places Autocomplete TextBox. It first gets the selected place and then determines its address and its location coordinates i.e. Latitude and Longitude and then displays the details in BootBox alert message box.

To support bootstrap related support added below links.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="bootbox.min.js"></script>

To show BootBox alert popup added this file path as described earlier.

<script src="bootbox.min.js"></script>

Instead of that I can use also below CDN link Wrappers for JavaScript alert(), confirm() and other flexible dialogs using the Bootstrap framework. CDN for web related libraries to speed up your websites!

https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.js

Added this cascading style sheet to give stylish look and bootstrap support to Place AutoComplete TextBox.

<style>
input[type=text], select {
width: 80%;
padding: 12px 20px;
margin: 10px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
</style>

Then I added my Google Api Key.

<script src="https://maps.googleapis.com/maps/api/js?key=Put_Your_Api_key&libraries=places">
</script>

Then I added a javascript code to show the place details with coordinates Using BootBox Alert PopUp.

<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function () {
var places = new google.maps.places.Autocomplete(document.getElementById('txtLoc'));
google.maps.event.addListener(places, 'place_changed', function () {
var place = places.getPlace();
var address = place.formatted_address;
var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();
var mesg = "Location Address Is : " + address;
mesg += "\nLocation Latitude Is : " + latitude;
mesg += "\nLocation Longitude Is: " + longitude;
//alert(mesg); //For Normal Javascript Alert.
bootbox.alert(mesg); //For bootstrap Javascript Alert.
});
});
</script>

Add place details and coordinates and show using BootBox.

var place = places.getPlace();
var address = place.formatted_address;
var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();
var mesg = "Location Address Is : " + address;
mesg += "\nLocation Latitude Is : " + latitude;
mesg += "\nLocation Longitude Is: " + longitude;
//alert(mesg); //For Normal Javascript Alert.
bootbox.alert(mesg); //For bootstrap Javascript Alert.

Difference Between Normal javascript and BootBox Javascript Alert PopUp.

alert(mesg); //For Normal Javascript Alert.
bootbox.alert(mesg); //For bootstrap Javascript Alert.

Then I added a text box control and used its id to show autocomplete places using google map api key.

google.maps.places.Autocomplete(document.getElementById('txtLoc'));
<input type="text" id="txtLoc" placeholder="Mention location...." />

Then I added footer to show current Date&Time.

<footer>
<p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@
</footer>

Step5

To Set Start Page,

Code Ref

routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "PlaceCord", id = UrlParameter.Optional }
);