Da ich nichts wirklich einfaches gefunden hab wie man aus einer einfachen HTML Tabelle welche irgendwelche Orte enthält eine GoogleMap erstellen kann, hab ich selbst mal ein bisschen rumprobiert.

Zutaten:

  • jquery
  • einen Teelöffel Javascript
  • eine html tabelle

Zunächst habe ich eine einfache Tabelle erstellt und die wichtigen Daten mit eindeutigen class Namen kenntlich gemacht. In meiner Map will ich die Informationen "Name", "Beschreibung" und natürlich die Lage (Latitude, Longitude) unterbringen. Daher sieht meine Html Tabelle so aus:
Die angegebenen Punkte sind hier übrigens nur Beispielhaft angegeben, ich hab keine Ahnung was es dort gibt ;-)

PLAIN TEXT
HTML:
  1. <table id="data">
  3. <th>name</th>
  4. <th>description</th>
  5. <th>lat</th>
  6. <th>lng</th>
  7. </tr>
  9. <td class="name">Punkt 1</td>
  10. <td class="desc">Eine ganz tolle Beschreibung für Punkt 1</td>
  11. <td class="lat">37.4419</td>
  12. <td class="lng">-122.3419</td>
  13. </tr>
  15. <td class="name">Punkt 2</td>
  16. <td class="desc">Eine ganz tolle Beschreibung für Punkt 2</td>
  17. <td class="lat">37.5419</td>
  18. <td class="lng">-122.1419</td>
  19. </tr>
  21. <td class="name">Punkt 3</td>
  22. <td class="desc">Eine ganz tolle Beschreibung für Punkt 3</td>
  23. <td class="lat">37.3419</td>
  24. <td class="lng">-122.2419</td>
  25. </tr>
  27. <td class="name">Punkt 4</td>
  28. <td class="desc">Eine ganz tolle Beschreibung für Punkt 4</td>
  29. <td class="lat">37.6419</td>
  30. <td class="lng">-122.2419</td>
  31. </tr>
  32. </table>

Dann mein zusätzliches Javascript welches alle Zeilen der Tabelle in die Map einfügen soll sieht dank jquery so aus:

PLAIN TEXT
JAVASCRIPT:
  1. //<!--[CDATA[
  2. function createMarker(lat, lng, name, desc)
  3. {
  4. var point = new GLatLng(lat, lng);
  5. var marker = new GMarker(point);
  6. GEvent.addListener(marker, "click", function()
  7. {
  8. marker.openInfoWindowHtml("<b>" + name + "</b>" + desc);
  9. });
  10. return marker;
  11. }
  12.  
  13. function load()
  14. {
  15. if (GBrowserIsCompatible())
  16. {
  17. var map = new GMap2(document.getElementById("map"));
  18. map.setCenter(new GLatLng(37.4419, -122.1419), 10);
  19. getTableData(map);
  20. }
  21. }
  22.  
  23. function getTableData(map)
  24. {
  25. var data=new Array();
  26. $("#data").find('tr').each(function(i)
  27. {
  28. if(i>0) {
  29. map.addOverlay(
  30. createMarker(
  31. parseFloat(Number($(this).find('.lat').html())),
  32. parseFloat(Number($(this).find('.lng').html())),
  33. $(this).find('.name').html(),
  34. $(this).find('.desc').html())
  35. );
  36. }
  37. });
  38. }
  39.  
  40. $(load);
  41. //]]-->

Das Javascript sucht zunächst nach einem Element mit der id Data und fügt anschließend jedes "tr" in die Map ein. Zu guter letzt sagen wir noch mit "$(load)" das der Browser sobald alles geladen wurde die Funktion load aufrufen soll.
Um das Beispiel local laufen zu lassen oder auf eurer Seite müsst ihr euch noch einen eigenen GoogleMaps Api key holen (für lokales testen einfach einen ApiKey für http://localhost beantragen) und diesen im HTML Quelltext des Beispiels anpassen. Ebenso muss noch jquery inkludiert werden.

Zusammen mit jquery und dem GoogleMaps Javascript sieht das so aus: Beispiel

Mehr Infos: