I'm trying (unsuccessfully) to merge two examples of javascript into one another.
One of them, loads some data from cartoDB with Google maps as the base map and the other is a Google Maps search box. The map loads fine, but the search box just isn't doing anything, like I haven't linked the box to the function.
Standalone, the code for the function initAutocomplete works, it just doesn't when i combine it with the main function (in that nothing happens).
<!DOCTYPE html>
<html>
<head>
<title>Mapping</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
<![endif]-->3ae
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<!-- include google maps library *before* load cartodb.js -->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3&key=XXXXXXXXXXXXXXXXx"></script>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.uncompressed.js"></script>
<script>
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// [START region_getplaces]
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
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)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
// [END region_getplaces]
</script>
<script>
function main() {
var map;
// create google maps maps
var mapOptions = {
zoom: 10,
rotateControl: true,
rotateControlOptions: true,
streetViewControl: true,
scaleControl: true,
center: new google.maps.LatLng(53.408, -2.1674),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var url1 = 'https://XXXXX.cartodb.com/api/v2/viz/57963390-c37b-11e5-9814-0ecfd53eb7d3/viz.json';
var url2 = 'https://XXXXX.cartodb.com/api/v2/viz/c0ab0f9c-c69e-11e5-94b0-0e3ff518bd15/viz.json';
var url3 = 'https://XXXXX.cartodb.com/api/v2/viz/9f047b2a-c69f-11e5-bbf8-0e674067d321/viz.json';
var options = {
cartodb_logo: false,
layer_selector: true,
legends: true,
}
cartodb.createLayer(map, url1)
.addTo(map, 0) // ultimately not displayed
.done(function (layer) {
console.log('added url1 ',url1);
cartodb.createLayer(map, url2)
.addTo(map, 1) // ultimately not displayed
.done(function (layer) {
console.log('added url2 ',url2);
cartodb.createLayer(map, url3)
.addTo(map, 2) // displays OK
.done(function (layer) {
console.log('added url3 ',url3);
})
.error(function (){
console.log('problem adding 1st layer');
});
})
.error(function (){
console.log('problem adding 2nd layer');
});
})
.error(function () {
console.log('problem adding 3rd layer!');
});
}
window.onload = main;
</script>
</body>
</html>You aren't including the places library.
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key=XXXXXXXXXXXXXXXXx"></script>
And you aren't running the initAutocomplete function.
If you were running it as written, you would be creating two map objects, you need to modify it to us the map created in your main function. One options:
function initAutocomplete(map) {
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// [START region_getplaces]
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
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)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
code snippet: (the cartdb stuff won't work as the code you provided doesn't...)
function initAutocomplete(map) {
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// [START region_getplaces]
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
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)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
// [END region_getplaces]
function main() {
// create google maps maps
var mapOptions = {
zoom: 10,
rotateControl: true,
rotateControlOptions: true,
streetViewControl: true,
scaleControl: true,
center: new google.maps.LatLng(53.408, -2.1674),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
initAutocomplete(map);
var url1 = 'https://XXXXX.cartodb.com/api/v2/viz/57963390-c37b-11e5-9814-0ecfd53eb7d3/viz.json';
var url2 = 'https://XXXXX.cartodb.com/api/v2/viz/c0ab0f9c-c69e-11e5-94b0-0e3ff518bd15/viz.json';
var url3 = 'https://XXXXX.cartodb.com/api/v2/viz/9f047b2a-c69f-11e5-bbf8-0e674067d321/viz.json';
var options = {
cartodb_logo: false,
layer_selector: true,
legends: true,
}
cartodb.createLayer(map, url1)
.addTo(map, 0) // ultimately not displayed
.done(function(layer) {
console.log('added url1 ', url1);
cartodb.createLayer(map, url2)
.addTo(map, 1) // ultimately not displayed
.done(function(layer) {
console.log('added url2 ', url2);
cartodb.createLayer(map, url3)
.addTo(map, 2) // displays OK
.done(function(layer) {
console.log('added url3 ', url3);
})
.error(function() {
console.log('problem adding 1st layer');
});
})
.error(function() {
console.log('problem adding 2nd layer');
});
})
.error(function() {
console.log('problem adding 3rd layer!');
});
}
window.onload = main;html,
body,
#map {
height: 100%;
padding: 0;
margin: 0;
}<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.uncompressed.js"></script>
<link href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" rel="stylesheet" />
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>