
<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>Combitrip API - Maps: With Autocomplete</title>
    <link href='https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,600' rel='stylesheet' type='text/css'>
    <style>
        body {
            font-family: Raleway, sans-serif;
        }

        .autocomplete-container {
            width: 400px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.85);
            position: absolute;
            left: 100px;
            top: 20px;
            z-index: 1000;
            border: 1px solid #999999;
            border-radius: 4px;
        }

        .autocomplete-container input {
            padding: 5px 12px;
        }

    </style>
</head>
<body>
<div class="autocomplete-container">
    <input id="ac" style="width:100%" type="text" autocomplete="off"/>
</div>

<div id="osm-map" style="width: 100%; height: 100%;"></div>

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://www.combitrip.org/api/public/combitrip.maps.min.js?key=32a61ca69e22441db052df11ab8ba02b"></script>
<script src="https://www.combitrip.org/api/public/combitrip.geocomplete.min.js?key=32a61ca69e22441db052df11ab8ba02b"></script>

<script>
    var _map_inst = null,
        _marker = null;

    new ABOSM("osm-map", {
        center: [40.744190, -73.993200],
        zoom: 10
    }).ready(function (inst) {
        _map_inst = inst;
    });

    $(function () {
        $("#ac").abgeo().bind("abgeo:place_changed", function (event, result) {
            _from_latlng = [result.geometry.location.lat(), result.geometry.location.lng()];
            if (_marker) {
                _marker.removeObj();
            }
            _marker = _map_inst.marker(_from_latlng);
            _map_inst.fitBounds(_marker);
            _map_inst.map.setZoom(10);
        });
    });
</script>

</body>