Google Maps- Find Places, Restaurants Etc. With Animated Marker Using Bootstrap In ASP.NET MVC

Satyaprakash Samantaray
May 19, 2017
10.3k
0
1
Article

Introduction

Google Maps API allows you to display maps on your ASP.NET MVC Website.

Description

An API is a set of methods and tools which can be used for building software applications.

The SearchBox allows users to perform a text-based geographic search. You can attach the SearchBox to a text field and, as text is entered, the service will return predictions in the form of a drop-down pick list.

SearchBox supplies an extended list of predictions, which can include places as defined by the Google Places API plus suggested search terms. When a user selects a place from the list, information about that place is returned to the SearchBox object, and can be retrieved by your application.

The SearchBox constructor takes two arguments

An HTML input element of type text. This is the input field that the SearchBox service will monitor and attach its results to. An options argument, which can contain the bounds property: bounds is a google.maps.LatLngBounds object specifying the area in which to search for places.

The results are biased towards, but not restricted to, places contained within these bounds.The following code uses the bounds parameter to bias the results towards places within a particular geographic area, specified via laitude/longitude coordinates.

Get SearchBox information

When the user selects an item from the predictions attached to the search box, the service fires a places_changed event. You can call getPlaces() on the SearchBox object, to retrieve an array containing several predictions, each of which is a PlaceResult object.

Autocomplete is a feature of the Places library in the Google Maps JavaScript API. You can use autocomplete to give your applications the type-ahead-search behavior of the Google Maps search field. When a user starts typing an address, autocomplete will fill in the rest.

As defined by the Google Places API, a 'place' can be an establishment, a geographic location, or a prominent point of interest.

Loading the library

The Places service is a self-contained library, separate from the main Maps JavaScript API code. To use the functionality contained within this library, you must first load it using the libraries parameter in the Maps API bootstrap URL,

<script async defer src="https://maps.googleapis.com/maps/api/js?key=Put_YoUR_Key&libraries=places&callback=initAutocomplete"></script>

The API offers two types of autocomplete options, which you can add via the Autocomplete and SearchBox classes respectively.
In addition, you can use the AutocompleteService class to retrieve autocomplete results programmatically.

Autocomplete adds a text input field to your web page, and monitors that field for character entries. As the user enters text, autocomplete returns place predictions in the form of a dropdown pick list. When the user selects a place from the list, information about the place is returned to the autocomplete object, and can be retrieved by your application.
SearchBox adds a text input field to your web page, in much the same way as Autocomplete. The differences are as follows, The main difference lies in the results that appear in the pick list. SearchBox supplies an extended list of predictions, which can include places (as defined by the Google Places API) plus suggested search terms. For example, if the user enters 'pizza in new', the pick list may include the phrase 'pizza in New York, NY' as well as the names of various pizza outlets. SearchBox offers fewer options than Autocomplete for restricting the search. In the former, you can bias the search towards a given LatLngBounds.

In the latter, you can restrict the search to a particular country and particular place type, as well as setting the bounds.
You can create an AutocompleteService object to retrieve predictions programmatically. Call getPlacePredictions() to retrieve matching places, or call getQueryPredictions() to retrieve matching places plus suggested search terms.

Note

AutocompleteService does not add any UI controls. Instead, the above methods return an array of prediction objects. Each prediction object contains the text of the prediction, as well as reference information and details of how the result matches the user input.
When a user selects a place from the predictions attached to the autocomplete text field, the service fires a place_changed event. You can call getPlace() on the Autocomplete object, to retrieve a PlaceResult object. By default, autocomplete will give you the full address as a single line of text. For an address form, it is useful to get the address in structured format. You can use Autocomplete.getPlace() to retrieve the full details for each autocomplete prediction, including the structured address. If you use the placeIdOnly option, the Autocomplete object will not get place details, as the PlaceResult object has only the place_id, types and name properties set. To get place details, retrieve a PlaceResult object by calling getPlace() on the Autocomplete object when you get the place_changed event.

You could then use geocoding to get the location coordinates, or the Places service to get more information on the selected place.

Reference

For more details visit my blogs related to Google Map.

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

Steps

You will need to register and get an API key from Google API, which will be used to load and display Google Map.

Step 1

Create a MVC Application named SatyaGoogleMapBootstrapMVC. Now, create a controller class file named HomeController.cs with controller action method named "Steet()".

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 Index()
{
return View();
}
public ActionResult Details()
{
return View();
}
public ActionResult Animate()
{
return View();
}
public ActionResult Icon()
{
return View();
}
public ActionResult Steet()
{
return View();
}
}
}

Code Description

Here, Steet Controller action method is taken to create the view for current application.

Step 2

Create a View based on Controller Action Method Steet() named Steet.cshtml.

Code Ref

@{
ViewBag.Title = "Satyaprakash Autocomplete Places search";
}
<title>@ViewBag.Title</title>
<h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's Google Map Autocomplete Places Search 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>
<title>Places Searchbox</title>
<style>
#map {
height: 60%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#title {
color: red;
background-color: yellow;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}
input[type=text], select {
width: 60%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
</style>
<input id="pac-input" type="text" placeholder="Search Place....">
<div id="map"></div>
<script>
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 20.296100, lng: 85.824500 },
zoom: 13,
mapTypeId: 'roadmap'
});
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.addListener('bounds_changed', function () {
searchBox.setBounds(map.getBounds());
});
var markers = [];
searchBox.addListener('places_changed', function () {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
markers.forEach(function (marker) {
marker.setMap(null);
});
markers = [];
var bounds = new google.maps.LatLngBounds();
places.forEach(function (place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
markers.push(new google.maps.Marker({
map: map,
icon: "Flag.jpg",
title: place.name,
position: place.geometry.location,
animation: google.maps.Animation.BOUNCE
}));
if (place.geometry.viewport) {
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkVZYQFe4YYva_g5ulymGDt9EBoVjjZJ8&libraries=places&callback=initAutocomplete"></script>
<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

Here I added bootstrap related references information to support bootstrap.

<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>

I added a css style sheet for map and search textbox. Always set the map height explicitly to define the size of the div element that contains the map.

#map {
height: 60%;
}

Optional

Makes the sample page fill the window.

html, body {
height: 100%;
margin: 0;
padding: 0;
}
#title {
color: red;
background-color: yellow;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}

For Search textbox , I added it here.

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

I added textbox control in Asp.net MVC.

<input id="pac-input" type="text" placeholder="Search Place....">

This example adds a search box to a map, using the Google Place Autocomplete feature. People can enter geographical searches. The search box will return a pick list containing a mix of places and predicted search terms. This example requires the Places library. Include the libraries=places parameter when you first load the API. For example,

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

When the page will load first time the Bhubaneswar place will display, as I mentioned longitude and latitude and maptype.

function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 20.296100, lng: 85.824500 },
zoom: 13,
mapTypeId: 'roadmap'
});

Create the search box and link it to the UI element.

var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

Bias the SearchBox results towards current map's viewport.

map.addListener('bounds_changed', function () {
searchBox.setBounds(map.getBounds());
});
var markers = [];

Listen for the event fired when the user selects a prediction and retrieve more details for that place.

searchBox.addListener('places_changed', function () {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}

Clear out the old markers.

markers.forEach(function (marker) {
marker.setMap(null);
});
markers = [];

For each place, get the icon, name and location.

var bounds = new google.maps.LatLngBounds();
places.forEach(function (place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};

Create a marker for each place . I put my own image file like '.jpg' file.

markers.push(new google.maps.Marker({
map: map,
icon: "Flag.jpg",
title: place.name,
position: place.geometry.location,
animation: google.maps.Animation.BOUNCE
}));

Only geocodes have viewport.

if (place.geometry.viewport) {
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});

Then finally the all properties are set to div map.

map.fitBounds(bounds);

Then I put my google api key with Places library package and function name 'initAutocomplete'.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkVZYQFe4YYva_g5ulymGDt9EBoVjjZJ8&libraries=places&callback=initAutocomplete"></script>

OUTPUT

DESKTOP VIEW

In the Initial Load the Bhubaneswar location will appear as I described earlier.

When you display predictions from the Google Places search box, you must include the 'powered by Google' logo.

When search by Bangalore , the textbox shows City name with Country name and State Name.

Now, the search city with animated marker is found.

Now, I will search using KFC Restaurant store in Bangalore City..

Now, I search with "accenture near ECO Space " in Bangalore City..

Mobile View

In mobile view, the text box and map control are adjusted automatically based on the screen size.

Desktop View

When I search By HSR LAYOUT, Bangalore

When I search some KFC Restaurant store new HSR Layout, Bangalore.

Mobile View

Like this, you can search anything - an IT company, MBA colleges, banks etc.

SUMMARY

Here, we learned the following.

What is Google Map Find Places.
How to implement it in Asp.net MVC.
To know more details go through my blog related to Google maps using Bootstrap In Asp.Net MVC.
How to get google api key and places library package.