Google Maps api v3 overlay image with search Bar
Question
I am trying to add a search bar to google maps. I have already overlayed an image onto the map and it works, but when I add the search bar feature it doesnt seem to work. When I have the two separate components for google maps ie just the overlay it shows, just the search box it shows, but when I combine the two codes, only the search bar shows up and it doesnt seem to work. I tried to jsfiddle and I couldnt get it to work on there either. Any help would be greatly appreciated
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
.controls {
margin-top: 16px;
border: 1px solid transparent:
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
bacground-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px:
text-overflow: ellipsis;
width: 400px:
}
#pac-input:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var overlay;
testOverlay.prototype = new google.maps.OverlayView();
function initialize() {
var markers = [];
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(39.25,-76.5),
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
var bounds21222 = { east: -76.443482, west: -76.540847, south: 39.214707, north: 39.293047}
var swBound = new google.maps.LatLng(bounds21222.south, bounds21222.west);
var neBound = new google.maps.LatLng(bounds21222.north, bounds21222.east);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var srcImage = 'ratio.png';
overlay = new testOverlay(bounds, srcImage, map);
}
function testOverlay(bounds, image, map){
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.div_ = null;
this.setMap(map);
}
testOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.opacity = '0.75';
img.style.position = 'absolute'
div.appendChild(img);
this.div_ = div;
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
testOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
testOverlay.prototype.updateBounds = function(bounds){
this.bounds_ = bounds;
this.draw();
};
testOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
// Create the Search Box and link it to the UI Element
var input = /** @type {HTMLInputElement} */ ( document.getElementById('pac-input'));
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():
if (places.length == 0) {
return;
}
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)
};
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
}):
markers.push(maker):
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>
</body>
</html>
1 answers
solution1
0 2015-06-09 13:18:27
Move the initialization of the SearchBox inside the initialize function. The initialize functions runs when the window onload event fires after the DOM is created. Before that (when it is currently running) the <input> that it is looking for can't be found.
You also have a bunch of syntax errors (":" where there should be ";")
function initialize() {
var markers = [];
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(39.25, -76.5)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
var bounds21222 = {
east: -76.443482,
west: -76.540847,
south: 39.214707,
north: 39.293047
};
var swBound = new google.maps.LatLng(bounds21222.south, bounds21222.west);
var neBound = new google.maps.LatLng(bounds21222.north, bounds21222.east);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var srcImage = 'ratio.png';
overlay = new testOverlay(bounds, srcImage, map);
// Create the Search Box and link it to the UI Element
var input = /** @type {HTMLInputElement} */
(document.getElementById('pac-input'));
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();
if (places.length == 0) {
return;
}
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)
};
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(maker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Google Maps API v3 Circle Overlay Issues
Allow only one overlay in google maps api v3
Custom Overlay in Google Maps API V3 Distortion
Expandable map marker overlay for Google Maps API v3
Link <a> Overlay on a Marker with Google Maps API V3
Erratic overlay behavior with custom projection, Google Maps API v3
Moving a custom overlay in Google Maps javascript API v3
How to pan a map to a floatPane overlay in Google Maps API V3?
Google Maps Api V3: Overlay ImageMap with loading indicators
How to access overlay argument in Google Maps API v3
Related Tags