thingsinjars/jhere.css

## jhere.css
/* CSS */
html,body, #mapContainer {
  font-family:sans-serif;
  background:#fff;
  color:#444;
  height:100%;
  padding:0;
  margin:0;
}

## jhere.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Maps made simple with jHERE</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script src="jhere-custom.js"></script>
    <script src="jquery.xdomainajax.js"></script>
    <link rel="icon" href="http://jhere.net/favicon.ico">
  </head>
  <body>
    <div id="mapContainer"></div>
  </body>
</html>

## jhere.js
/* Javascript
 *
 * See http://jhere.net/docs.html for full documentation
 */
 $(window).on('load', function() {
   $.jHERE.defaultCredentials('_peU-uCkp-j8ovkzFGNU', 'gBoUkAMoxoqIWfxWA5DuMQ');
   $('#mapContainer').jHERE({
    enable: ['behavior', 'positioning'],
    center: [51,10.3],
    zoom: 6
  });
   navigator.geolocation.getCurrentPosition(show_map, handle_error);

 });
 function show_map(position) {
  //Position Map in the user's location
  $('#mapContainer').jHERE('center',position.coords);

  //Set a useful zoom
  $('#mapContainer').jHERE('zoom', 13);

  // Revese Geocode so we can get the user's posticode for the service lookup
  $.jHERE.reverseGeocode(position.coords,
   function(address){
    if(address && address.postalCode) {

      // Call the Apotheke service with the postcode to find the nearest open one
      $.get('http://www.apotheken.de/index.php?id=47&typ=4&plz='+address.postalCode+'&radius=5', function(responseText, response, text) {

        // This returns HTML so we parse it
       var allResults = $(responseText.responseText).find('table tr');

       // Map the table data into a JSON object
       var AoA = allResults.map(function(){
        return [
        $('td',this).map(function(){
          return $(this).text();
        }).get()
        ];
      }).get();

       // Get rid of the table head
       AoA.shift();

       // For each result, geocode and get their position
       for(var i=0;i<AoA.length;i++) {

        var pharmacyName = AoA[i][0].replace(/\n/g,"").replace(/\s{2,}/g," ");

        // Tidy the address
        var pharmacyAddress = (AoA[i][1].replace(/\n.*\n\s+$/gm,'')+', Germany').replace(/\n/g,"").replace(/\s{2,}/g," ");

        var pharmacyOpeningHours = AoA[i][3];
        debugger;

        // Get the lat/lng
        $.jHERE.geocode(pharmacyAddress, function(pharmacyName, pharmacyAddress, pharmacyOpeningHours) {
          return function(position) {
            // Add a marker at the right position containing the opening ours
            // in the marker data
            $('#mapContainer').jHERE('marker', position, {text: "!",  click: function(e){
              $('#mapContainer').jHERE('bubble', [e.geo.latitude,e.geo.longitude], {content: pharmacyName+"<br>"+pharmacyAddress+"<br>"+pharmacyOpeningHours});
            }});
          }
        }(pharmacyName, pharmacyAddress, pharmacyOpeningHours),function(error) {console.log(error);})
       }
     })
    }
  },
  function(){/*error*/});
}
function handle_error(error) {}
	/* CSS */
	html,body, #mapContainer {
	font-family:sans-serif;
	background:#fff;
	color:#444;
	height:100%;
	padding:0;
	margin:0;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Maps made simple with jHERE</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
	<script src="jhere-custom.js"></script>
	<script src="jquery.xdomainajax.js"></script>
	<link rel="icon" href="http://jhere.net/favicon.ico">
	</head>
	<body>
	<div id="mapContainer"></div>
	</body>
	</html>
	/* Javascript
	*
	* See http://jhere.net/docs.html for full documentation
	*/
	$(window).on('load', function() {
	$.jHERE.defaultCredentials('_peU-uCkp-j8ovkzFGNU', 'gBoUkAMoxoqIWfxWA5DuMQ');
	$('#mapContainer').jHERE({
	enable: ['behavior', 'positioning'],
	center: [51,10.3],
	zoom: 6
	});
	navigator.geolocation.getCurrentPosition(show_map, handle_error);

	});
	function show_map(position) {
	//Position Map in the user's location
	$('#mapContainer').jHERE('center',position.coords);

	//Set a useful zoom
	$('#mapContainer').jHERE('zoom', 13);

	// Revese Geocode so we can get the user's posticode for the service lookup
	$.jHERE.reverseGeocode(position.coords,
	function(address){
	if(address && address.postalCode) {

	// Call the Apotheke service with the postcode to find the nearest open one
	$.get('http://www.apotheken.de/index.php?id=47&typ=4&plz='+address.postalCode+'&radius=5', function(responseText, response, text) {

	// This returns HTML so we parse it
	var allResults = $(responseText.responseText).find('table tr');

	// Map the table data into a JSON object
	var AoA = allResults.map(function(){
	return [
	$('td',this).map(function(){
	return $(this).text();
	}).get()
	];
	}).get();

	// Get rid of the table head
	AoA.shift();

	// For each result, geocode and get their position
	for(var i=0;i<AoA.length;i++) {

	var pharmacyName = AoA[i][0].replace(/\n/g,"").replace(/\s{2,}/g," ");

	// Tidy the address
	var pharmacyAddress = (AoA[i][1].replace(/\n.*\n\s+$/gm,'')+', Germany').replace(/\n/g,"").replace(/\s{2,}/g," ");

	var pharmacyOpeningHours = AoA[i][3];
	debugger;

	// Get the lat/lng
	$.jHERE.geocode(pharmacyAddress, function(pharmacyName, pharmacyAddress, pharmacyOpeningHours) {
	return function(position) {
	// Add a marker at the right position containing the opening ours
	// in the marker data
	$('#mapContainer').jHERE('marker', position, {text: "!", click: function(e){
	$('#mapContainer').jHERE('bubble', [e.geo.latitude,e.geo.longitude], {content: pharmacyName+"<br>"+pharmacyAddress+"<br>"+pharmacyOpeningHours});
	}});
	}
	}(pharmacyName, pharmacyAddress, pharmacyOpeningHours),function(error) {console.log(error);})
	}
	})
	}
	},
	function(){/error/});
	}
	function handle_error(error) {}