@section('custom-scripts')
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA7IZt-36CgqSGDFK8pChUdQXFyKIhpMBY&sensor=true" type="text/javascript"></script>
<script>
	var map;
	var geocoder;
	var marker;
	var people = new Array();
	var latlng;
	var infowindow;

	$(document).ready(function() {
		ViewCustInGoogleMap();
	});

	function ViewCustInGoogleMap() {

		var mapOptions = {
			center: new google.maps.LatLng(40.61101292659453, -73.97882082867913), // initial map latLang positions to be defined here
			zoom: 10,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

		// Get data from database. It should be like below format or you can alter it.

		var data = '[{ "DisplayText": "Lapalina", "ADDRESS": "159 Avenue O, Brooklyn, NY 11204, United States-11204", "LatitudeLongitude": "40.610988492324935, -73.97883155751394", "MarkerId": "Lapalina" },{ "DisplayText": "Address 2", "ADDRESS": "159 Avenue O, Brooklyn, NY 11204, United States-11204", "LatitudeLongitude": "40.61099663708247, -73.97888520168794", "MarkerId": "Customer"}]';

		people = JSON.parse(data);

		for (var i = 0; i < people.length; i++) {
			setMarker(people[i]);
		}

	}

	function setMarker(people) {
		geocoder = new google.maps.Geocoder();
		infowindow = new google.maps.InfoWindow();
		if ((people["LatitudeLongitude"] == null) || (people["LatitudeLongitude"] == 'null') || (people["LatitudeLongitude"] == '')) {
			geocoder.geocode({
				'address': people["Address"]
			}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
					marker = new google.maps.Marker({
						position: latlng,
						map: map,
						draggable: false,
						html: people["DisplayText"],
						icon: "images/marker/" + people["MarkerId"] + ".png"
					});
					//marker.setPosition(latlng);
					//map.setCenter(latlng);
					google.maps.event.addListener(marker, 'click', function(event) {
						infowindow.setContent(this.html);
						infowindow.setPosition(event.latLng);
						infowindow.open(map, this);
					});
				} else {
					alert(people["DisplayText"] + " -- " + people["Address"] + ". This address couldn't be found");
				}
			});
		} else {
			var latlngStr = people["LatitudeLongitude"].split(",");
			var lat = parseFloat(latlngStr[0]);
			var lng = parseFloat(latlngStr[1]);
			latlng = new google.maps.LatLng(lat, lng);
			marker = new google.maps.Marker({
				position: latlng,
				map: map,
				draggable: false, // cant drag it
				html: people["DisplayText"] // Content display on marker click
				//icon: "images/marker.png"       // Give ur own image
			});
			//marker.setPosition(latlng);
			//map.setCenter(latlng);
			google.maps.event.addListener(marker, 'click', function(event) {
				infowindow.setContent(this.html);
				infowindow.setPosition(event.latLng);
				infowindow.open(map, this);
			});
		}
	}
</script>
@endsection
<x-app-layout>
	<!--======= SUB BANNER =========-->

	<div id="content" class="gs_reveal">
		<section class="services padding-top-150 padding-bottom-80 bg-light-grey">
			<div class="container-fluid">
				<div class="retailer-form">
					<div class="heading-block margin-bottom-50">
						<h6 class="wow animate fadeInRight" data-wow-delay="0.4s">
							Our
						</h6>
						<hr class="wow animate fadeInLeft" data-wow-delay="0.4s" />
						<h2 class="wow animate fadeInUp" data-wow-delay="0.4s">
							Retailers
						</h2>
					</div>

					<form class="" onsubmit="getFormData()">
						<div class="form-group col-md-6">
							<label for="staticEmail2">LOCATION</label>
							<input type="text" class="form-control" id="staticEmail2" value="" />
						</div>
						<div class="form-group mx-sm-3 col-md-3">
							<label for="inputPassword2">RADIUS</label>
							<select id="inputState" class="form-control">
								<option selected>200 Miles</option>
								<option>100 Miles</option>
								<option>50 Miles</option>
								<option>25 Miles</option>
								<option>10 Miles</option>
							</select>
						</div>
						<button type="button" id="search-button" class="btn btn-primary btnSeccion col-md-3 mt-2">
							Search
						</button>
					</form>

					<div class="col-md-12 margin-top-60">
					<div id="map-canvas" style="width: 100%; height: 600px;"></div>
					</div>
				</div>
			</div>
		</section>
	</div>
	<!-- End Content -->

</x-app-layout>