0

I would like to include an autocomplete search bar that uses google maps api or bing maps geocoder, etc. Is there an easy way to integrate this with cartodb's search box?

// add search bar to map     
var v = cdb.vis.Overlay.create('search', map.viz, {});
v.show();
$('#map').append(v.render().el);
$('.cartodb-searchbox').find('input.text').attr('placeholder', 'Enter Location...');

2 Answers 2

0

You can extend the functionality of the cdb.geo.ui.Search (the searchbox) element (example here), but as you're going to create a complete new functionality for it, I would recommend you to add a textbox in your HTML code and set a new custom functionality for it.

Your call to Google/Bing/any geocoder will return some bounds or some specific coordinates for the location, so you just need to set your map accordingly after getting the results.

In my example about extending the Searchbox functionality, after getting the coordinates, the code is using:

 self.model.setCenter([coords[0].lat, coords[0].lon]);
 self.model.setZoom(10);

You can also use the function setBounds() if the API you use if returning the bounding box as a result.

Another sample code that may be useful for you, from the CartoDB.js documentation:

cartodb.createVis('map', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
.done(function(vis, layers) {
// layer 0 is the base layer, layer 1 is cartodb layer
// when setInteraction is disabled featureOver is triggered
layers[1].setInteraction(true);
layers[1].on('featureOver', function(e, latlng, pos, data, layerNumber) {
  cartodb.log.log(e, latlng, pos, data, layerNumber);
});

// you can get the native map to work with it
var map = vis.getNativeMap();

// now, perform any operations you need, e.g. assuming map is a L.Map object:
 map.setZoom(3);
 map.panTo([50.5, 30.5]);

});

This code is not really related with the searchbox thing, but it shows how to set a specific level of zoom (setZoom) and moving the map to a specific location (panTo). You can use these functions after obtaining the coordinates as a result of the query from your searchbox.

0

Figured out how to integrate google's api, an autocomplete search bar, and add a pin onto the appropriate part of the map in this example.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.