2
Я пытаюсь интегрировать Google maps Places search box в мое мобильное приложение jQuery.Переопределить Google Maps места поиска в стиле jqm
Я создал окно поиска с предпочтительным стилем в jQuery Mobile. Я бы хотел использовать это окно поиска вместо стандартного окна поиска google. Но по какой-то причине мой стиль окна поиска переместился с помощью стиля поиска в Google maps, как вы можете видеть на изображении ниже (1). Может кто-нибудь, пожалуйста, предложите мне способ достижения желаемого результата, показанного на рисунке 2. Пожалуйста, также найдите мой полный код. Я был бы благодарен за помощь.
На рисунке ниже (2) показывает, что я пытаюсь достичь.
Полный код
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
<!-- Google maps source for places seearch box and map display on page initilization-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<style>
#map-page, #map_canvas { width: 100%; height: 80%; padding: 0; }
.container_16, #set_location {
z-index:1;
}
.container_16 .alpha { clear-left: 0; }
.grid_3,.grid_13{ margin: 0; padding: 1.5% !important; border: 0; float: left; }
.container_16 { overflow: hidden; }
.container_16 .grid_3 {
width: 15.75% !important;
}
.container_16 .grid_13 {
width: 78.25% !important;
}
</style>
<script>
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
map.fitBounds(defaultBounds);
// Create the search box and link it to the UI element.
var input = /** @type {HTMLInputElement} */(
document.getElementById('search_location')); // pac-input changed to search_location
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));
// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
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)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// [END region_getplaces]
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div data-role="page" id="map-page" data-url="map-page">
<div data-role="header" data-theme="a">
<div>
<img id='houseid' style='width:120px; ' src="" alt="logo"/>
</div>
<div>
<a href="#popup_cancel" data-rel="popup" data-position-to="window" data-transition="pop" class=" ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-right ui-btn-a">Cancel</a>
</div>
</div>
<div class='container_16 ui-corner-all' style='background-color: white; z-index:1000000000 !important; ' >
<div class='grid_3' style='padding-top:0% !important; padding-bottom:0% !important;'>
<a id='location' style='padding: 0%; margin-top: 0.65em;' href="#" onclick='get_location()' class="ui-btn ui-corner-all ui-mini">
<img id='location_img' style='width:20px; padding:5px;' src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSwWvXKHpBpZ04VsfcHHtdjyHWhOrNq1zjDPWKg4vrg35wiPD8S8DQBSg" alt="HouseID">
</a>
</div>
<div class='grid_13' style='padding-top:0% !important; padding-bottom:0% !important;'>
<input id='search_location' type='search' style=''>
</div>
</div>
<div role="main" class="ui-content" id="map_canvas" style='padding:0%;'>
<!-- map loads here... -->
</div>
</div>
<div data-role="popup" id="popup_cancel" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a"> <!-- This div element is not allowing Google map to render -->
<h1>Cancel ?</h1>
</div>
<div role="main" class="ui-content">
<h5 class="ui-title">Are you sure you want to cancel and go back?</h5>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a ui-mini" data-rel="back">Cancel</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a ui-mini" data-rel="back" data-transition="flow">Delete</a>
</div>
</div>
</body>
</html>