Google Maps Api Store

stores.cshtml

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container" id="map">
  <div id="map-container">
    
    <!-- RENDER MAP IN HERE -->
    
  </div>


  <div class="map-information">
    <div class="fourcol">
      <h3>Find your nearest Orange Leaf Location</h3>
      
      <form id="locationSearchForm" action="">
        <input type="text" name="InputQuery" id="inputQuery" placeholder="City, State or Zip">
        <button type="submit" class="button">GO</button>
      </form>
      
      <div class="clearfix">
        
      </div>

      <span id="storelist-container"></span>

    </div>

    <div class="clearfix"></div>
  </div>

</div>

<script type="text/javascript">
    // var HOST = '';
    var HOST = '/stores';
    var map;

    function loadStores(zipcode, lat, lng) {
        $('#storelist-container').load(HOST, { state: zipcode, lat: lat, lng: lng }, function () {

        });
    }

    $(document).ready(function () {



        var container = $('#map-container');
        container.addClass('loading');
        window.setTimeout(function () {
            map = new google.maps.Map(
  			container.get(0),
				{
				    zoom: 10,
				    center: new google.maps.LatLng(-35.24, 97.36),
				    mapTypeId: google.maps.MapTypeId.ROADMAP
				}
			);

            if (navigator.geolocation) {
                //alert('location');
                navigator.geolocation.getCurrentPosition(function (position) {
                    map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 5);
                    loadStores("", position.coords.latitude, position.coords.longitude);
                });
            }

            var infowindow = new google.maps.InfoWindow({});

            var loadMarker = function (location, html) {

                var image = new google.maps.MarkerImage(
					'/Content/images/map/marker.png',
					new google.maps.Size(30, 47),
					new google.maps.Point(0, 0),
					new google.maps.Point(0, 47)
				);


                var shadow = new google.maps.MarkerImage(
					'/Content/images/map/shadow.png',
					new google.maps.Size(58, 47),
					new google.maps.Point(0, 0),
					new google.maps.Point(0, 47)
				);

                var shape = {
                    coord: [17, 0, 20, 1, 22, 2, 24, 3, 25, 4, 26, 5, 26, 6, 27, 7, 28, 8, 28, 9, 29, 10, 29, 11, 29, 12, 29, 13, 29, 14, 29, 15, 29, 16, 29, 17, 29, 18, 29, 19, 29, 20, 28, 21, 28, 22, 27, 23, 26, 24, 25, 25, 25, 26, 24, 27, 23, 28, 22, 29, 21, 30, 20, 31, 20, 32, 19, 33, 19, 34, 18, 35, 18, 36, 18, 37, 17, 38, 17, 39, 17, 40, 16, 41, 16, 42, 16, 43, 16, 44, 16, 45, 16, 46, 13, 46, 13, 45, 13, 44, 13, 43, 13, 42, 13, 41, 13, 40, 12, 39, 12, 38, 12, 37, 11, 36, 11, 35, 11, 34, 10, 33, 10, 32, 9, 31, 8, 30, 8, 29, 7, 28, 6, 27, 5, 26, 4, 25, 3, 24, 2, 23, 2, 22, 1, 21, 1, 20, 1, 19, 0, 18, 0, 17, 0, 16, 0, 15, 0, 14, 0, 13, 0, 12, 1, 11, 1, 10, 1, 9, 2, 8, 2, 7, 3, 6, 4, 5, 5, 4, 6, 3, 7, 2, 9, 1, 12, 0, 17, 0],
                    type: 'poly'
                };

                var marker = new google.maps.Marker({
                    draggable: false,
                    raiseOnDrag: false,
                    icon: image,
                    shadow: shadow,
                    shape: shape,
                    map: map,
                    position: location
                });

                google.maps.event.addListener(marker, "click", function () {
                    infowindow.setContent(html);
                    infowindow.open(map, marker);
                });
            };

            
            $.getJSON(HOST + '/?all=yes', function (dataObj) {
                //alert('fsdfa');
                //console.log(dataObj);
                //container.removeClass('loading');
                $.each(dataObj, function (index, data) {
                    console.log(data);
                    var element = $('<div class="details">'+
                    '<h2 class="mapLeftAlign"></h2>'+
                    '<h3 class="address mapLeftAlign"></h3>'+
                    '<h3 class="phone mapLeftAlign"></h3>'+
                    '<h3 class="mapLeftAlign">Store Hours</h3>'+
                    '<div class="mapLeft">'+
                    '<div class="monday hours"></div>'+
                    '<div class="tuesday hours"></div>'+
                    '<div class="wednesday hours"></div>'+
                    '<div class="thursday hours"></div>'+
                    '</div>'+
                    '<div class="mapRight">'+
                    '<div class="friday hours"></div>'+
                    '<div class="saturday hours"></div>'+
                    '<div class="sunday hours"></div>'+
                    '</div><br />'+
                    '<a class="directions" style="clear: both;" >Tap for directions</a><br />'+
                    '<a href="#" type="button"  class="button" id="Take"> Set to Home </a>'+
                    '</div>')
						//.find('.button').attr('onClick', 'selectstore(' + data.LocationID + ',"' + data.Store.replace(' ', '-').replace(' ', '-').replace(' ', '-').replace('&', 'and') + '")').end()
                        .find('.button').attr('href', '/stores/SetHomeStore?id=' + data.LocationID).end()
                     //.find('.button').attr('href', '#locator/settohome/' + data.LocationID).end()
                        .find('h2').text(data.Store).end()
						.find('.address').text(data.Address).end()
			            .find('.phone').text(data.Phone || ' ').end()
                        .find('.monday.hours').html('<strong>M:</strong> ' + data.MondayHours).end()
                        .find('.tuesday.hours').html('<strong>T:</strong> ' + data.TuesdayHours).end()
                        .find('.wednesday.hours').html('<strong>W:</strong> ' + data.WednesdayHours).end()
                        .find('.thursday.hours').html('<strong>Th:</strong> ' + data.ThursdayHours).end()
						.find('.friday.hours').html('<strong>F:</strong> ' + data.FridayHours).end()
						.find('.saturday.hours').html('<strong>Sa:</strong> ' + data.SaturdayHours).end()
						.find('.sunday.hours').html('<strong>Su:</strong> ' + data.SundayHours).end()
						.find('.directions').attr('href', 'http://maps.google.com/?saddr=Current%20Location&daddr=' + data.lat + ', ' + data.long).end()
                    ;


                    //alert('http://maps.google.com/?saddr=Current%20Location&daddr=' + data.lat + ', ' + data.long);

                    loadMarker(new google.maps.LatLng(data.lat, data.long), element.html());

                });
            });
            
        }, 100);
    });

    $('#locationSearchForm').submit(function (e) {
        e.preventDefault();
        var geocoder = new google.maps.Geocoder();
        zipcode = $('#inputQuery').val();


        geocoder.geocode({ 'address': zipcode }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location, 5);
                var lat = results[0].geometry.location.lat();
                var lng = results[0].geometry.location.lng();


                loadStores(zipcode, lat, lng);

                //////////////////////////

            }


        });

    });
</script>