Przykład 4

Kod html z javascipt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Przykładd 4</title>
    <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAArbiX0r2iky5031cDgYOyEhRqb_XIGD5OQINYHfppf_Y3FA9_jBSv_sjWiQ3-xuQEzOH3-l-sI1j3NQ" type="text/javascript"></script>
</head>
<body onunload="GUnload()">

    <table border=1>
      <tr>
        <td>
           <div id="map" style="width: 550px; height: 450px"></div>
        </td>
        <td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;">
           <div id="side_bar"></div>
        </td>
      </tr>

    </table>

    <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {

      // this variable will collect the html which will eventually be placed in the side_bar
      var side_bar_html = "";

      // arrays to hold copies of the markers and html used by the side_bar
      // because the function closure trick doesnt work there
      var gmarkers = [];

      // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the side_bar
        gmarkers.push(marker);
        // add a line to the side_bar html
        side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
         return marker;
      }

      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }

      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng( 51.0,17.0), 10);

      // add the points
      var point = new GLatLng(51.0,17.1);
      var marker = createMarker(point,"Pierwszy marker","Tutaj możesz wpisać dowolny tekst<br>Pierwszy marker")
      map.addOverlay(marker);

      var point = new GLatLng(51.2,17.0);
      var marker = createMarker(point,"Drugi marker","Tutaj możesz wpisać dowolny tekst<br>Drugi marker")
      map.addOverlay(marker);

      var point = new GLatLng(51.1,17.0);
      var marker = createMarker(point,"Trzeci marker","Tutaj możesz wpisać dowolny tekst<br>Trzeci marker")
      map.addOverlay(marker);

      var point = new GLatLng(51.1,17.1);
      var marker = createMarker(point,"Czwarty marker","Tutaj możesz wpisać dowolny tekst<br>Czwarty marker")
      map.addOverlay(marker);

      var point = new GLatLng(51.1,17.12);
      var marker = createMarker(point,"Piaty marker","Tutaj możesz wpisać dowolny tekst<br>Piąty marker")
      map.addOverlay(marker);

      // put the assembled side_bar_html contents into the side_bar div
      document.getElementById("side_bar").innerHTML = side_bar_html;

    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
    //]]>
    </script>
</body>

</html>

Czerwony - klucz API, indywidualny dla każdej strony do wygenerowania ze strony Googla. Należy wygenerować tutaj, skopiować i wkleić dokładnie w miejsce czerwonej czcionki.

Zielony - funkcja określająca podstawowe cechy mapy (lokalizacja, wielkość zoom),

fiolet - funkcje tworzące menu (sidebar)

Niebieski - osadzenie mapy na stronie