Google Maps Skript funktioniert nicht richtig

hugo1981

Erfahrenes Mitglied
Hallo @ll,

vielleicht/hoffentlich könnt Ihr mir wieder mal weiterhelfen. Entweder, bin ich wieder Blind und seh nichts mehr, oder ich habe irgendetwas nicht richtig verstanden. Foldender GoogleMaps Skript, funktioniert nur in FF teilweise. Im IE und Opera wird rein gar nichts angezeigt :(

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


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

    var map;
    var geocoder;
	// red marker icon
	var icon = new GIcon();
	icon.image = "http://labs.google.com/ridefinder/images/mm_20_blue.png";
	icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	icon.iconSize = new GSize(12, 20);
	icon.shadowSize = new GSize(22, 20);
	icon.iconAnchor = new GPoint(6, 20);
	//icon.infoWindowAnchor = new GPoint(5, 1);
	var marker=[];
	var point=[];	
	var line=null;
	var n=0;


function load() {
 if (GBrowserIsCompatible()) {
	 map = new GMap2(document.getElementById("map"));
	
	map.setCenter(new GLatLng(48.143411,11.580276), 13);
	//map.setZoom(13);
	map.mapControl = new GMapTypeControl();
	
	//map.addControl(new GMapTypeControl(1));
	map.addControl(new GLargeMapControl());
	map.addControl(new GScaleControl());
	map.setMapType(G_HYBRID_MAP);
    geocoder = new GClientGeocoder();
}
    }
 // addAddressToMap() is called when the geocoder returns an
    // answer.  It adds a marker to the map with an open info window
    // showing the nicely formatted version of the address and the country code.
    function addAddressToMap(response) {
      map.clearOverlays();
	
      if (!response || response.Status.code != 200) {
        alert("Sorry, we were unable to geocode that address");
	load();
      } else {

        place = response.Placemark[0];
        point[n] = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
	GUnload();
 	map = new GMap2(document.getElementById("map"));
	start =new GLatLng(place.Point.coordinates[1],	
                            place.Point.coordinates[0]);
	map.setCenter(start, 13);
	map.addControl(new GMapTypeControl(1));
	map.addControl(new GLargeMapControl());
	map.addControl(new GScaleControl());
        marker[n] = new GMarker(point[n], {icon:icon, draggable: true});
	marker[n].disableDragging();
	//GEvent.addListener(marker[n],'drag',function(){draw()});
        map.addOverlay(marker[n]);
	n++;
function() {
        marker.openInfoWindowHtml(place.address + '<br>' +
          '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
}

 document.forms[1].lon.value=place.Point.coordinates[1];
 document.forms[1].lat.value=place.Point.coordinates[0];

      }
    }
  // showLocation() is called when you click on the Search button
    // in the form.  It geocodes the address entered into the form
    // and adds a marker to the map at that location.
    function showLocation() {
	marker=[];
	point=[];
	line=null;
	n=0;
      var address = document.forms[0].q.value;
      geocoder.getLocations(address, addAddressToMap);
    }

   // findLocation() is used to enter the sample addresses into the form.
    function findLocation(address) {
      document.forms[0].q.value = address;
      showLocation();
    }


    //]]>
    </script>


Wäre super, wenn ihr mir Hinweise geben könntet, wo ich mist gebaut habe? Im FF funktioniert es,selbst das lässt sich das Point selber nicht verschieben... geht das überhaupt? Wisst ihr, wie ich Polygone oder einen einfachen Kreis in die Map zeichnen könnte um einen bestimmten Radius um einen Punkt durchsuchen zu lassen? :)
(sprich, den Radius auslesen und in eine Variable im Dokument speichern)

lg,
Hugo
 
Was genau funktioniert denn bei dir alles nicht?
Dass der marker nicht verschiebbar ist, liegt daran, dass das Skript ihn nicht verschiebbar macht:
Code:
marker[n].disableDragging();

Was den Kreis betrifft, das gibt die GMaps-API nicht her(zumindest nicht per Polygon):
Es gibt da zwar ein Modul für(XMaps), aber ich glaube, das ist nicht kompatibel mit der aktuellen GMaps-Version.

Du könntest da aber per new GGroundOverlay() eine eigene Grafik mit dem Kreis auf den entsprechenden Koordinaten platzieren.
 
Hallo,

ausser im Firefox wird die Map in keinem Browser angezeigt (IE, Opera).
In FF funktioniert auch schon die Adress suche, so dass in der Adresse ein Marker eingefügt wird..

Oh.. Auf Polygone einzeichnen kann ich verzichten, aber es wäre schon toll, wenn ich um den Marker ein Kreis ziehen könnte... das geht schon noch, oder?

Falls doch wäre es super, wenn Du /Ihr mir sagen könntest, wonach ich suchen muss bzw. wie ich das den User einzeichnen lassen kann :)
Ich will nämlich anhand des Radius des Kreises eine Suche um den Marker starten lassen...
das wäre wirklich eine tolle Sache :)

(es ist das erste mal, dass ich mit google maps arbeite, deswegen kenne ich mich da noch fast gar nicht aus. bin aber willig dazu zu lernen :) )

Vielen vielen Dank nochmal...
 
ausser im Firefox wird die Map in keinem Browser angezeigt (IE, Opera).
das DIV#map...hast du dem per CSS Breite und Höhe verpasst?
Falls nicht, tu dies, oder gebe beim erzeugen der Karte die Grösse an, welche sie haben soll.
Oh.. Auf Polygone einzeichnen kann ich verzichten, aber es wäre schon toll, wenn ich um den Marker ein Kreis ziehen könnte... das geht schon noch, oder?

Falls doch wäre es super, wenn Du /Ihr mir sagen könntest, wonach ich suchen muss bzw. wie ich das den User einzeichnen lassen kann :)

Hab ich doch geschrieben....füge eine Grafik mit einem Kreis auf der Karte ein, womit, steht auch in meinem vorrangegangenen Posting ;)
 
Hallo :)

vielen Dank für den Hinweis. Ja das "map" Div hat eine css breite und höhe.
Im neuen IE geht es jetzt auch. aber Opera streikt nach wie vor :(

:) Ich habe dein Post von oben nicht ignoriert :) Nur weiss ich grad nicht, wie ich das "on the fly" also nachträglich machen kann? So dass der Nutzer auf der Seite, auf der Map seinen eigenen Kreis (z.B um den Marker) ziehen kann..

(ich kann grad nicht testen, deswegen bitte nicht böse sein, wenn das jetzt ne dumme Frage war, bzw. new GGroundOverlay() das Problem schon löst.)

oh, jetzt seh ich, dass ich mich wohl verlesen habe und der Kreis selber auch nicht mehr unterstützt wird :'(

naja, schön wäre es gewesen...

Vielen Dank nochmal..
lg,
hugo
 
Hallo,

ja JS ist aktiviert in Opera. V 9.26 (müsste die aktuellste sein)

Hier mein kompletter code:
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>Nifty Corners: Javascript and CSS rounded corners</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="generator" content="HAPedit 3.1">
<link rel="stylesheet" href="default.css" type="text/css" media="screen" />

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAseNjd0vCelWT-KoLbLJQdhRyTHkg_c7lbAmzjzDANg2uUjeciRRJ5cq42Lwdt0z7pqgW4w7N3T_c_w"
      type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
  

    var map;
    var geocoder;
	// red marker icon
	var icon = new GIcon();
	icon.image = "http://labs.google.com/ridefinder/images/mm_20_blue.png";
	icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	icon.iconSize = new GSize(12, 20);
	icon.shadowSize = new GSize(22, 20);
	icon.iconAnchor = new GPoint(6, 20);
	//icon.infoWindowAnchor = new GPoint(5, 1);
	var marker=[];
	var point=[];	
	var line=null;
	var n=0;


function load() {
 if (GBrowserIsCompatible()) {
	 map = new GMap2(document.getElementById("map"));
	
	map.setCenter(new GLatLng(48.143411,11.580276), 13);
	//map.setZoom(13);
	map.mapControl = new GMapTypeControl();
	
	//map.addControl(new GMapTypeControl(1));
	map.addControl(new GLargeMapControl());
	map.addControl(new GScaleControl());
	map.setMapType(G_HYBRID_MAP);
    geocoder = new GClientGeocoder();
}
    }
 // addAddressToMap() is called when the geocoder returns an
    // answer.  It adds a marker to the map with an open info window
    // showing the nicely formatted version of the address and the country code.
    function addAddressToMap(response) {
      map.clearOverlays();
	
      if (!response || response.Status.code != 200) {
        alert("Sorry, we were unable to geocode that address");
	load();
      } else {

        place = response.Placemark[0];
        point[n] = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
	GUnload();
 	map = new GMap2(document.getElementById("map"));
	start =new GLatLng(place.Point.coordinates[1],	
                            place.Point.coordinates[0]);
	map.setCenter(start, 13);
	map.addControl(new GMapTypeControl(1));
	map.addControl(new GLargeMapControl());
	map.addControl(new GScaleControl());
        marker[n] = new GMarker(point[n], {icon:icon, draggable: true});
	marker[n].disableDragging();
	//GEvent.addListener(marker[n],'drag',function(){draw()});
        map.addOverlay(marker[n]);
	n++;
function() {
        marker.openInfoWindowHtml(place.address + '<br>' +
          '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
}

 document.forms[1].lon.value=place.Point.coordinates[1];
 document.forms[1].lat.value=place.Point.coordinates[0];

      }
    }
  // showLocation() is called when you click on the Search button
    // in the form.  It geocodes the address entered into the form
    // and adds a marker to the map at that location.
    function showLocation() {
	marker=[];
	point=[];
	line=null;
	n=0;
      var address = document.forms[0].q.value;
      geocoder.getLocations(address, addAddressToMap);
    }

   // findLocation() is used to enter the sample addresses into the form.
    function findLocation(address) {
      document.forms[0].q.value = address;
      showLocation();
    }


    //]]>
    </script>

<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#container");
Nifty("div#pagebody,div#nav","same-height small");
Nifty("div#header,div#footer,div#logo","small");
}
</script>
</head>

<body onload="load()" onunload="GUnload()">
<div id="container">
<div id="logo"><h1>&nbsp;</h1></div>
<div id="header">
  <h1>OVOO - where to be too</h1>
</div>
<div id="pagebody">
   <form action="#" onsubmit="showLocation(); return false;">
      <p>
        <b>Search for an address:</b>
        <input type="text" name="q" value="" class="address_input" size="40" />
        <input type="submit" name="find" value="Search" />	
      </p>
    </form>
    <div id="map" style="width: 500px; height: 300px"></div>


<form name="Eingabe" action="getRecomm.jsp" method="post">
	Your Number (separate Buddies with comma)<br><input type="text" name="nr" size="25"><br>
	Lon<br><input type=double name="lon" ><br>
	Lat<br><input type=double name="lat"><br>
	Radius<br><input type=double name="radius"><br>

	<SELECT NAME=mode>
          <Option> 0
          <Option> 1
          <Option> 2
           </SELECT>Mode<br>
<SELECT NAME=deg>

          <Option> 1
          <Option> 2
          <Option> 3
         <Option> 4
	 <Option> 5  
</SELECT>Distance to Mentor<br>

<SELECT NAME=exp>

          <Option> true
          <Option> false
</SELECT>Expert<br>

<select name="tags" size="7" multiple>
      <option value=1>Restaurant</option>
      <option value=2>Bars & Kenipen</option>
      <option value=3>Cafs</option>
      <option value=4>Kino</option>
      <option value=5>Kunst & Kultur</option>
      <option value=6>Nachtleben</option>
      <option value=7>Freizeit</option>
    </select>Kind of PoIs<br>
	<input type="submit" value="get">
	<input type="reset" value="Reset">
	</form>
</div>

<div id="nav">
<h2>your ovoo</h2>
<p>&nbsp;</p>
<p align="center"><img src="CIMG8905.jpg"></p>
<p>
    
<li/><a href="start.jsp">home</a>
<li/>
<a href="buddys.jsp">mobile buddies</a>
   <li/><a href="pois.jsp">Add PoIs</a>
  <li/><a href="ratings.jsp">Your Ratings</a>
  <li/><a href="upois.jsp">Rate PoIs</a>
<li/><act>Get Recommendation</act>
<li/><a href='logout.jsp'>Logout</a>

    
       
  
  </p>
</div>
<div id="footer">&copy;footer, 2007</div>
</div>
</body>
</html>

hoffentlich klappt es doch noch irgendwie.. verstehe aber nicht warum Opera noch rumzickt :))
 
Nimm mal dies heraus:
Code:
function() {
        marker.openInfoWindowHtml(place.address + '<br>' +
          '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
}

das macht keinen Sinn dort, und erzeugt einen JS-Fehler, der Opera in die Knie zwingt, wie es scheint.
 
Mein Problem bei Googlemaps ist folgendes; Mein API findet eine Adresse immer erst im 2ten Anlauf... zuerst landet er immer im blauen...
Kann mir jemand helfen?
Code:
  function load() {
      if (GBrowserIsCompatible()) {
        geocoder = new GClientGeocoder();
        map = new GMap2(document.getElementById('map'));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(47, 8.4), 8);
        //var searchResult = new GLatLng(47, 8.4)

           
      }
    }

function go() {
     var url = document.getElementById('searchUrltxt').value;
     location.href = url;
   }


   function searchLocations() {
     var address = document.getElementById('addressInput').value;
     geocoder.getLatLng(address, function(latlng) {
       if (!latlng) {
         alert(address + ' not found');
       } else {
        var result = createMarker(latlng);
        searchLocationsNear(latlng);
        map.addOverlay(result);
        map.setCenter(latlng, 13);
         
       }
     });
   }
 
Zurück