Use google map with dynamic coordinates in laravel

In form,

Create a div to show map.

In page script,

http://maps.google.com/maps/api/js?key=AIzaSyAJLUg2IEbAOp4gMqRoXpSnjV0w1FDfYNk&sensor=false

$(document).ready(function() {
//to display google map after changing bootstrap tab
$(“a[href=’#service-two’]”).on(‘shown.bs.tab’, function(){
google.maps.event.trigger(map, ‘resize’);

//init function after tab opens
var destination = $(“#searched_destination”).val(); //destination is searched keyword
setTimeout(executeQuery(destination), 3000);
});

// //normal init function
// google.maps.event.trigger(map, ‘resize’);
// var destination = $(“#searched_destination”).val(); //destination is searched keyword
// setTimeout(executeQuery(destination), 3000);
});

function executeQuery(destination) {
$.ajax({
url: ‘getlocations/’+destination, //URL is route to get locations that matches “destination”
success: function(data) {
console.log(data);
locations = data;
renderMap(locations);
}
});
}

function renderMap(locations) {
// google.maps.event.trigger(map, ‘resize’);
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 10,
// center: new google.maps.LatLng(16.8978811, 96.17212638), //static center point
center: new google.maps.LatLng(locations[0][1], locations[0][2]), //dynamic center point
mapTypeId: google.maps.MapTypeId.ROADMAP
});

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

var marker, i;

for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});

google.maps.event.addListener(marker, ‘click’, (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}

In routes,

Route::get(‘/getlocations/{destination}’, array(‘as’=>’/getlocations’, ‘uses’=>’Frontend\SearchController@getLocations’));

In SearchController,

public function getLocations($destination)
{
//start hotel search result
$hotelRepo = new HotelRepository();
$hotels = $hotelRepo->getHotelsByDestination($destination); //search hotel by destination keyword

$result = array();
$index = 0;
foreach($hotels as $hotel){
$result[$index][0] = ”.$hotel->name.”.”;
$result[$index][1] = $hotel->latitude;
$result[$index][2] = $hotel->longitude;
$index++;
}
//end hotel search result

return response()->json($result);
}

In HotelRepository,

public function getHotelsByDestination($name){
// $objs = Hotel::whereNull(‘deleted_at’)->where(‘name’, ‘LIKE’, “%$name%”)->get();

$objs = Hotel::whereHas(‘country’, function($query) use($name) {
$query->where(‘countries.name’, ‘LIKE’, ‘%’.$name.’%’);
})
->orWhereHas(‘city’, function($query) use($name) {
$query->where(‘cities.name’, ‘LIKE’, ‘%’.$name.’%’);
})
->orWhereHas(‘township’, function($query) use($name) {
$query->where(‘townships.name’, ‘LIKE’, ‘%’.$name.’%’);
})
->orWhere(‘name’,’LIKE’,’%’.$name.’%’)
->get();

return $objs;
}

 

Remark:

If center point is placed at the top left corner of the map::

– on event that tab is shown, resize the map and then call map init function.

Example::

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

$(“a[href=’#service-two’]”).on(‘shown.bs.tab’, function(){
google.maps.event.trigger(map, ‘resize’);

//init function after tab opens
var destination = $(“#searched_destination”).val();
setTimeout(executeQuery(destination), 3000);
});

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s