Created
March 16, 2010 15:36
-
-
Save MBO/334105 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* How to build a Google Map and bind a SearchControl to it and put markers | |
* on the map for each result we receive. | |
*/ | |
// First, we have to load the APIs. | |
google.load('maps' , '2'); | |
google.load('search' , '1'); | |
// Global variables we will set in OnLoad | |
var map; | |
var searcher; | |
// Second, we set up our function, OnLoad | |
function OnLoad() { | |
// Get the content div and clear it's current contents. | |
var contentDiv = document.getElementById('content'); | |
contentDiv.innerHTML = ''; // Clear any content currently in the Div | |
// Next thing we have to do is build two divs to hold our stuff | |
var mapContainer = document.createElement('div'); // build the map div | |
mapContainer.style.height = '350px'; // set the map height | |
mapContainer.style.width = '350px'; // set the map width | |
var controlContainer = document.createElement('div'); // build the control div | |
controlContainer.style.width = '350px'; // set the control width | |
// Now we have to add these divs to the content div in the document body | |
contentDiv.appendChild(mapContainer); | |
//contentDiv.appendChild(controlContainer); | |
// We're ready to build our map... | |
map = new google.maps.Map2(mapContainer); | |
// ...and add a couple of controls. | |
map.addControl(new google.maps.SmallMapControl()); // Add a small map control | |
map.addControl(new google.maps.MapTypeControl()); // Add the map type control | |
// We'll wait to the end to actually initialize the map | |
// So let's build the search control | |
var searchControl = new google.search.SearchControl(); | |
// Initialize a LocalSearch instance | |
searcher = new google.search.LocalSearch(); // create the object | |
searcher.setCenterPoint(map); // bind the searcher to the map | |
// Create a SearcherOptions object to ensure we can see all results | |
var options = new google.search.SearcherOptions(); // create the object | |
options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN); | |
// Add the searcher to the SearchControl | |
searchControl.addSearcher(searcher , options); | |
// And second, we need is a search complete callback! | |
searchControl.setSearchCompleteCallback(searcher , function() { | |
map.clearOverlays(); | |
var results = searcher.results; // Grab the results array | |
// We loop through to get the points | |
for (var i = 0; i < results.length; i++) { | |
var result = results[i]; // Get the specific result | |
var markerLatLng = new google.maps.LatLng(parseFloat(result.lat), | |
parseFloat(result.lng)); | |
var marker = new google.maps.Marker(markerLatLng); // Create the marker | |
// Bind information for the infoWindow aka the map marker popup | |
marker.bindInfoWindow(result.html.cloneNode(true)); | |
result.marker = marker; // bind the marker to the result | |
map.addOverlay(marker); // add the marker to the map | |
} | |
// Store where the map should be centered | |
var center = searcher.resultViewport.center; | |
// Calculate what the zoom level should be | |
var ne = new google.maps.LatLng(searcher.resultViewport.ne.lat, | |
searcher.resultViewport.ne.lng); | |
var sw = new google.maps.LatLng(searcher.resultViewport.sw.lat, | |
searcher.resultViewport.sw.lng); | |
var bounds = new google.maps.LatLngBounds(sw, ne); | |
var zoom = map.getBoundsZoomLevel(bounds, new google.maps.Size(350, 350)); | |
// Set the new center of the map | |
// parseFloat converts the lat/lng from a string to a float, which is what | |
// the LatLng constructor takes. | |
map.setCenter(new google.maps.LatLng(parseFloat(center.lat), | |
parseFloat(center.lng)), | |
zoom); | |
}); | |
// Draw the control | |
searchControl.draw(controlContainer); | |
// Set the map's center point and finish! | |
map.setCenter(new google.maps.LatLng(37.443915 , -122.163610), 11); | |
// Execute an initial search | |
//searchControl.execute('pizza'); | |
setTimeout(function() {searchControl.execute(' near Berlin, Germany');}, 1000); | |
setTimeout(function() {searchControl.execute('p near Berlin, Germany');}, 3000); | |
setTimeout(function() {searchControl.execute('pi near Berlin, Germany');}, 5000); | |
setTimeout(function() {searchControl.execute('piz near Berlin, Germany');}, 7000); | |
setTimeout(function() {searchControl.execute('piza near Berlin, Germany');}, 9000); | |
setTimeout(function() {searchControl.execute('piz near Berlin, Germany');}, 11000); | |
setTimeout(function() {searchControl.execute('pizz near Berlin, Germany');}, 13000); | |
setTimeout(function() {searchControl.execute('pizze near Berlin, Germany');}, 15000); | |
setTimeout(function() {searchControl.execute('pizzer near Berlin, Germany');}, 17000); | |
setTimeout(function() {searchControl.execute('pizzeri near Berlin, Germany');}, 19000); | |
setTimeout(function() {searchControl.execute('pizzeria near Berlin, Germany');}, 21000); | |
setTimeout(function() {searchControl.execute('pizzeria near Berlin, Germany');}, 23000); | |
setTimeout(function() {searchControl.execute('pizzeria s near Berlin, Germany');}, 25000); | |
setTimeout(function() {searchControl.execute('pizzeria si near Berlin, Germany');}, 27000); | |
setTimeout(function() {searchControl.execute('pizzeria sic near Berlin, Germany');}, 29000); | |
setTimeout(function() {searchControl.execute('pizzeria sici near Berlin, Germany');}, 31000); | |
setTimeout(function() {searchControl.execute('pizzeria sicil near Berlin, Germany');}, 33000); | |
setTimeout(function() {searchControl.execute('pizzeria sicili near Berlin, Germany');}, 35000); | |
setTimeout(function() {searchControl.execute('pizzeria sicilia near Berlin, Germany');}, 37000); | |
} | |
google.setOnLoadCallback(OnLoad); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment