在網頁開發中，經常會用到地圖。而一個方便用戶搜索位置的搜索框也是必不可少的。下面是一個基于HTML5的地圖搜索框的示例代碼：

<div id="map-container">
<input type="text" id="map-search" placeholder="請輸入要搜索的地址">
<button id="map-btn">搜索</button>
<div id="map"></div>
</div>
<script>
// 在此處添加JavaScript代碼
</script>

代碼解釋：

1、首先我們在一個包含搜索框和地圖的容器中添加了一個input輸入框，一個搜索按鈕和一個用于顯示地圖的div。

2、我們還添加了一個placeholder屬性，以便在搜索框中顯示提示消息。

3、接下來，在我們的JavaScript代碼中，我們需要添加以下內容：

var map;
var searchBox;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
searchBox = new google.maps.places.SearchBox(document.getElementById('map-search'));
}
document.getElementById('map-btn').addEventListener('click', function() {
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
var marker = new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
});
if (place.geometry.viewport) {
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});

4、以上代碼是基于Google Maps API開發的地圖搜索功能。我們需要初始化地圖，并創建一個新的搜索框對象并將其綁定到我們的搜索輸入框上。

5、當用戶點擊搜索按鈕時，我們獲取搜索框中的值，并在地圖上顯示搜索結果。同時，我們還更新地圖的顯示范圍以包含所有搜索結果。

通過上述代碼，我們可以實現一個基本的地圖搜索框，使用戶可以方便地查找所需地址。