Eredmény: 1 - 10 (10) összesen

Téma: Google maps API V3 magas szinten!!!

  1. #1
    Seo-Titán hunprobalazs logója
    Csatlakozott
    10-05-30
    Hely
    Sin City
    Hozzászólás
    2.177
    Begyűjtött 381 köszönetet
    269 hozzászólásával

    Kérdés Google maps API V3 magas szinten!!!

    Hali!
    Örülök és köszönöm, hogy benéztél, remélem fogsz is tudni segíteni majd...
    Arról lenne szó, hogy a most készülő oldalba szeretném beilleszteni a google maps-et, de nem akárhogyan. (Egyébként már az oldalon van több féle is belőlük, eddig még nem akadnak össze, de ez most nem téma, először működjön amit szeretnék. Hiába olvastam végig ez ügyben a netet, nem találtam rá orvosságot, kérem aki ért hozzá segítsen!!!)
    Na arról lenne szó, hogy mindenképpen V3, tartalmazzon LocalSearch funkciót, ami input bevitelű, nem pedig magán a térképen levő google hülyeség. Valamint markereket tudjak elhelyezni rajta MYSQL adatbázisból PHP-vel kiíratva.
    Nekem mind a 2 külön-külön megy, de hiába v3 mind2, egész egyszerűen nem tudtam összehozni őket, h ne akadjon össze. Ha meg nem akadt össze, akkor meg csak az egyik ment. Segítséget is tudok adni, mind a kettőre, csak valahogy össze kéne rakni...
    Keresős:
    HTML kód:
    <!--
     Copyright 2008 Google Inc.
     Licensed under the Apache License, Version 2.0:
     [url]http://www.apache.org/licenses/LICENSE-2.0[/url]
     --> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
      <head> 
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
        <title>Google AJAX Local Search API + Maps API v3 demo</title> 
        <link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet" type="text/css"/> 
        <link href="./places.css" rel="stylesheet" type="text/css"/> 
     
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
        <script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQ82LsCgTSsdpNEnB***toeJv4cdBSUkiLH6ntmAr_5O4EfjDwOa0oZBQ" type="text/javascript"></script> 
        <script type="text/javascript"> 
        //<![CDATA[
     
        // Our global state
        var gLocalSearch;
        var gMap;
        var gInfoWindow;
        var gSelectedResults = [];
        var gCurrentResults = [];
        var gSearchForm;
     
        // Create our "tiny" marker icon
        var gYellowIcon = new google.maps.MarkerImage(
          "design/semmi",
          new google.maps.Size(32, 42),
          new google.maps.Point(0, 0),
          new google.maps.Point(6, 20));
        var gRedIcon = new google.maps.MarkerImage(
          "design/semmi",
          new google.maps.Size(32, 42),
          new google.maps.Point(0, 0),
          new google.maps.Point(6, 20));
        var gSmallShadow = new google.maps.MarkerImage(
          "design/semmi",
          new google.maps.Size(22, 20),
          new google.maps.Point(0, 0),
          new google.maps.Point(6, 20));
     
         // Set up the map and the local searcher.
        function OnLoad() {
     
          // Initialize the map with default UI.
          gMap = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(47.498406,19.040758),
            zoom: 12,
            mapTypeId: 'roadmap',
    		mapTypeControlOptions: {
              style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
          });
          // Create one InfoWindow to open when a marker is clicked.
          gInfoWindow = new google.maps.InfoWindow;
          google.maps.event.addListener(gInfoWindow, 'closeclick', function() {
            unselectMarkers();
          });
     
          // Initialize the local searcher
          gLocalSearch = new GlocalSearch();
          gLocalSearch.setSearchCompleteCallback(null, OnLocalSearch);
        }
     
        function unselectMarkers() {
          for (var i = 0; i < gCurrentResults.length; i++) {
            gCurrentResults[i].unselect();
          }
        }
     
        function doSearch() {
          var query = document.getElementById("queryInput").value;
          gLocalSearch.setCenterPoint(gMap.getCenter());
          gLocalSearch.execute(query);
        }
     
        // Called when Local Search results are returned, we clear the old
        // results and load the new ones.
        function OnLocalSearch() {
          if (!gLocalSearch.results) return;
          var searchWell = document.getElementById("searchwell");
     
          // Clear the map and the old search well
          searchWell.innerHTML = "";
          for (var i = 0; i < gCurrentResults.length; i++) {
            gCurrentResults[i].marker().setMap(null);
          }
          // Close the infowindow
          gInfoWindow.close();
     
          gCurrentResults = [];
          for (var i = 0; i < gLocalSearch.results.length; i++) {
            gCurrentResults.push(new LocalResult(gLocalSearch.results[i]));
          }
     
          var attribution = gLocalSearch.getAttribution();
          if (attribution) {
            document.getElementById("searchwell").appendChild(attribution);
          }
     
          // Move the map to the first result
          var first = gLocalSearch.results[0];
          gMap.setCenter(new google.maps.LatLng(parseFloat(first.lat),
                                                parseFloat(first.lng)));
     
        }
     
        // Cancel the form submission, executing an AJAX Search API search.
        function CaptureForm(searchForm) {
          gLocalSearch.execute(searchForm.input.value);
          return false;
        }
     
     
     
        // A class representing a single Local Search result returned by the
        // Google AJAX Search API.
        function LocalResult(result) {
          var me = this;
          me.result_ = result;
          me.resultNode_ = me.node();
          me.marker_ = me.marker();
          google.maps.event.addDomListener(me.resultNode_, 'mouseover', function() {
            // Highlight the marker and result icon when the result is
            // mouseovered.  Do not remove any other highlighting at this time.
            me.highlight(true);
          });
          google.maps.event.addDomListener(me.resultNode_, 'mouseout', function() {
            // Remove highlighting unless this marker is selected (the info
            // window is open).
            if (!me.selected_) me.highlight(false);
          });
          google.maps.event.addDomListener(me.resultNode_, 'click', function() {
            me.select();
          });
          document.getElementById("searchwell").appendChild(me.resultNode_);
        }
     
        LocalResult.prototype.node = function() {
          if (this.resultNode_) return this.resultNode_;
          return this.html();
        };
     
        // Returns the GMap marker for this result, creating it with the given
        // icon if it has not already been created.
        LocalResult.prototype.marker = function() {
          var me = this;
          if (me.marker_) return me.marker_;
          var marker = me.marker_ = new google.maps.Marker({
            position: new google.maps.LatLng(parseFloat(me.result_.lat),
                                             parseFloat(me.result_.lng)),
            icon: gYellowIcon, shadow: gSmallShadow, map: gMap});
          google.maps.event.addListener(marker, "click", function() {
            me.select();
          });
          return marker;
        };
     
        // Unselect any selected markers and then highlight this result and
        // display the info window on it.
        LocalResult.prototype.select = function() {
          unselectMarkers();
          this.selected_ = true;
          this.highlight(true);
          gInfoWindow.setContent(this.html(true));
          gInfoWindow.open(gMap, this.marker());
        };
     
        LocalResult.prototype.isSelected = function() {
          return this.selected_;
        };
     
        // Remove any highlighting on this result.
        LocalResult.prototype.unselect = function() {
          this.selected_ = false;
          this.highlight(false);
        };
     
        // Returns the HTML we display for a result before it has been "saved"
        LocalResult.prototype.html = function() {
          var me = this;
          var container = document.createElement("div");
          container.className = "unselected";
          container.appendChild(me.result_.html.cloneNode(true));
          return container;
        }
     
        LocalResult.prototype.highlight = function(highlight) {
          this.marker().setOptions({icon: highlight ? gRedIcon : gYellowIcon});
          this.node().className = "unselected" + (highlight ? " red" : "");
        }
     
        GSearch.setOnLoadCallback(OnLoad);
        //]]>
    		function google_kereses_ellenorzes() {
    			if (document.forms['google_kereses'].queryInput.value=="Budapest") {
    				alert('Adjon meg keresési feltételt!');
    				document.forms['google_kereses'].queryInput.value='';
    				document.forms['google_kereses'].queryInput.focus();
    				return false;
    			} else {
    				document.forms['google_kereses'].submit();
    				return true;
    			}
    		}
        </script> 
      </head> 
      <body> 
        <div> 
          <div> 
            <div>
    		  <div id="map" style="width: 298px; height: 298px; top: 1px; left: 1px;"></div>
    		  <?php $mitkeres2 = 'Budapest'; ?>
    		  <form name="google_kereses">
    			  <div class="koncertek-a-kozeledben-mezo">
    				<input type="text" name="queryInput" id="queryInput" value="<?php echo $mitkeres2; ?>" onfocus="if(this.value=='Budapest')this.value = ''" onblur="if(this.value=='')this.value='Budapest'" onchange="google_kereses_ellenoriz();" />
    			  </div>
    			  <div class="koncertek-a-kozeledben-ok-gomb" onclick="doSearch()"></div>
    		  </form>
            </div> 
          </div> 
          <div> 
            <div id="searchwell" style="visibility: hidden; width: 0px; height: 0px;"></div> 
          </div>
        </div> 
      </body> 
    </html>
    Sok markeres:
    HTML kód:
    <title>Google Maps V3 API Sample</title>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <script type="text/javascript">
    
          var map;
          function initialize() {
            var mapDiv = document.getElementById('map-canvas');
            map = new google.maps.Map(mapDiv, {
              center: new google.maps.LatLng(47.180086, 19.503736),
              zoom: 6,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            });
          
            google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
          
          }
          
          function addMarkers() {
            var bounds = map.getBounds();
            var southWest = bounds.getSouthWest();
            var northEast = bounds.getNorthEast();
            var lngSpan = northEast.lng() - southWest.lng();
            var latSpan = northEast.lat() - southWest.lat();
            
    		<?php
    			$most = date("Y-m-d H:i:s");
    			$parancs = "SELECT * FROM koncertek WHERE eloado_id=$eloado_id AND idopont>'".$most."'";
    			$eredmeny = mysql_query($parancs);
    			while($sor = mysql_fetch_array($eredmeny)){
    				$koncerthelyszin_id = $sor["koncerthelyszin_id"];
    				$parancs2 = "SELECT koncertek.id, koncertek.koncerthelyszin_id, koncerthelyszinek.id, koncerthelyszinek.nev, koncerthelyszinek.koordinata
    							FROM koncertek
    							LEFT JOIN koncerthelyszinek
    							ON koncertek.koncerthelyszin_id=koncerthelyszinek.id WHERE koncerthelyszin_id=$koncerthelyszin_id";
    				$eredmeny2 =  mysql_query($parancs2);
    				$sor = mysql_fetch_array($eredmeny2); 
    				$nev = $sor["nev"];
    				$koordinata = $sor["koordinata"];
    		?>
              var latLng = new google.maps.LatLng(<?= $koordinata ?>);
              var marker = new google.maps.Marker({
                position: latLng,
                map: map,
    			title: '<?= $nev ?>',
    			icon: "design/map-kozelgo-jel.png"
              });
    		<?php
    			}
    			$parancs = "SELECT * FROM koncertek WHERE eloado_id=$eloado_id AND idopont<'".$most."'";
    			$eredmeny = mysql_query($parancs);
    			while($sor = mysql_fetch_array($eredmeny)){
    				$koncerthelyszin_id = $sor["koncerthelyszin_id"];
    				$parancs2 = "SELECT koncertek.id, koncertek.koncerthelyszin_id, koncerthelyszinek.id, koncerthelyszinek.nev, koncerthelyszinek.koordinata
    							FROM koncertek
    							LEFT JOIN koncerthelyszinek
    							ON koncertek.koncerthelyszin_id=koncerthelyszinek.id WHERE koncerthelyszin_id=$koncerthelyszin_id";
    				$eredmeny2 =  mysql_query($parancs2);
    				$sor = mysql_fetch_array($eredmeny2); 
    				$nev = $sor["nev"];
    				$koordinata = $sor["koordinata"];
    		?>
              var latLng = new google.maps.LatLng(<?= $koordinata ?>);
              var marker = new google.maps.Marker({
                position: latLng,
                map: map,
    			title: '<?= $nev ?>',
    			icon: "design/map-korabbi-jel.png"
              });
    		<?php
    			}
    		?>
          }
          
          google.maps.event.addDomListener(window, 'load', initialize);
        </script>
        <div id="map-canvas" style="width: 440px; height: 280px; margin-top: 10px;"></div>
    Előre is köszönöm fáradozásod...
    U.I.: Remélem jó topic-ban van, elvégre ez amolyan script cucc... Thanx!!!



  2. #2
    Seo-Titán hunprobalazs logója
    Csatlakozott
    10-05-30
    Hely
    Sin City
    Hozzászólás
    2.177
    Begyűjtött 381 köszönetet
    269 hozzászólásával

    Alapbeállítás re: Google maps API V3 magas szinten!!!

    Csodával határos módon 1 hét vért-izzadós-kínlódós görcsöléssel megoldottam, de azért köszi szépen...



  3. #3
    Bölcs djarni logója
    Csatlakozott
    08-05-08
    Hely
    Székesfehérvár
    Hozzászólás
    5.290
    Begyűjtött 597 köszönetet
    460 hozzászólásával

    Alapbeállítás re: Google maps API V3 magas szinten!!!

    Nos, ilyenkor kell megosztani a nagyközönséggel a megoldást. Ha már te is segítséget kértél itt, akkor leírhatnád, hogyan sikerült megoldalni, hátha valakinek hasznos lesz.

    Arni


    Prémium Linképítés - sikerek, kockázatok nélkül - Valódi értékek 10 éve.

  4. #4
    Mentor arth2o logója
    Csatlakozott
    10-03-11
    Hely
    Győr
    Hozzászólás
    408
    Begyűjtött 7 köszönetet
    2 hozzászólásával

    Alapbeállítás re: Google maps API V3 magas szinten!!!

    Remélem nem ilyen a kódod, mert a változók nagyon nincsenek ellenőrizve benne.

    SQL Injection:
    XXp://unixwiz.net/techtips/sql-injection.html

    #register_globals off



  5. #5
    Seo-Titán hunprobalazs logója
    Csatlakozott
    10-05-30
    Hely
    Sin City
    Hozzászólás
    2.177
    Begyűjtött 381 köszönetet
    269 hozzászólásával

    Alapbeállítás re: Google maps API V3 magas szinten!!!

    Igen, bocsi, gondoltam rá, de mondom max ha lesz rá igény, de ezekszerint van. Nem a kettőt próbáltam meghívni, hanem nagyon nehzen sikerült észrevennem egy függvényt ami meghívja a markert. Na azt sikerült összeoktojálnom, aztán valahogy sikerült, azért másolom a kódot az alábbiakban, hátha tényleg szüksége lesz rá valakinek. Ezzel az injection-os dologgal kapcsolatban csak annyit, hogy örültem, hogy így sikerült összehozni, biztos van bent szépséghiba, használatlan változó vagy valamilyen algoritmikus hiba, hiszen kitörölgettem, hozzáadtam meg mittomén, de köszi a figyelemfelhívást, erről a részről van szó, jó az én php-m is bent van, de az átírható persze:
    LocalResult.prototype.marker = function() {
    var me = this;
    if (me.marker_) return me.marker_;

    <?php
    $most = date("Y-m-d H:i:s");
    $parancs = "SELECT * FROM koncertek WHERE koncerthelyszin_id!=0 AND idopont>'".$most."'";
    $eredmeny = mysql_query($parancs);
    while($sor = mysql_fetch_array($eredmeny)){
    $koncerthelyszin_id = $sor["koncerthelyszin_id"];
    $parancs2 = "SELECT koncertek.id, koncertek.koncerthelyszin_id, koncerthelyszinek.id, koncerthelyszinek.nev, koncerthelyszinek.koordinata
    FROM koncertek
    LEFT JOIN koncerthelyszinek
    ON koncertek.koncerthelyszin_id=koncerthelyszinek.id WHERE koncerthelyszin_id=$koncerthelyszin_id";
    $eredmeny2 = mysql_query($parancs2);
    $sor = mysql_fetch_array($eredmeny2);
    $nev = $sor["nev"];
    $koordinata = $sor["koordinata"];
    ?>

    var marker = me.marker_ = new google.maps.Marker({
    position: new google.maps.LatLng(<?= $koordinata ?>),
    icon: gYellowIcon, title: '<?= $nev ?>', map: gMap});

    <?php
    }
    ?>
    };
    Köszi, üdv!



  6. #6
    Új tag
    Csatlakozott
    10-11-02
    Hozzászólás
    1
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Google maps API V3 magas szinten!!!

    Helló!

    Nekem is lenne egy hasonló jellegű munkám, admin felületen kellene egy térkép, amin meg kéne tudni jelölni egy pontot, és ennek a koordinátáit kéne kinyerni egy sima form input mezőjébe. Aztán persze frontend oldalon szükség szerint meg kéne jeleníteni egy térképet, melyen van egy marker az adott ponton.

    Utóbbival semmi probléma nincs is, csak a kérdés az, hogy admin felületre beincludolt térképen hogyan tudok egy markert létrehozni úgy, hogy egy input mezőbe bekerüljön automatikusan a longitude/latitude koordináta? Gondolom javascript segítségével a markereket és azok koordinátáit el lehet valahogy érni, csak erre még nem jöttem rá. Ehhez kéne némi segítség/útmutatás

    Gondolom nem manuálisan írjátok be Ti sem az adatbázisba a koordinátákat, ezért gondoltam egy kérést/kérdést megér, hogy ne kelljen n+1. emberként feltalálnom a spanyolviaszt.


    Előre is köszönöm a segítséged!

    Üdv,
    Ákos



  7. #7
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.744
    Begyűjtött 1.428 köszönetet
    892 hozzászólásával

    Alapbeállítás re: Google maps API V3 magas szinten!!!

    markert tudsz rárakni a térképre bármikor könnyedén pl
    Kód:
    var marker = new GMarker(point, {draggable: true});
    map.addOverlay(marker);
    ezzel egy mozgatható markert raksz a térképre, arra meg tudsz eventet rakni és pl a dragend-re és lekérdezni a koordinátáit.
    ha pedig címből akarod kinyerni a kordinátákat akkor a GClientGeocoder-t nézd meg a dokumentációban.
    itt egyébként mindenre megvan a válasz: http://code.google.com/apis/maps/doc...reference.html
    és a kísérletezéshez http://code.google.com/apis/ajax/pla...#map_simple_v3
    Idézet Bitman_ eredeti hozzászólása Hozzászólás megtekintése
    Helló!


    Előre is köszönöm a segítséged!

    Üdv,
    Ákos



    Utoljára módosítva: Geri által : 2010-11-02 22:52
    If debugging is the process of removing software bugs, then programming must be the process of putting them in.
    Ruby blog
    Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime.
    Respect all, fear none

  8. #8
    Új tag
    Csatlakozott
    11-01-29
    Hozzászólás
    28
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Google maps API V3 magas szinten!!!

    Én V3 APIval gyártok mindent, ami új, bár sok dologban jobb még az API 2. Hasonlót gyártottam, mint amiről itt ment a témázgatás: a térképen egy markert lerakok, és akinek van jogosultsága, az áthelyezheti, hogy pontosítsa a helyet.

    (JQuery is szükséges lesz a példa futtatásához.)

    Javascript a térképhez:

    Kód:
    function initialize() {
    
    		  var pangMapCenter = new google.maps.LatLng(47.4000, 19.05000);
    
    		  var pangOptions = {
    		  	      zoom: 15,
    		  	      center: pangMapCenter,
    		  	      mapTypeId: google.maps.MapTypeId.ROADMAP,
    		    	  streetViewControl: false
    		  	};
    
    		    var map = new google.maps.Map( document.getElementById("map"), pangOptions ); 
    
    		    var marker = new google.maps.Marker({
    		        position: pangMapCenter, 
    		        map: map,
    		        draggable: true 
    		    });
    
    		    google.maps.event.addListener(marker, 'dragend', function(event) {
    		    	SetPlaceCoors( marker.getPosition() );
    			});
    	  }
    
    	  google.maps.event.addDomListener(window, 'load', initialize);
    	  
    	  function SetPlaceCoors( newCoord )
    	  {
    		  $('#geoLat').val( newCoord.lat() );  
    		  $('#geoLng').val( newCoord.lng() ); 
    	  }
    A form, amit a térkép manipulál, nem látható csak a submit gomb. A térképen drag-n-droppal átrakhatják a markert, és ha elengedték, frissíti a pozíciót a lenti form mezőiben. Ha a submitra nyomnak, el is mentjük a változtatásokat.

    Kód:
    <form enctype="application/x-www-form-urlencoded" style="text-align: center;" action="" method="post"><dl class="zend_form">
    
    <input type="hidden" name="id" value="id112" id="id" />
    
    <input type="hidden" name="geoLat" value="47.4700" length="10" id="geoLat" />
    
    <input type="hidden" name="geoLng" value="19.0500" length="10" id="geoLng" />
    
    <input type="submit" id="submit" value="Koordináták mentése" /></dl></form>
    Most mondanám, hogy pillantsd meg a működést a ... oldalon (linket nem szeret az új userektől a fórum), de ezek a részek pont csak megfelelő jogosultságokkal elérhetőek, úgyhogy ha kérdés van, inkább itt kérdezzetek



  9. #9
    Új tag
    Csatlakozott
    11-03-23
    Hozzászólás
    2
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Google maps API V3 magas szinten!!!

    Sziasztok!

    Nekem egy olyan kérdésem lenne, hogy: adott egy oldal. Ez két részből áll. A második felét az oldalnak egy jQuery-s Ajax hívással jelenítem meg.
    Ezen van egy Google Maps térkép.
    Elsőre tökéletesen megjelenik. Ha azonban a második oldal részen mondjuk csinálok egy mentést - szintén AJAX-os - majd reload, akkor elcsúszva jelenik meg a térkép

    Tud-e valaki olyanra megoldást, hogy ezt hogyan lehetne elkerülni?
    A térkép betöltéséhez szükséges GoogleMaps API V3-at $(document).ready()-n belül hívom...

    Előre is köszi, ha kérdés van ne kíméljetek



  10. #10
    Új tag
    Csatlakozott
    11-03-23
    Hozzászólás
    2
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Google maps API V3 magas szinten!!!

    Első körös gyors megoldás eddig rá:
    setTimeout("mapLoad('"+param1+"','"+param2+"',.... .,'"+paramN+"')",1);

    function mapLoad(lat,lng,address){
    // load GoogleMap
    }



A téma címkéi:

Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •