Google Maps searchbox with autocomplete

I was sitting trying to do some mods on a Queclink GL200 GPS transmitter for the MPS project. After many hours of no luck at all I gave up for the day. If anyone have some input on that please contact me!

So i started messing around with the Google Maps API demo that I made for them instead. Adding some auto complete to the search form instead. I thought I would share what I managed to do. The challange is to do a mach up of Google Maps API and jQuery to get it to work good.

The trick is to attach the jQuery handler to the object. Why?
You have to create the search box dynamically in order to push it on top of the Google Maps canvas.

Entire demo can be found here:

First initialize the map and all it’s settings:
var map;
var addressField;
var geocoder;

$(document).ready(function () {
// Define map options
var mapOptions = {
center: new google.maps.LatLng(57.698254, 12.037024),
zoom: 16,
mapTypeId: google.maps.MapTypeId.HYBRID,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true

// Define map
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

// Define Gecoder
geocoder = new google.maps.Geocoder();

// Init searchbox

function initSearchBox() {
// Add searchbox
var searchControlDiv = document.createElement(‘div’);
var searchControl = new SearchControl(searchControlDiv, map);

searchControlDiv.index = 1;
As you can see we initialize the search box control and put it in a div at the top of the canvas. This is how we create the control and it’s auto complete function:
[js firstline=”38″]
function SearchControl(controlDiv, map) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map. = ‘5px’;

// Set CSS for the control border.
var controlUI = document.createElement(‘div’); = ‘white’; = ‘solid’; = ‘2px’; = ‘pointer’; = ‘center’;
controlUI.title = ‘Sök ex: gatunamn, stad’;

// Create the search box
var controlSearchBox = document.createElement(‘input’); = ‘search_address’;
controlSearchBox.size = ’80’;
controlSearchBox.type = ‘text’;
So when you have gotten this far in the code you have the search input box as a VAR. Now whe can use that VAR to attache the function for the auto complete to it:
[js firstline=”61″]
// Initiat autocomplete
$(function () {
source: function (request, response) {

if (geocoder == null) {
geocoder = new google.maps.Geocoder();

‘address’: request.term
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var searchLoc = results[0].geometry.location;
var lat = results[0];
var lng = results[0].geometry.location.lng();
var latlng = new google.maps.LatLng(lat, lng);
var bounds = results[0].geometry.bounds;

‘latLng’: latlng
}, function (results1, status1) {
if (status1 == google.maps.GeocoderStatus.OK) {
if (results1[1]) {
response($.map(results1, function (loc) {
return {
label: loc.formatted_address,
value: loc.formatted_address,
bounds: loc.geometry.bounds
select: function (event, ui) {
var pos = ui.item.position;
var lct = ui.item.locType;
var bounds = ui.item.bounds;

if (bounds) {
Then finish up creating the object and push it the the Google Maps Canvas as a custom control:
// Set CSS for the control interior.
var controlText = document.createElement(‘div’); = ‘Arial,sans-serif’; = ’12px’; = ‘4px’; = ‘4px’;

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: