Google-Maps in DIV-Container anzeigen lassen

X

xxxmike

Erfahrenes Mitglied
ich würde gerne eine google maps in einem div container anzeigen lassen.
meine verusche schlugen bisher fehl. Denn ich möchte die Map per Ajax in einen Div
Container laden lassen.

Hier mein Versuch


der google map code (alleine wenn man dieses aufruft geht es)
diese datei nennt sich goggle.php

PHP: 
<!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"
      xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>die stadt</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=
    ABQIAAAAuOfmtoGdrQFB2vaeSi4ymxRjrhcpQDsfP7qxJGq29_eU_VADBxSYOFfypzhlDlpbf5Jjgg-p8cHxWw"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
   
        var map = new GMap2(document.getElementById("map"));
   map.addControl(new GLargeMapControl());
   map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(49.941598, 11.571146), 14);
   

   var point = new GLatLng(49.941598, 11.571146);
   var marker = new GMarker(point);
   //map.addOverlay(marker);


    GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("Dies sind die Landungsbrücken");
      });
   }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 400px" border=1></div>
  </body>
</html>


so möchte ich diese map in einen div laden

PHP: 
<a class="left" href="javascript:load(\'google.php\', \'inhalt\');">demo map</a>';

// in den container inhalt
	echo '<div id="inhalt"></div>';

wenn ich sozusagen auf den link klicke, bleibt alles weiß, dass heißt keine map


das wäre echt super wenn jemand hier einen Rat hätte, denn sonst muss ich vieles umbauen, was ich eigendlich nicht machen möchte.
Es wäre wichtig das diese Map in den Container geladen werden kann.

DANKE schon mal für jede HILFE und jeden TIPP
 
Hi,

das Java-Forum ist (bzw. war) der falsche Ansprechpartner, denn die Programmiersprache Java und die clientseitige Scriptsprache Javascript haben nichts miteinander zu tun.

mfg Maik
 
Welche Rolle soll AJAX dabei spielen?
Google Maps wird über eine JS-API bedient, und Zugriff auf diese bekommst du bereits durch einbinden des Skriptes von maps.google.com.
 
Danke Sven für Deine Antwort.

Habe mich warscheinlich nicht korrekt ausgedrückt.

Ich benutze ein Ajax Tab Sytem um inhalte zu laden. In einem Div sollte eben eine Karte von
Google geladen werden. Wenn ich dieses versuche, bleibt jedoch alles weiß.

DANKE
 
Die Funktion load() von Google erzeugt die Map in einem bestimmten Container, diesen müsstest du der Funktion als Argument übergeben:

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

In deinem Fall müsste dort also statt "map"...."inhalt" stehen.

Hier mal nen Beispiel, wie du load() mit der Übergabe von Parametern nutzen kannst:
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2010-02-13" />
<title>Test</title>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=deinMapsKey"></script>

<script type="text/javascript">
<!--
function load(container,args) 
{
   if (GBrowserIsCompatible()) 
   {
    
    var map = new GMap2(document.getElementById(container));
    var point = new GLatLng(args.lat,args.lng);
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(point, 14);
    var marker = new GMarker(point);
    GEvent.addListener( marker, 
                        "click", 
                        function() 
                        {
                          marker.openInfoWindowHtml(args.html);
                        }
                      );
     
    map.addOverlay(marker);
   }
}

//-->
</script>
</head>
<body>
<a  href="javascript:load('landungsbruecken',{'lat':53.545178,'lng': 9.968419,'html':'dies sind die Landungsbrücken'});">Landungsbrücken</a>
<div style="width:400px;height:300px;border:1px dotted f1f1f1;" id="landungsbruecken"></div> 

<a href="javascript:load('jungfernstieg',{'lat':53.55378,'lng': 9.99186,'html':'dies ist der Jungfernstieg'});">Jungfernstieg</a>
<div style="width:400px;height:300px;border:1px dotted f1f1f1;" id="jungfernstieg"></div> 
</body>
</html>
 
Erst mal Danke, aber irgendwie klappt das nicht bei mir:
Noch einmal, dann habe ich die Faxen dicke.

Anbei meine Versuche bisher:

Die Google Map php (Datei), die nennt sich bei mir plan.php
alleine kann ich diese aufrufen, dass ist kein Thema

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
<!-- Mimic Internet Explorer 7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
	<META NAME="ROBOTS" CONTENT="NOINDEX, FOLLOW">
    <meta name="description" content="">
    <meta name="keywords" content="">
	<title>firma</title>
	
<style>
<!--
.google-maps {
  position: relative;
  top: 1px;
  left:1px;
  width: 550px;
  height: 550px;
}
.groesser, .kleiner, .map-type {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 14px; height: 14px;
}

#groesser {
  top: -2px;
  left: -2px;
  background: url(images/plus.gif) no-repeat;
}

#kleiner {
  top: -2px;
  left: 15px;
  background: url(images/minus.gif) no-repeat;
}

#normal {
  top: -2px;
  left: 206px;
  width: 50px;
  height: 17px;
  background: url(/bilder/karte.gif) no-repeat;
}

#satellite {
  top: -2px;
  left: 259px;
  width: 50px;
  height: 17px;
  background: url(/bilder/satellit.gif) no-repeat;
}

#hybrid {
  top: -2px;
  left: 312px;
  width: 50px;
  height: 17px;
  background: url(/bilder/hybrid.gif) no-repeat;
}
-->
</style>	
<?


$strasse = 'Richard-Wagner-Strasse';
$ort = 'Bayreuth';
$plz = '95444';
$zoom = '13'; 




?>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=
ABQIAAAAuOfmtoGdrQFB2vaeSi4ymxRjrhcpQDsfP7qxJGq29_eU_VADBxSYOFfypzhlDlpbf5Jjgg-p8cHxWw"></script>

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

  function load(adresse)
  {
    if (GBrowserIsCompatible())
    {
      function TextualZoomControl() {
      }
      TextualZoomControl.prototype = new GControl();
      TextualZoomControl.prototype.initialize = function(countrydivcontainer)
      {
        var container = document.createElement("div");
        container.style.className = 'controls';

        var zoomOutDiv = document.createElement("div");
        zoomOutDiv.className = 'groesser';
        zoomOutDiv.id = 'kleiner';
        container.appendChild(zoomOutDiv);
        GEvent.addDomListener(zoomOutDiv, "click", function() {
          map.zoomOut();
        });

        var zoomInDiv = document.createElement("div");
        zoomInDiv.className = 'kleiner';
        zoomInDiv.id = 'groesser';
        container.appendChild(zoomInDiv);
        GEvent.addDomListener(zoomInDiv, "click", function() {
          map.zoomIn();
        });

        var mapTypeNormal = document.createElement("div");
        mapTypeNormal.className = 'map-type';
        mapTypeNormal.id = 'normal';
        container.appendChild(mapTypeNormal);
        GEvent.addDomListener(mapTypeNormal, "click", function() {
          map.setMapType(G_NORMAL_MAP);
        });

        var mapTypeSatellite = document.createElement("div");
        mapTypeSatellite.className = 'map-type';
        mapTypeSatellite.id = 'satellite';
        container.appendChild(mapTypeSatellite);
        GEvent.addDomListener(mapTypeSatellite, "click", function() {
          map.setMapType(G_SATELLITE_MAP);
        });

        var mapTypeHybrid = document.createElement("div");
        mapTypeHybrid.className = 'map-type';
        mapTypeHybrid.id = 'hybrid';
        container.appendChild(mapTypeHybrid);
        GEvent.addDomListener(mapTypeHybrid, "click", function() {
          map.setMapType(G_HYBRID_TYPE);
        });

        map.getContainer().appendChild(container);
        return container;
      }

      TextualZoomControl.prototype.getDefaultPosition = function() {
        return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
      }

      // Standort suchen
      var ziel = "<? echo ''.$strasse.'';?>,<? echo ''.$ort.'';?>,<? echo ''.$plz.'';?>";
      var map = new GMap2(document.getElementById("countrydivcontainer"));
      var geocoder = new GClientGeocoder();
      geocoder.getLatLng(
        ziel, function(point) {
          map.setCenter(point, <? echo ''.$zoom.'';?>);
          map.addControl(new TextualZoomControl());
          // pinnadel
          var icon = new GIcon();
          //icon.image = "images/pin.gif";
          icon.iconSize = new GSize(30, 35);
          icon.iconAnchor = new GPoint(20, 40);
          icon.infoWindowAnchor = new GPoint(5, 1);
          map.addOverlay(new GMarker(point, icon));
          
          
          
          
          
          
          
        }
      )
    }
  }
  //]]>
    </script>	
  </head>
  <body onload="load()" onunload="GUnload()">
	

<div id="countrydivcontainer" class="google-maps" style="border: 1px solid black"></div>
</body>
</html>


Hier nun mein Ajax Tab System sozusagen

PHP: 
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="#default" class="selected">Übersicht</a></li>
<li><a href="demo-beschreibung.php" rel="countrycontainer">Beschreibung</a></li>
<li><a href="demo-bilder.php" rel="countrycontainer">Bilder</a></li>
<li><a href="plan.php" rel="countrycontainer">Lageplan</a></li>
<li><a href="demo-kontakt.php" rel="countrycontainer">Kontakt</a></li>
</ul>

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px"></div>

Ich habe schon edliches versucht, bekomme das nicht gebacken.
Ich möchte das die plan.php in dem obigen Div dargestellt wird.
Das dürfte doch nicht so schwer sein, aber wie schon erwähnt, kappt das nicht.

Ich bedanke mich noch mal für jede Hilfe und jeden TIPP
 
xxxmike hat gesagt.:
Noch einmal, dann habe ich die Faxen dicke.
Zum Vergrößern anklicken....

Ich auch noch einmal...hab die Faxen nämlich schon dicke :-)

Wenn du dir das, was geantwortet wird, durchlesen und es versuchen würdest umzusetzen, hättest du eine Chance, zum Ziel zu kommen.

Ich sehe in deinem letzten Posting nichts, was
1. mit deinem Eingangsposting zu Tun hat
2.nichts, was auf die Vorschläge aus meiner Antwort eingeht

Bye
 
xxxmike hat gesagt.:
Die Google Map php (Datei), die nennt sich bei mir plan.php
alleine kann ich diese aufrufen, dass ist kein Thema

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
<!-- Mimic Internet Explorer 7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
	<META NAME="ROBOTS" CONTENT="NOINDEX, FOLLOW">
    <meta name="description" content="">
    <meta name="keywords" content="">
	<title>firma</title>
	
<style>
<!--
.google-maps {
  position: relative;
  top: 1px;
  left:1px;
  width: 550px;
  height: 550px;
}
.groesser, .kleiner, .map-type {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 14px; height: 14px;
}

#groesser {
  top: -2px;
  left: -2px;
  background: url(images/plus.gif) no-repeat;
}

#kleiner {
  top: -2px;
  left: 15px;
  background: url(images/minus.gif) no-repeat;
}

#normal {
  top: -2px;
  left: 206px;
  width: 50px;
  height: 17px;
  background: url(/bilder/karte.gif) no-repeat;
}

#satellite {
  top: -2px;
  left: 259px;
  width: 50px;
  height: 17px;
  background: url(/bilder/satellit.gif) no-repeat;
}

#hybrid {
  top: -2px;
  left: 312px;
  width: 50px;
  height: 17px;
  background: url(/bilder/hybrid.gif) no-repeat;
}
-->
</style>	
<?


$strasse = 'Richard-Wagner-Strasse';
$ort = 'Bayreuth';
$plz = '95444';
$zoom = '13'; 




?>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=
ABQIAAAAuOfmtoGdrQFB2vaeSi4ymxRjrhcpQDsfP7qxJGq29_eU_VADBxSYOFfypzhlDlpbf5Jjgg-p8cHxWw"></script>

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

  function load(adresse)
  {
    if (GBrowserIsCompatible())
    {
      function TextualZoomControl() {
      }
      TextualZoomControl.prototype = new GControl();
      TextualZoomControl.prototype.initialize = function(countrydivcontainer)
      {
        var container = document.createElement("div");
        container.style.className = 'controls';

        var zoomOutDiv = document.createElement("div");
        zoomOutDiv.className = 'groesser';
        zoomOutDiv.id = 'kleiner';
        container.appendChild(zoomOutDiv);
        GEvent.addDomListener(zoomOutDiv, "click", function() {
          map.zoomOut();
        });

        var zoomInDiv = document.createElement("div");
        zoomInDiv.className = 'kleiner';
        zoomInDiv.id = 'groesser';
        container.appendChild(zoomInDiv);
        GEvent.addDomListener(zoomInDiv, "click", function() {
          map.zoomIn();
        });

        var mapTypeNormal = document.createElement("div");
        mapTypeNormal.className = 'map-type';
        mapTypeNormal.id = 'normal';
        container.appendChild(mapTypeNormal);
        GEvent.addDomListener(mapTypeNormal, "click", function() {
          map.setMapType(G_NORMAL_MAP);
        });

        var mapTypeSatellite = document.createElement("div");
        mapTypeSatellite.className = 'map-type';
        mapTypeSatellite.id = 'satellite';
        container.appendChild(mapTypeSatellite);
        GEvent.addDomListener(mapTypeSatellite, "click", function() {
          map.setMapType(G_SATELLITE_MAP);
        });

        var mapTypeHybrid = document.createElement("div");
        mapTypeHybrid.className = 'map-type';
        mapTypeHybrid.id = 'hybrid';
        container.appendChild(mapTypeHybrid);
        GEvent.addDomListener(mapTypeHybrid, "click", function() {
          map.setMapType(G_HYBRID_TYPE);
        });

        map.getContainer().appendChild(container);
        return container;
      }

      TextualZoomControl.prototype.getDefaultPosition = function() {
        return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
      }

      // Standort suchen
      var ziel = "<? echo ''.$strasse.'';?>,<? echo ''.$ort.'';?>,<? echo ''.$plz.'';?>";
      var map = new GMap2(document.getElementById("countrydivcontainer"));
      var geocoder = new GClientGeocoder();
      geocoder.getLatLng(
        ziel, function(point) {
          map.setCenter(point, <? echo ''.$zoom.'';?>);
          map.addControl(new TextualZoomControl());
          // pinnadel
          var icon = new GIcon();
          //icon.image = "http://www.tutorials.de/forum/images/pin.gif";
          icon.iconSize = new GSize(30, 35);
          icon.iconAnchor = new GPoint(20, 40);
          icon.infoWindowAnchor = new GPoint(5, 1);
          map.addOverlay(new GMarker(point, icon));
          
          
          
          
          
          
          
        }
      )
    }
  }
  //]]>
    </script>	
  </head>
  <body onload="load()" onunload="GUnload()">
	

<div id="countrydivcontainer" class="google-maps" style="border: 1px solid black"></div>
</body>
</html>


Hier nun mein Ajax Tab System sozusagen

PHP: 
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="#default" class="selected">Übersicht</a></li>
<li><a href="demo-beschreibung.php" rel="countrycontainer">Beschreibung</a></li>
<li><a href="demo-bilder.php" rel="countrycontainer">Bilder</a></li>
<li><a href="plan.php" rel="countrycontainer">Lageplan</a></li>
<li><a href="demo-kontakt.php" rel="countrycontainer">Kontakt</a></li>
</ul>

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px"></div>


Ich möchte das die plan.php in dem obigen Div dargestellt wird.
Zum Vergrößern anklicken....
In ein HTML-Element des Hauptdokuments wird keine vollständige HTML-Datei geladen, sondern nur das, was in ihrem Dokumentkörper, also zwischen <body> ... </body>, enthalten ist.

Du darfst dein Gebilde ruhig zur Gegenkontrolle dem W3C-Validator vorstellen, und schauen, was er dir so alles an Fehlermeldungen antwortet.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück