{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 ら.Afraid 的问题《How to integrate SearchBox in Google Maps JavaScri》','https://www.manongdao.com/q-369934.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I would like to create a google map with search box on top like on this side: https://google-developers.appspot.com/... with the JavaScript API v3.
At the moment I use the following code to show a map by getting the latitude and longitude in the url (php get):
<?php
$latitude = $_GET['lat'];
$longitude = $_GET['long'];
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
</script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
#search-panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#target {
width: 345px;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var input = document.getElementById('searchTextField');
var image = 'pin.png';
var myLatlng = new google.maps.LatLng(<?php echo "$latitude" ?>, <?php echo "$longitude" ?>);
var mapOptions = {
center: myLatlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new google.maps.Marker({
icon: image,
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP,
title:"You Location"
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
But I don't get it, to integrate the Search Box like on the named site!!!
Can someone help?
I edited the code to this, but I doesn't work!:
<?php
$latitude = $_GET['lat'];
$longitude = $_GET['long'];
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
#search-panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#target {
width: 345px;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var searchBox = new google.maps.places.SearchBox(input, {
bounds: defaultBounds // have to be defined first
});
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
// do your stuff here
var input = document.getElementById('searchTextField');
var image = 'pin.png';
var myLatlng = new google.maps.LatLng(<?php echo "$latitude" ?>, <?php echo "$longitude" ?>);
var mapOptions = {
center: myLatlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new google.maps.Marker({
icon: image,
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP,
title:"You Location"
var input = document.getElementById('target');
var searchBox = new google.maps.places.SearchBox(input);
var markers = [];
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
});
});
}
</script>
</head>
<body onload="initialize()">
<div id="search-panel">
<input id="target" type="text" placeholder="Search Box">
</div>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
You also have to load the Places Search Box:
Then you can listen to the
places_changedevent:Have a look at the source code of the example page you posted to get an idea of what to do in there, for example drawing markers etc.
You can find more information in the SearchBox API Documentation.