Untitled

@model IEnumerable<MapPractise.Models.GeoCodeLocation>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    #map {
        height: 500px;
        width: 800px;
    }
</style>
<h2>Index</h2>

@*<input id="pac-input"  class="controls" type="text" placeholder="Search Box">*@

<div id="map"></div>
<br />
<p>
    @Html.ActionLink("Create New", "Create", "Locations", new { @class = "btn btn-primary" })
</p>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Description)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr class="coordinates">
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td class="description">
                @Html.DisplayFor(modelItem => item.Description)
            </td>
            <td id="addressLoc" class="address">
                @Html.DisplayFor(modelItem => item.Address)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            </td>
        </tr>
    }

</table>

@section Scripts {
    @Scripts.Render("~/bundles/SidzMapbox")
}
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API&libraries=places&callback=initAutocomplete" async defer></script>

function initAutocomplete()
  {
    var map = new google.maps.Map(document.getElementById('map'), {
            center: {
            lat: 52.728616,
        lng: 6.4901
      },
      zoom: 13,
      mapTypeId: 'roadmap'
    });
    var markers = [];

    // Create the search boxs and link them to the UI elements.
            var searchBoxes = $(".address");
    for (var i = 0; i < searchBoxes.length; i++) {
      var searchBox = new google.maps.places.SearchBox(searchBoxes[i]);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchBoxes[i]);
      map.addListener('bounds_changed', function() {
            searchBox.setBounds(map.getBounds());
        });
        markers.push([]);
      searchBox.addListener('places_changed', (function(i) {
        return function() {
            processSearch(i, this)
        }
        }(i)));
      }

      function processSearch(uniqueId, searchBox)
    {
      var places = searchBox.getPlaces();

      if (places.length == 0) {
        return ;
      }

      // Clear out the old markers.
      markers[uniqueId].forEach(function(marker) {
            marker.setMap(null);
        });
        markers[uniqueId] = [];

        // 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.
      if (!markers[uniqueId]) markers.push([]);
        markers[uniqueId].push(new google.maps.Marker({
            map: map,
        icon: icon,
        title: place.name,
        position: place.geometry.location
      }));

        if (place.geometry.viewport) {
            // Only geocodes have viewport.
            bounds.union(place.geometry.viewport);
        } else {
            bounds.extend(place.geometry.location);
        }
      });
      map.fitBounds(bounds);
    }
  }

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")


    @* This is for the mapbox map. *@
    <script src='https://api.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet' />
    @*This is used for the Geocoding Mapbox API*@
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.min.js'>
    </script>
    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.css' type='text/css' />

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    <li>@Html.ActionLink("MapBoxGeoCoder", "MapBoxGeoCoder", "Home")</li>
                    <li>@Html.ActionLink("Location", "Index", "Locations")</li>
                    <li>@Html.ActionLink("ViewGeo Code","Index","GeoCodeLocations")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>