Google Maps anzeigen via Javascript und ListIconGadget

hjbremer · Beitrag von **hjbremer** » 09.06.2011 10:34

Einmal angefangen und schon will man mehr.

Da Google so freundlich ist die GoogleApi auf Deutsch bereitzustellen, sind einfache Sachen auch für mich als Javascript Ahnungsloser halbwegs verständlich.

Hier ein Update leicht verändert und kombiniert mit einem ListIconGadget

Hier mein Beispiel

Code: Alles auswählen


Enumeration 1
   #mainwindow
   #subwindow
   #webgadget 
   #listicon
EndEnumeration

Procedure.s MakeHtmlCode(adresse.s = "")
   Protected html.s
   Protected *c.character
      
   ;nur für DataZeilen
   For *c = ?MapLabel To ?MapLabelEnd
      If *c\c = 0           
         *c\c = 13            ;Null Char zwischen Datas gegen Return tauschen
      EndIf   
   Next
   
   ;Script laden
   html = PeekS(?MapLabel, ?MapLabelEnd - ?MapLabel)
   
   If adresse
      html = ReplaceString(html, "List Deutschland", adresse)  ;Vorgabe im Script austauschen  (var meineadresse)   
   EndIf
      
   ProcedureReturn html  
   
DataSection
   MapLabel:
   
   Data.s "<html> "        ;Hochkomm anstatt " benutzt
   Data.s "<head> "
   Data.s "<script src='http://maps.google.com/maps?file=api'> </script> "
   Data.s "<script type='text/javascript'> "
   
   Data.s "   var map = null; "
   Data.s "   var geocoder = null; "
   Data.s "   var point = null; "
   Data.s "   var marker = null; "
   Data.s "   var meineadresse = 'List Deutschland'; "
      
   Data.s "   function initialize() "
   Data.s "   {if (GBrowserIsCompatible()) "
   Data.s "      {map = new GMap2(document.getElementById('meinekarte')); "
   Data.s "      map.addControl(new GOverviewMapControl()); "
   Data.s "      map.addControl(new GHierarchicalMapTypeControl()); "
   
   Data.s "      map.addControl(new GSmallZoomControl()); "  
   ;oder
   ;Data.s "      map.addControl(new GSmallMapControl()); "  
   ;Data.s "      map.addControl(new GLargeMapControl()); "  
         
   Data.s "      geocoder = new GClientGeocoder(); "
   Data.s "      geocoder.getLatLng(meineadresse, setpoint); }} " ;Adresse in Koordinaten wandeln, ruft setpoint() auf
         
   Data.s "   function setpoint(point) "
   Data.s "   {if (!point) "
   Data.s "      {alert(meineadresse + ' nicht gefunden'); } "
   Data.s "   else "
   Data.s "      {map.setCenter(point, 13, G_NORMAL_MAP); "      ;Zoom = 13, Map kann sein G_SATELLITE_MAP oder G_HYBRID_MAP
   Data.s "      marker = new GMarker(point); "
   Data.s "      map.addOverlay(marker); }} "   
            
   Data.s "   function showAddress(address) "
   Data.s "   {geocoder.getLatLng(address, setpoint)} "
         
   Data.s "</script> "
   Data.s "</head> "
         
   Data.s "<body onload='initialize()' onunload='GUnload()'> "
   
   Data.s "<form action='#' onsubmit='showAddress(this.address.value); return false'> "
   Data.s "   <div id='meinekarte' style='width: 460px; height: 435px'></div> "
   Data.s "   <input type='text' style='width: 400; height:25' name='address' value='List Mellhörn 50'> "
   Data.s "   <input type='submit' style='width:55; height:24' value='suchen'> "
   Data.s "</form> "
   Data.s "</body> "
   Data.s "</html> "
   ;oder IncludeBinary "C:\Bremer\BeispieleXX\allgemein\Googlemap\google4.html"
MapLabelEnd:
EndDataSection 

EndProcedure

Procedure GoogleMap(adresse.s = "")
   
   Shared googlemapwindow 
   
   If Not googlemapwindow 
      
      googlemapwindow = 1
      
      OpenWindow(#subwindow, 0, 0, 488, 518, "GoogleMap-Test", #PB_Window_ScreenCentered|#PB_Window_SystemMenu)
      StickyWindow(#subwindow, 1) 

      ContainerGadget(#PB_Any, 10, 10, 468, 468, #PB_Container_Double)  
         WebGadget(#webgadget, -8, -13, 500, 500, "", #PB_Web_Mozilla)  ;mit #PB_Web_Mozilla geht es besser ?!
      CloseGadgetList()
      
      SetGadgetItemText(#webgadget, #PB_Web_HtmlCode, MakeHtmlCode(adresse))
         
   Else
      
      ;das JavaScript läuft bereits, es wird nur noch die Funktion showAddress() aufgerufen
      adresse = ReplaceString("javascript:showAddress('newAdress')", "newAdress", adresse)                              
      SetGadgetText(#webgadget, adresse) 
                
   EndIf   

EndProcedure

Procedure Main()
   
   Shared googlemapwindow 
   
   Protected flags, event, item, adresse.s
   
   OpenWindow(#mainwindow, 0, 0, 800, 500, "Main",  #PB_Window_ScreenCentered |#PB_Window_SystemMenu)
      
   flags = #PB_ListIcon_AlwaysShowSelection | #PB_ListIcon_FullRowSelect
   flags | #PB_ListIcon_GridLines | #PB_ListIcon_CheckBoxes
   flags | #PB_ListIcon_MultiSelect
   
   ListIconGadget(#listicon, 10, 10, 780, 400, "", 22, flags)
      AddGadgetColumn(#listicon, 1, "Name", 150)
      AddGadgetColumn(#listicon, 2, "Plz Ort", 200)
      AddGadgetColumn(#listicon, 3, "Strasse", 200)
      AddGadgetColumn(#listicon, 4, "Land", 100)
      AddGadgetColumn(#listicon, 5, "Diverses", 100)
      
      AddGadgetItem(#listicon, -1, #LF$ + "Bremer" + #LF$ + "24534 Neumünster" + #LF$ + "Mühlenhof 5")
      AddGadgetItem(#listicon, -1, #LF$ + "Bremer" + #LF$ + "List" + #LF$ + "Am Hafen 1")
      AddGadgetItem(#listicon, -1, #LF$ + "Meier" + #LF$ + "Hamburg" + #LF$ + "Rehmstrasse 9")
     

   Repeat : event = WaitWindowEvent()
      
      Select EventWindow()
                        
            Case #subwindow
               If event = #PB_Event_CloseWindow
                  event = 0
                  googlemapwindow = 0
                  CloseWindow(#subwindow)
               EndIf
               
            Case #mainwindow
               
               Select Event               
                     
                  Case #PB_Event_Gadget
                     Select EventGadget()                     
                        Case #listicon
                           If EventType() = #PB_EventType_LeftClick
                              item = GetGadgetState(#listicon)
                              adresse = GetGadgetItemText(#listicon, item, 2) + " "
                              adresse + GetGadgetItemText(#listicon, item, 3) + " "
                              GoogleMap(adresse)
                           EndIf                     
                    
                     EndSelect
                     
               EndSelect        
               EndSelect
               
   Until event = #PB_Event_CloseWindow

EndProcedure

Main()

;Inhaltsverzeichnis von Maps Javascript API V2  
;  http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/v2/index.html
;SteuerElemente
;  http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/v2/controls.html
;Dienste
;  http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/v2/services.html

;Geocoding API   
;  http://code.google.com/intl/de-DE/apis/maps/documentation/geocoding/#Geocoding

und hier der Ursprung als Javascriptdatei, zusammengesucht aus den Google Beispielen

Code: Alles auswählen

<html> 
  <head>
   <script src="http://maps.google.com/maps?file=api&sensor=false"> </script>
   <script type="text/javascript"> 
 
     var map = null;
     var geocoder = null;
     var point = null;
     var marker = null;
     var meineadresse = "List Deutschland";
 
     function initialize() 
       {if (GBrowserIsCompatible()) 
       {map = new GMap2(document.getElementById("meinekarte"));
        map.addControl(new GSmallZoomControl());
        map.addControl(new GOverviewMapControl());
        map.addControl(new GHierarchicalMapTypeControl());
       
        geocoder = new GClientGeocoder();
        geocoder.getLatLng(meineadresse, setpoint); }}
        
     function setpoint(point)
        {if (!point)
            {alert(meineadresse + " nicht gefunden"); } 
         else 
            {map.setCenter(point, 13);
             marker = new GMarker(point);
             map.addOverlay(marker); }}     

     function showAddress(address) 
        {geocoder.getLatLng(address, setpoint)}
        
    </script> 
  </head>  
  
  <body onload="initialize()" onunload="GUnload()"> 
    
    <form action="#" onsubmit="showAddress(this.address.value); return false">

       <div id="meinekarte" style="width: 460px; height: 435px"></div>    
       <input type="text" style="width: 400; height:25" name="address" value="List Mellhörn 50"> 
       <input type="submit" style="width:55; height:24" value="suchen">
       
    </form> 

  </body> 
</html>

Frabbing · Beitrag von **Frabbing** » 16.06.2011 17:09

Tolle Sache, klappt richtig gut!
Hab grad noch keinen Verwendungszweck dafür, aber das kommt sicher noch.

hjbremer · Beitrag von **hjbremer** » 16.06.2011 23:49

Update der Datazeilen: einfach austauschen

Zoomen mit Mausrad, Löschen der Marker, Klick auf Marker gibt Koordinaten

Code: Alles auswählen

   Data.s "<html> "        
   Data.s "<head> "
   Data.s "<script src='http://maps.google.com/maps?file=api'> </script> "
   Data.s "<script type='text/javascript'> "
   
   Data.s "   var map = null; "
   Data.s "   var geocoder = null; "
   Data.s "   var point = null; "
   Data.s "   var marker = null; "
   Data.s "   var meineadresse = 'List Deutschland'; "
      
   Data.s "   function Initialize() "
   Data.s "   {if (GBrowserIsCompatible()) "
   Data.s "      {map = new GMap2(document.getElementById('meinekarte')); "
   Data.s "       map.addControl(new GSmallZoomControl());"        ;auch GSmallMapControl()) oder GLargeMapControl()
   Data.s "       map.addControl(new GOverviewMapControl());"
   Data.s "       map.addControl(new GHierarchicalMapTypeControl());"
   Data.s "       map.addControl(new GScaleControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(8,40)));"
   Data.s "       map.addMapType(G_SATELLITE_3D_MAP);"
   Data.s "       map.enableScrollWheelZoom();"  
   Data.s "       geocoder = new GClientGeocoder(); "
   Data.s "       geocoder.getLatLng(meineadresse, setpoint); }} " ;Adresse in Koordinaten wandeln, ruft setpoint() auf
         
   Data.s "   function setpoint(point) "
   Data.s "   {if (!point) "
   Data.s "      {alert(meineadresse + ' nicht gefunden'); } "
   Data.s "   else "
   Data.s "      {map.setCenter(point, 13, G_NORMAL_MAP); "      ;Zoom = 13, Map kann sein G_SATELLITE_MAP oder G_HYBRID_MAP
   Data.s "      marker = new GMarker(point); "
   Data.s "      GEvent.addListener(marker, 'click', function() {marker.openInfoWindow('Koordinaten<br>' + point)});"            
   Data.s "      map.addOverlay(marker); }} "   
   
   Data.s "   function showAddress(address) "
   Data.s "   {geocoder.getLatLng(address, setpoint)} "   ;ermittelt Koordinaten und übergibt diese an SetPoint()"
   
   Data.s "   function KillMarker()"
   Data.s "   {map.clearOverlays()}"      
   
   Data.s "</script> "
   Data.s "</head> "
         
   Data.s "<body onload='Initialize()' onunload='GUnload()'> "
   
   Data.s "<form action='#' onsubmit='showAddress(this.address.value); return false'> "
   Data.s "   <div id='meinekarte' style='width: 460px; height: 435px'></div> "
   Data.s "  <input type='button' style='width:55; height:23; color:green' value='löschen' onClick='KillMarker();'>"
   Data.s "  <input type='text' style='width: 345; height:23' name='address' value='List Mellhörn 40'>"
   Data.s "  <input type='submit' style='width:55; height:23; color:blue' value='suchen'>"
   Data.s "</form> "
   Data.s "</body> "
   Data.s "</html> "

Beitrag von **NicTheQuick** » 17.06.2011 16:00

Läuft leider unter Linux nicht. Um kompilieren zu können muss man zunächst das Mozilla-Flag beim Webgadget entfernen. Dann startet das Programm zwar, aber wenn sich nach einem Klick auf eines der Häkchen das zweite Fenster öffnet, bleibt dies nur leer und nach einiger Zeit kommt, dass die Seite nicht geladen werden kann.

Delle · Beitrag von **Delle** » 03.08.2011 01:00

Leider verbietet Google die Benutzung von Maps in Exen

hjbremer · Beitrag von **hjbremer** » 03.08.2011 11:20

Delle hat geschrieben:Leider verbietet Google die Benutzung von Maps in Exen

Wie kommst du darauf ?

Entscheidend ist privat oder irgendeine Art von gewerblich.

Solange das Programm zu Hause auf deinem Rechner bleibt und dort das Kartenmaterial ausschließlich zu privaten Zwecken genutzt wird, ist die Verwendung der Standard Google Api gestattet.

So habe ich das aus den Nutzungsbedingungen herausgelesen.

Bei gewerblicher Nutzung, egal in welcher Form, benötigt man die Erlaubnis der Rechteinhaber und/oder einen Anwalt.
Außerdem sollte man dann die Premium-Api benutzen.

Delle · Beitrag von **Delle** » 03.08.2011 12:35

Naja ich gehe aber davon aus, wenn einer hier ein Tool mit GMaps programmiert, dass er dieses auch veröffentlichen und nicht nur privat nutzen will

Andre · Beitrag von **Andre** » 03.08.2011 21:17

Delle hat geschrieben:Naja ich gehe aber davon aus, wenn einer hier ein Tool mit GMaps programmiert, dass er dieses auch veröffentlichen und nicht nur privat nutzen will

Das wäre auch genau mein Thema, da ich ggf. die Google Maps auch sehr gut für unser Projekt nutzen könnte.

Wenn es soweit, führt aber offenbar kein Weg um individuelle Verhandlungen mit Google herum, denn m.E. sollten ja auch unterschiedliche Preismodelle für z.B. Shareware oder andererseits 100000-fach verkaufte kommerzielle Laden-Software möglich sein..... Leider sind darüber aber keinerlei öffentliche Informationen verfügbar...

Delle · Beitrag von **Delle** » 03.08.2011 21:37

@Andre:

Naja ich konnte bisher jegliche GMaps-Anwendungen auch ohne .exe entwickeln.

Es geht also meistens alles browserbasiert (HTML, JavaScript, Ajax, PHP+MySQL).

PMV · Beitrag von **PMV** » 03.08.2011 22:12

Delle hat geschrieben:Leider verbietet Google die Benutzung von Maps in Exen

Ohne Quellenangabe ... sprich den Punkt in den Nutzungsbedingungen, wo das
verboten wird ... halte ich dagegen. Ich konnte nichts auf die schnelle finden.
Wobei die auch etwas undurchsichtig sind ... und ich kanns natürlich überlesen haben.

Aber mal davon abgesehen, kann ich mir ehrlich gesagt nicht wirklich vorstellen,
wo man das sinnvoll in eine Anwendung außerhalb des Browsers packen könnte.

MFG PMV

PureBoard

Google Maps anzeigen via Javascript und ListIconGadget

Google Maps anzeigen via Javascript und ListIconGadget

Re: Google Maps anzeigen via Javascript und ListIconGadget

Re: Google Maps anzeigen via Javascript und ListIconGadget

Re: Google Maps anzeigen via Javascript und ListIconGadget

Re: Google Maps anzeigen via Javascript und ListIconGadget

Re: Google Maps anzeigen via Javascript und ListIconGadget

Re: Google Maps anzeigen via Javascript und ListIconGadget

Re: Google Maps anzeigen via Javascript und ListIconGadget

Re: Google Maps anzeigen via Javascript und ListIconGadget

Re: Google Maps anzeigen via Javascript und ListIconGadget