CODEWITHSUNDEEP
javascriptjquerylaravel
Nandan
Nandan

Reputation: 422

pass lat lng to javascript laravel

i have this button and onclick i want to pass lat lng to initialize function for google map:

<button class="btn btn-block btn-primary" onclick="initialize()" id='latlng' lat="{{$data['clients_address']['lat']}}" lng="{{$data['clients_address']['lng']}}">
                                        Map Location
                                    </button>

i tried passing with this event but its not working and if with jquery then how can i pass to javascript function

$('#latlng').click(function(e){
            var lng = $(this).attr('lng');
            alert(lng,lat);
        });

<script>
    function initialize() {
        //console.log(this.getAttribute('lat'));
       var latlng = new google.maps.LatLng(28.535516,77.391026);
        var map = new google.maps.Map(document.getElementById('map'), {
          center: latlng,
          zoom: 13
        });
        var marker = new google.maps.Marker({
          map: map,
          position: latlng,
          draggable: false,
          anchorPoint: new google.maps.Point(0, -29)
       });
        var infowindow = new google.maps.InfoWindow();   
        google.maps.event.addListener(marker, 'click', function() {
          var iwContent = '<div id="iw_container">' +
          '<div class="iw_title"><b>Location</b> : Noida</div></div>';
          // including content to the infowindow
          infowindow.setContent(iwContent);
          // opening the infowindow in the current map and at the current marker location
          infowindow.open(map, marker);
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Upvotes: 0

Views: 157

Answers (2)

guizo
guizo

Reputation: 3095

In your example, you first used a .click to an ID selector. If you really only have one button that calls initialize() on the page you can pass PHP variables directly to Javascript:

<script>
    let lat = <?php echo json_encode($data['clients_address']['lng']); ?>;
    let lng = <?php echo json_encode($data['clients_address']['lng']); ?>;
    
    function initialize() {
     ...
    }
</script>

If you have multiple initialize() triggers, you can use @Mahmoud answer or pass the values as function parameters.

<button class="btn btn-block btn-primary" onclick="initialize({{$data['clients_address']['lat']}}, {{$data['clients_address']['lng']}})" id="latlng">
  Map Location
</button>

function initialize(lat, long) {
  ...
}

Personally I tend to use this + element attributes when I need to reference a standard attribute (ex: value, class) or the value is referenced in more than one place (ex: not only in initialize function). Also, consider using jQuery data method if you intend to use attributes.

Att,

Upvotes: 2

mmabdelgawad
mmabdelgawad

Reputation: 2545

First you need to pass the clicked element to the initialize like so

<button class="btn btn-block btn-primary" onclick="initialize(this)" id='latlng' lat="{{$data['clients_address']['lat']}}" lng="{{$data['clients_address']['lng']}}">
      Map Location
</button>

then in your initialize function you will get the lat and lng

function initialize(element) {

   var lat = $(element).attr('lat');
   var lng = $(element).attr('lng');

   .....

}

Upvotes: 1

Related Questions