home.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div id="map_canvas" style="width:1000px; height:500px;"></div>
</div>
@endsection
@section('js')

<script>

var map = null;
  var radius_circle = null;
  var markers_on_map = [];
  var geocoder = null;
  var infowindow = null;

  //all_locations is just a sample, you will probably load those from database
  var all_locations = [
    @foreach ($name as $business)
        ['{{$business->name}}',{{$business->latitude}}, {{$business->longitude}}, '{{$business->addressbycoordinate}}'],
    @endforeach
  ];

  //initialize map on document ready
  $(document).ready(function(){
    var latlng = new google.maps.LatLng(40.723080, -73.984340); //you can use any location as center on map startup
    var myOptions = {
      zoom: 3,
      center: latlng,
      mapTypeControl: true,
      mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
      navigationControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    geocoder = new google.maps.Geocoder();
    google.maps.event.addListener(map, 'click', function(){
         if(infowindow){
           infowindow.setMap(null);
           infowindow = null;
         }
    });
  });

  function showCloseLocations() {
    var i;
    var radius_km = $('#radius_km').val();
    var address = $('#address').val();
    if (radius_circle) {
      radius_circle.setMap(null);
      radius_circle = null;
    }
    for (i = 0; i < markers_on_map.length; i++) {
      if (markers_on_map[i]) {
        markers_on_map[i].setMap(null);
        markers_on_map[i] = null;
      }
    }

    if (geocoder) {
      geocoder.geocode({'address': address}, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
            var address_lat_lng = results[0].geometry.location;
            radius_circle = new google.maps.Circle({
                center: address_lat_lng,
                radius: radius_km * 1000,
                clickable: false,
                map: map,
                strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35
            });
                    if (radius_circle) map.fitBounds(radius_circle.getBounds());
            for (var j = 0; j < all_locations.length; j++) {
                var name = all_locations[j][0]
                var lat = all_locations[j][1]
                var long = all_locations[j][2]
                var add =  all_locations[j][3]
                // var icon1 =  all_locations[j][4]
                // var photo1 = all_locations[j][5]
                // var icon2 = "{{ asset('../resources/assets/images/') }}"
                // var icon3 = icon2 + '/' + icon1
                // var photo2 = icon2 + '/' + photo1
                var marker_lat_lng = new google.maps.LatLng(lat, long);
                var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(address_lat_lng, marker_lat_lng); //distance in meters between your location and the marker
                if (distance_from_location <= radius_km * 1000) {
                  var new_marker = new google.maps.Marker({
                    position: marker_lat_lng,
                    map: map,
                    title: name,

                  });google.maps.event.addListener(new_marker, 'click', function () {
                        if(infowindow){
                           infowindow.setMap(null);
                           infowindow = null;
                        }
                      infowindow = new google.maps.InfoWindow({
                        content: '<div style="color:red">'+name +'</div>' + " is " + distance_from_location + " meters from my location",
                        size: new google.maps.Size(150,50),
                        pixelOffset: new google.maps.Size(0, -30),
                        position: marker_lat_lng,
                        map: map
                      });
                    });
                  markers_on_map.push(new_marker);
                }
              (all_locations[j]);
            }
          } else {
            alert("No results found while geocoding!");
          }
        } else {
          alert("Geocode was not successful: " + status);
        }
      });
    }
  }
  </script>
@endsection