Map.cshtml

@using PromoSquad.WebApp.Models.ViewModels
@model IEnumerable<JobPostMapViewModel>

<input type="text" id="google-maps-location" placeholder="search" class="map-search" />
<div id="map-canvas" style="height:500px"></div>

@section scripts{
    <script>
        function initMap() {
            var infoWindow = new google.maps.InfoWindow();
            var pos = {
                lat: 51.5287352,
                lng: -0.116043
            };

            var jobPosts = [];
            @foreach (var item in Model)
            {
                <text>
                    jobPosts.push({
                        lat: @item.Latitude,
                        lng: @item.Longitude,
                        title: "@item.Title",
                        description: "@item.Description",
                        detailsUrl: "@AppSettings.Url" + "/Jobs/Details/" + "@item.Id"
                    })
                </text>
            }

            var markers = [];
            var map = new google.maps.Map(document.getElementById('map-canvas'), {
                center: { lat: pos.lat, lng: pos.lng },
                zoom: 13
            });


            function drop() {
                clearMarkers();
                for (var i = 0; i < jobPosts.length; i++) {
                    addmarkersWithTiemout(jobPosts[i], 0);
                }
            }

            function addmarkersWithTiemout(jobPost, timeout) {
                window.setTimeout(function () {
                    var newMarker= new google.maps.Marker({
                        position: { lat: jobPost.lat, lng: jobPost.lng },
                        map: map,
                        animation: google.maps.Animation.DROP,
                        info: new google.maps.InfoWindow({
                            content: "<a href=\"" + jobPost.detailsUrl +"\">" + jobPost.title +"</a>" +
                                "<br />" + jobPost.description
                        })
                    });

                    markers.push(newMarker);

                    google.maps.event.addListener(newMarker, 'click', function() {
                        newMarker.info.open(map, newMarker);
                    });

                }, timeout);
            }

            function clearMarkers() {
                for (i = 0; i < markers.length; i++) {
                    markers[i].setMap(null);
                }
                markers = [];
            }

            drop();

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    pos.lat = position.coords.latitude;
                    pos.lng = position.coords.longitude;
                    $("#Location").val(pos.lat + ", " + pos.lng)
                    map.setCenter(pos);
                });
            }

            var input = (document.getElementById('google-maps-location'));
            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.bindTo('bounds', map);

            autocomplete.addListener('place_changed', function () {
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                    window.alert("Autocomplete's returned place contains no geometry");
                    return;
                }

                $("#Location").val(place.geometry.location.lat() + ", " + place.geometry.location.lng())

                // If the place has a geometry, then present it on a map.
                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(17);  // Why 17? Because it looks good.
                }
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=@AppKeys.GoogleMapsKey&libraries=places&callback=initMap" type="text/javascript"></script>
}