barikoi/autocomplete-full-google-map.html

## autocomplete-full-google-map.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Barikoi Autocomplete</title>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/barikoi/barikoi-js@b6f6295467c19177a7d8b73ad4db136905e7cad6/dist/barikoi.min.css">

    <style>

        body {

            font-family: 'Open Sans', sans-serif;

        }

        h1 {
            text-align: center;
        }

    </style>

</head>

<body>
    <h1>Barikoi Autocomplete Demo</h1>

    <div>

        <input type="text" class="bksearch">

        <div class="bklist"></div>

    </div>

    <div id="map" style="height: 500px;"></div>

    <script src="https://cdn.jsdelivr.net/gh/barikoi/barikoi-js@b6f6295467c19177a7d8b73ad4db136905e7cad6/dist/barikoi.min.js?key:MTM0MjpTTzVSU0hCOFFO"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>


    <script>
    function initMap() {

const defaultLatLng = new google.maps.LatLng(23.7624286, 90.378406);

// Google map options
let mapOptions = {
  zoom: 12,
  center: defaultLatLng
}

const map = new google.maps.Map(document.getElementById("map"), mapOptions)

let marker = new google.maps.Marker({
    position: defaultLatLng,
})


// Add marker to the map
marker.setMap()

Bkoi.onSelect(function () {

    // get selected data from dropdown list
    let selectedPlace = Bkoi.getSelectedData()

    let selectedPlaceMarker = new google.maps.LatLng(selectedPlace.latitude, selectedPlace.longitude)

    // Update marker position
    marker.setPosition(selectedPlaceMarker)

    map.zoom = 15

    // Update map center
    map.panTo(selectedPlaceMarker)

    // Add marker to the map
    marker.setMap(map)

})
}

    </script>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Barikoi Autocomplete</title>

	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/barikoi/barikoi-js@b6f6295467c19177a7d8b73ad4db136905e7cad6/dist/barikoi.min.css">

	<style>

	body {

	font-family: 'Open Sans', sans-serif;

	}

	h1 {
	text-align: center;
	}

	</style>

	</head>

	<body>
	<h1>Barikoi Autocomplete Demo</h1>

	<div>

	<input type="text" class="bksearch">

	<div class="bklist"></div>

	</div>

	<div id="map" style="height: 500px;"></div>

	<script src="https://cdn.jsdelivr.net/gh/barikoi/barikoi-js@b6f6295467c19177a7d8b73ad4db136905e7cad6/dist/barikoi.min.js?key:MTM0MjpTTzVSU0hCOFFO"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>


	<script>
	function initMap() {

	const defaultLatLng = new google.maps.LatLng(23.7624286, 90.378406);

	// Google map options
	let mapOptions = {
	zoom: 12,
	center: defaultLatLng
	}

	const map = new google.maps.Map(document.getElementById("map"), mapOptions)

	let marker = new google.maps.Marker({
	position: defaultLatLng,
	})


	// Add marker to the map
	marker.setMap()

	Bkoi.onSelect(function () {

	// get selected data from dropdown list
	let selectedPlace = Bkoi.getSelectedData()

	let selectedPlaceMarker = new google.maps.LatLng(selectedPlace.latitude, selectedPlace.longitude)

	// Update marker position
	marker.setPosition(selectedPlaceMarker)

	map.zoom = 15

	// Update map center
	map.panTo(selectedPlaceMarker)

	// Add marker to the map
	marker.setMap(map)

	})
	}

	</script>

	</body>

	</html>