Store Locator

Built with Google Fusion Tables

HTML

<!DOCTYPE html>
<html>
<head>
<style>
  #map_canvas { width: 500px; height: 400px; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head>
<body>

<div id="map_canvas"></div>

<div style="margin-top: 10px;">
  <label>Ort </label>
  <input type="text" id="query" />
  <input type="button" id="search" value="Search" />
</div>

</body>
</html>

JavaScript

var tableid = '1394299';

var style = [
  {
    featureType: "poi",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "administrative",
    elementType: "labels",
    stylers: [
      { hue: "#0099ff" },
      { visibility: "off" }
    ]
  },{
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "administrative",
    elementType: "geometry",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "water",
    elementType: "geometry",
    stylers: [
      { saturation: -99 },
      { lightness: 24 }
    ]
  },{
    featureType: "landscape",
    elementType: "geometry",
    stylers: [
      { lightness: -48 },
      { saturation: 24 },
      { hue: "#0091ff" }
    ]
  },{
    featureType: "road",
    stylers: [
      { invert_lightness: true },
      { visibility: "off" }
    ]
  },{
    featureType: "transit",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "administrative.country",
    elementType: "geometry",
    stylers: [
      { visibility: "simplified" },
      { hue: "#00a1ff" },
      { saturation: 53 },
      { lightness: -4 },
      { gamma: 0.32 }
    ]
  }
];

var blueMapType = new google.maps.StyledMapType(style,
   {name: "Standorte"});


var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById('map_canvas'), {
  center: new google.maps.LatLng(51.6452940493054, 9.3603515625),
  zoom: 5,

});

map.mapTypes.set('blue', blueMapType);
map.setMapTypeId('blue');

var layer = new google.maps.FusionTablesLayer(tableid, {map: map});

document.getElementById('search').onclick = function() {
  var query = document.getElementById('query').value.replace("'", "\\'");
  geocoder.geocode({address: query}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var g = results[0].geometry;
      map.fitBounds(g.viewport);
      layer.setQuery("SELECT * FROM " + tableid + " ORDER BY...