2
Google maps Places search box을 jQuery Mobile App에 통합하려고합니다.Google지도 장소 검색 상자 스타일을 jqm으로 대체하십시오.
jQuery Mobile에서 선호하는 스타일링으로 검색 상자를 만들었습니다. 표준 Google 검색 상자 대신이 검색 상자를 사용하고 싶습니다. 그러나 어떤 이유로 Google 검색 상자 스타일링이 아래 이미지 (1)에서 볼 수있는 것처럼 Google지도 검색 상자 스타일에 의해 타개되고 있습니다. 누군가 제발 image2에 표시된 원하는 결과를 얻을 수있는 방법을 제안하시기 바랍니다 수 있습니다. 내 전체 코드도 찾으십시오. 나는 누군가의 도움에 감사 할 것입니다.
는
아래의 이미지 (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>