[Google Maps API] Problem mit map.addOverlay()

Ben · 19.01.2009, 11:59

Hallo,
ich mache gerade meine ersten Schritte mit der Google Maps API und habe ein Problem.

Folgender Code

index.php
Standardseite. Ausgelagerte JS-Funktionen und Kartendaten.

PHP-Code:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>Google Maps JavaScript API Example</title>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAalHnu7QjfveVbJVF-u4o2BT2mIp-oY-0zSNG68CWvho_oB_0txSf-adCIStIHhdkgb-DGjePYAWkpg"

      type="text/javascript"></script>

    <script src="js/google_map_data.php" type="text/javascript"></script>

    <script src="js/google_map_functions.js" type="text/javascript"></script>

  </head>

  <body>

    <div id="city_map" style="width:500px;height:300px"></div>

  </body>

</html>

google_map_data.php
Ich lese aus einer DB-Tabelle einige Städte mit Namen, Längen- und Breitengrad, sowie einer Beschreibung aus.

Die Datei enthält letztlich die Daten der Orte, die auf der Karte angezeigt werden sollen.

PHP-Code:

  <?php

 
// Mit der Datenbank verbinden

require_once('../../lib/db_connect.php');

 
$sql = "SELECT id, latitude, longitude, name, description

          FROM cities";

 
$res = mysql_query($sql) or exit(mysql_error());

 
$cities = array();

 
while( $city = mysql_fetch_assoc($res) ) {

    

    $cities[$city['id']] = array(

        'latitude'  => $city['latitude'],

        'longitude' => $city['longitude'],

        'name'      => $city['name'],

        'desc'      => $city['description'],

    );

 
}

 
echo "var cities = [" ."\n";

 
$i = 1;

$num = count($cities);

 
foreach( $cities as $city ) {

    

    echo "{" ."\n";

    

    echo "'latitude' :  ".$city['latitude'] .","  ."\n"; 

    echo "'longitude':  ".$city['longitude'].","  ."\n";

    echo "'name'     : '".$city['name']     ."'" ."\n";

    //echo "'desc'     : '".$city['desc']     ."'"  ."\n";

    

    if( $i < $num ) {

        echo "}," ."\n";        

    } else {

        echo "}" ."\n";

    }

    

    $i++;

}

 
echo "];";

 
?>

 
var centerLatitude  = 50.4419; 

var centerLongitude = 8.478032;

var startZoom = 6;

google_map_functions.js
Enthält die Funktionen, die mir die Karte so anzeigen, wie ich das gerne hätte.

PHP-Code:

  var map;

 
 
function addMarker(latitude, longitude, description) {

 
    var marker = new GLatLng(latitude, longitude);

    

    GEvent.addListener(marker, 'click',

        function() {

            marker.openInfoWindowHtml(description);

        }

    )

    

    map.addOverlay(marker);

}

 
 
function init() {

 
  if (GBrowserIsCompatible()) {

    

    var map = new GMap2(document.getElementById("city_map"));

    

    // kleines Navigationselement links oben einfuegen

    map.addControl(new GSmallMapControl());

    

    // location erstellen, um diese wiederverwenden zu koennen

    var location = new GLatLng(centerLatitude, centerLongitude)

    

    // Karte an der Startposition zentrieren 

    map.setCenter(location, startZoom);

    

    for( id in cities ) {

        addMarker(cities[id].latitude, cities[id].longitude, cities[id].description);

    }

    

    

  }

}

 
window.onload = init;

window.onunload = GUnload;

Jut, Fehler ist, dass mir der Marker nicht angezeigt wird.
Beispiel:

Code:

var cities = [
{
'latitude' :  52.526248,
'longitude':  13.41156,
'name'     : 'Berlin'
}
];

Die Fehlerkonsole sagt mir, dass die Variable "map" nicht definiert ist, aber eigentlich sollte da doch ein Objekt vom Typ GMap2 drin sein, oder?

Danke für die Hilfe. (Ist wahrscheinlich recht simpel ..

)

CIX88 · 20.01.2009, 08:03

Code:

<script type="text/javascript">

var map;
var marker;

var centerLatitude  = 50.4419;
var centerLongitude = 8.478032;
var startZoom = 6;

function addMarker(latitude, longitude, description) { 
	marker = new GLatLng(latitude, longitude);
	GEvent.addListener(marker, "click", 
		function() { 
			marker.openInfoWindowHtml(description); 
		} 
	);
	map.addOverlay( new GMarker(marker) );
}

function load() {
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallMapControl()); 
	var location = new GLatLng(centerLatitude, centerLongitude);
	map.setCenter(location, startZoom);
	addMarker(centerLatitude, centerLongitude, 'test');
}

</script>

Der Maker wird zwar angezeigt, aber leider dieses sch... openInfoWindowHtml() nicht.
Du hast bei dir new GMarker() vergessen ...

CIX88 · 28.01.2009, 07:33

Hmmm, hat sich etwas neues ergeben oder ist man abgestorben ?
:)

Ben · 28.01.2009, 10:57

Konnte es aus Zeitmangel noch nicht austesten. Ich melde mich, wenn ich es getan habe!

tanausu · 10.02.2009, 15:49

Moin @all,

bin auch API Anfänger und gerade über Google auf diesen Thread gestossen.
Ist zwar schon 2 Wochen alt und wahrscheinlich hast du die Lösung schon ...

Der EventListener erwartet ein anklickbares Overlay, in deiner Funktion werden aber nur Koordinaten übergeben.
So sollte es funktionieren:

Code:

function addMarker(latitude, longitude, description) {

// GLatLng ist ein Punkt, definiert durch die geografische Länge und Breite.
    var latlng = new GLatLng(latitude, longitude);

// Mit dieser Koordinate wird dann das klickbare Overlay erstellt
    var marker = new GMarker(latlng);

    GEvent.addListener(marker, 'click',
        function() {
            marker.openInfoWindowHtml(description);
        }
    )
    
    map.addOverlay(marker);
}

Geschmacksache:

var marker = new GMarker( new GLatLng(latitude, longitude));

19.01.2009, 11:59	Nach oben #1
Ben Erfahrener Benutzer Registriert seit: 02.12.2004 Ort: Koblenz Beiträge: 4.794	[Google Maps API] Problem mit map.addOverlay() Hallo, ich mache gerade meine ersten Schritte mit der Google Maps API und habe ein Problem. Folgender Code index.php Standardseite. Ausgelagerte JS-Funktionen und Kartendaten. PHP-Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAalHnu7QjfveVbJVF-u4o2BT2mIp-oY-0zSNG68CWvho_oB_0txSf-adCIStIHhdkgb-DGjePYAWkpg" type="text/javascript"></script> <script src="js/google_map_data.php" type="text/javascript"></script> <script src="js/google_map_functions.js" type="text/javascript"></script> </head> <body> <div id="city_map" style="width:500px;height:300px"></div> </body> </html> google_map_data.php Ich lese aus einer DB-Tabelle einige Städte mit Namen, Längen- und Breitengrad, sowie einer Beschreibung aus. Die Datei enthält letztlich die Daten der Orte, die auf der Karte angezeigt werden sollen. PHP-Code: <?php // Mit der Datenbank verbinden require_once('../../lib/db_connect.php'); $sql = "SELECT id, latitude, longitude, name, description FROM cities"; $res = mysql_query($sql) or exit(mysql_error()); $cities = array(); while( $city = mysql_fetch_assoc($res) ) { $cities[$city['id']] = array( 'latitude' => $city['latitude'], 'longitude' => $city['longitude'], 'name' => $city['name'], 'desc' => $city['description'], ); } echo "var cities = [" ."\n"; $i = 1; $num = count($cities); foreach( $cities as $city ) { echo "{" ."\n"; echo "'latitude' : ".$city['latitude'] ."," ."\n"; echo "'longitude': ".$city['longitude']."," ."\n"; echo "'name' : '".$city['name'] ."'" ."\n"; //echo "'desc' : '".$city['desc'] ."'" ."\n"; if( $i < $num ) { echo "}," ."\n"; } else { echo "}" ."\n"; } $i++; } echo "];"; ?> var centerLatitude = 50.4419; var centerLongitude = 8.478032; var startZoom = 6; google_map_functions.js Enthält die Funktionen, die mir die Karte so anzeigen, wie ich das gerne hätte. PHP-Code: var map; function addMarker(latitude, longitude, description) { var marker = new GLatLng(latitude, longitude); GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(description); } ) map.addOverlay(marker); } function init() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("city_map")); // kleines Navigationselement links oben einfuegen map.addControl(new GSmallMapControl()); // location erstellen, um diese wiederverwenden zu koennen var location = new GLatLng(centerLatitude, centerLongitude) // Karte an der Startposition zentrieren map.setCenter(location, startZoom); for( id in cities ) { addMarker(cities[id].latitude, cities[id].longitude, cities[id].description); } } } window.onload = init; window.onunload = GUnload; Jut, Fehler ist, dass mir der Marker nicht angezeigt wird. Beispiel: Code: var cities = [ { 'latitude' : 52.526248, 'longitude': 13.41156, 'name' : 'Berlin' } ]; Die Fehlerkonsole sagt mir, dass die Variable "map" nicht definiert ist, aber eigentlich sollte da doch ein Objekt vom Typ GMap2 drin sein, oder? Danke für die Hilfe. (Ist wahrscheinlich recht simpel .. ) __________________ Mehr TuS Koblenz geht nicht ... - TuS Koblenz Forum ... Benjamin Klaile ist noch in der Aufwärmphase

28.01.2009, 10:57	Nach oben #4
Ben Erfahrener Benutzer Registriert seit: 02.12.2004 Ort: Koblenz Beiträge: 4.794	Konnte es aus Zeitmangel noch nicht austesten. Ich melde mich, wenn ich es getan habe! __________________ Mehr TuS Koblenz geht nicht ... - TuS Koblenz Forum ... Benjamin Klaile ist noch in der Aufwärmphase

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche

28.01.2009, 07:33	Nach oben #3
CIX88 Erfahrener Benutzer Registriert seit: 18.03.2005 Beiträge: 696	Hmmm, hat sich etwas neues ergeben oder ist man abgestorben ? :)

10.02.2009, 15:49	Nach oben #5
tanausu Neuer Benutzer Registriert seit: 10.02.2009 Beiträge: 1	Moin @all, bin auch API Anfänger und gerade über Google auf diesen Thread gestossen. Ist zwar schon 2 Wochen alt und wahrscheinlich hast du die Lösung schon ... Der EventListener erwartet ein anklickbares Overlay, in deiner Funktion werden aber nur Koordinaten übergeben. So sollte es funktionieren: Code: function addMarker(latitude, longitude, description) { // GLatLng ist ein Punkt, definiert durch die geografische Länge und Breite. var latlng = new GLatLng(latitude, longitude); // Mit dieser Koordinate wird dann das klickbare Overlay erstellt var marker = new GMarker(latlng); GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(description); } ) map.addOverlay(marker); } Geschmacksache: var marker = new GMarker( new GLatLng(latitude, longitude));

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)