Created
July 8, 2013 07:26
-
-
Save pboos/5946853 to your computer and use it in GitHub Desktop.
Script to show results on http://www.alle-immobilien.ch/ on a map. Takes a while to load the locations (limitation google maps api). Copy paste all the code into the javascript console and enjoy.
This file contains 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
// we can use jquery since site has it added | |
// 1. add header | |
document.oldWrite = document.write; | |
document.write = function(text) { | |
var parser = new DOMParser(); | |
var element = parser.parseFromString(text, "text/xml"); | |
var child = element.firstChild; | |
var element = document.createElement("script"); | |
element.src = child.getAttribute('src'); | |
element.type= "text/javascript"; | |
document.getElementsByTagName("head")[0].appendChild(element); | |
document.write = document.oldWrite; | |
}; | |
var element = document.createElement("script"); | |
element.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyAJ9eMeQCAhkFlbmVPdmgwO0Y5ECgVV-FA&sensor=true"; | |
element.type= "text/javascript"; | |
document.getElementsByTagName("head")[0].appendChild(element); | |
// 2. add div(map) element | |
$('<div id="map-canvas" style="height: 400px; width: 100%;"/>').insertAfter('#resultPanel'); | |
// 3. setup map | |
var map; | |
function initMap() { | |
var mapOptions = { | |
center: new google.maps.LatLng(47.4235585, 9.3770272), | |
zoom: 15, | |
mapTypeId: google.maps.MapTypeId.ROADMAP | |
}; | |
map = new google.maps.Map(document.getElementById("map-canvas"), | |
mapOptions); | |
} | |
function showMarkers() { | |
// 4. extract addresses | |
var streets = []; | |
var geocoder = new google.maps.Geocoder(); | |
$('#resultList .row').each(function(item){ | |
var title = $(this).find('h2').text(); | |
var street = $(this).find('.cell2').text().split('\n')[0]; | |
var info = $(this).find('.cell3 a').html(); | |
var link = 'http://www.alle-immobilien.ch/' + $(this).find('a').attr('href'); | |
streets.push({street: street, link: link, title: title, info: info}); | |
}); | |
// 4.1 lookup | |
var current = 0; | |
function resolve() { | |
if (current > streets.length - 1) { | |
resolveDone(); | |
return; | |
} | |
var item = streets[current]; | |
geocoder.geocode( { 'address': item.street + ', St. Gallen, Switzerland', 'region': 'ch' }, function(results, status) { | |
if (status == google.maps.GeocoderStatus.OK) { | |
item.location = results[0].geometry.location; | |
} else { | |
console.log("Unable to find address: " + status); | |
} | |
current++; | |
setTimeout(resolve, 1000); | |
showMarker(item); | |
}); | |
} | |
function resolveDone() { | |
alert('Loading markers done'); | |
} | |
resolve(); | |
} | |
// 5. show markers of addresses | |
function showMarker(item) { | |
var marker = new google.maps.Marker({ | |
position: item.location, | |
map: map, | |
title:"Wohnung" | |
}); | |
var contentString = '<div id="content">' | |
+ '<h2>' + item.title + '</h2>' | |
+ '<div>' + item.info + '</div>' | |
+ '<a href="' + item.link + '" target="_blank">Link</a>' | |
+ '</div>'; | |
var infowindow = new google.maps.InfoWindow({ content: contentString }); | |
google.maps.event.addListener(marker, 'click', function() { | |
infowindow.open(map,marker); | |
}); | |
} | |
setTimeout(initMap, 1000); | |
setTimeout(showMarkers, 1200); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment