Avatar billede cronaldo Nybegynder
12. april 2010 - 21:27 Der er 9 kommentarer og
1 løsning

Google maps - hent koordinater udfra en adresse.

Hej eksperter.. Jeg ønsker at benytte flg. kode:
http://code.google.com/intl/da-DK/apis/maps/documentation/examples/streetview-photos.html

Altså en visning af BÅDE google maps samt google maps med street view.
Dog skal det ikke blot være ud fra en normal adresse, men ud fra forskellige adresse, som jeg får fra en database.

Hvordan gør jeg det?
Jeg skal selvfølgelig bruge deres geocoding, men da jeg helst ikke vil benytte nogle knapper (og onclick) skal det hele helst udføres onload .. dog helst uden den egentlige "onload" attribut, men gerne kunne indsættes i den "normale" html kode MELLEM body-tagsene..

Hvordan gør jeg det?
Avatar billede intenz Novice
12. april 2010 - 21:36 #1
Jeg læser dit spørgsmål som du selv har styr på geocoding delen, så jeg svarer bare på 'onload' problemet. Ellers må du lige sige til :)

Du bør gøre med javascripts onload funktion, uanset om du vil indsætte det direkte i din HTML kode.

onload sikrer, at alle elementerne på din side er hentet, inden koden køres. Hvis du omgår det ved bare at indsætte f.eks.
<script>
hentAdresse('min adresse');
</script>

direkte i HTML koden, risikerer du at Google Maps API'et ikke er hentet i det øjeblik du kører koden, og brugeren vil derfor få en javascript fejl og ikke få vist kortet.

Du kan godt indsætte onload direkte i din HTML med noget i stil med:

<script>
window.onload = function() {
  hentAdresse('min adresse');
}
</script>

Herved sikrer du at Google Maps API er hentet, og koden vil derfor virke. Hvis du har flere onload's defineret i din kode, vil det dog bliver overskrevet hvis du gør sådan som jeg skrev. Har du det, kan du finde en måde at omgå det på, søg på google 'javascript multiple onload'.

hentAdresse skal selvfølgelig indeholde din geocoding og gøre at kortet indlæses korrekt.
Avatar billede cronaldo Nybegynder
12. april 2010 - 21:41 #2
Jeg har bestemt heller ikke styr på geocoding delen :) jeg har styr på det med at sætte kortet ind :) men jeg forstår ikke hvordan man benytter geocoding i initialize-funktionen?? :)
Avatar billede intenz Novice
12. april 2010 - 21:46 #3
:P

Hvis du har et kort eksempel må du gerne skrive lige koden, eller hvis det er længere så vis et online eksempel. Så skal jeg nok prøve at guide dig igennem.
Avatar billede intenz Novice
12. april 2010 - 21:47 #4
Jeg svarede faktisk på et lignende geocoding spørgsmål (dog uden street view), det kan være det kan hjælpe dig lidt på vej. http://www.eksperten.dk/spm/906071#reply_7569178
Avatar billede cronaldo Nybegynder
12. april 2010 - 22:01 #5
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAw_LPygbOtN4bb8dgOf3nxRSVGj1vV_PcP_nPLgyPpcljnBQneBSmd66AsCQD9dZiwn1QjvrnARmN6w" type="text/javascript"></script>
   
    <script type="text/javascript">
    var map = null;
    var geocoder = null;
   
    function initialize() {
      var fenwayPark = new GLatLng(42.345573,-71.098326);
      var fenwayPOV = {yaw:370.64659986187695,pitch:-20};
     
      panoClient = new GStreetviewClient();     
     
      map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(fenwayPark, 15);
      map.openInfoWindow(map.getCenter(),
                  document.createTextNode("Hello, world"));
                 
      GEvent.addListener(map, "click", function(overlay,latlng) {
        panoClient.getNearestPanorama(latlng, showPanoData);
      });
     
      myPano = new GStreetviewPanorama(document.getElementById("pano"));
      myPano.setLocationAndPOV(fenwayPark, fenwayPOV);
      GEvent.addListener(myPano, "error", handleNoFlash); 
      panoClient.getNearestPanorama(fenwayPark, showPanoData);
    }
   
   
    function showAddress(address) {
        var map = new GMap2(document.getElementById("map_canvas"));
            var geocoder = new GClientGeocoder();
        if (geocoder) {
            geocoder.getLatLng(address, function(point) {
                if (!point) {
                    alert(address + " kunne ikke findes!");
                } else {
                    map.setCenter(point, 14);
                    var marker = new GMarker(point);
                    map.addOverlay(marker);
                }
            });
        }
    }
    </script>
    <script>
    window.onload = function() {
      showAddress('<? echo $_GET['adresse']; ?>');
    }
    </script>
    <script>
       
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <script>codeAdress( 'Ridder Stigs Vej 13, 7100 Vejle' );</script>
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
    <div name="pano" id="pano" style="width: 500px; height: 300px"></div>
  </body>


Dette er hentet fra google.com .. men jeg skal have det til at virke sådan at den lave BÅDE map i "pano" OG i "map_canvas" af adressen i min php-variabel $_GET['adresse']..
Avatar billede intenz Novice
12. april 2010 - 22:14 #6
Prøv den her:

[div<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
function showAddress(address) {
    // street view opsætning
    var panoOpts = {
            features: {
                streetView: true,
                userPhotos: true
        },
        userPhotoOptions: {
            photoRepositories: [ 'panoramio', 'picasa']
            }
    };

    // api elementer
        var map = new GMap2(document.getElementById("map_canvas"));
        var geocoder = new GClientGeocoder();
    var myPano = new GStreetviewPanorama(document.getElementById("pano"), panoOpts);


    // geocoding
    if (geocoder) {
        geocoder.getLatLng(address, function(point) {
            if (!point) {
        alert(address + " kunne ikke findes!");
            } else {
        GEvent.addListener(myPano, "error", handleNoFlash);
       
        // map
                map.setCenter(point, 14);
                var marker = new GMarker(point);
                map.addOverlay(marker);

        // street view
        myPano.setLocationAndPOV(point);

            }
        });
    }
}

// brugeren har ikke flash, street view virker ikke
function handleNoFlash(errorCode) {
    if (errorCode == FLASH_UNAVAILABLE) {
        alert("Error: Flash doesn't appear to be supported by your browser");
        return;
    }

</script>
<script>
window.onload = function() {
    // find adresse
    showAddress('Rådhuspladsen, københavn');
}
</script>
<div id="map_canvas" style="width: 400px; height: 250px"></div><br />
<br />
<div id="pano" style="width: 400px; height: 250px"></div>
[/div]
Avatar billede intenz Novice
12. april 2010 - 22:15 #7
Great... prøver lige igen.
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
function showAddress(address) {
    // street view opsætning
    var panoOpts = {
            features: {
                streetView: true,
                userPhotos: true
        },
        userPhotoOptions: {
            photoRepositories: [ 'panoramio', 'picasa']
            }
    };

    // api elementer
        var map = new GMap2(document.getElementById("map_canvas"));
        var geocoder = new GClientGeocoder();
    var myPano = new GStreetviewPanorama(document.getElementById("pano"), panoOpts);


    // geocoding
    if (geocoder) {
        geocoder.getLatLng(address, function(point) {
            if (!point) {
        alert(address + " kunne ikke findes!");
            } else {
        GEvent.addListener(myPano, "error", handleNoFlash);
       
        // map
                map.setCenter(point, 14);
                var marker = new GMarker(point);
                map.addOverlay(marker);

        // street view
        myPano.setLocationAndPOV(point);

            }
        });
    }
}

// brugeren har ikke flash, street view virker ikke
function handleNoFlash(errorCode) {
    if (errorCode == FLASH_UNAVAILABLE) {
        alert("Error: Flash doesn't appear to be supported by your browser");
        return;
    }

</script>
<script>
window.onload = function() {
    // find adresse
    showAddress('Rådhuspladsen, københavn');
}
</script>
<div id="map_canvas" style="width: 400px; height: 250px"></div><br />
<br />
<div id="pano" style="width: 400px; height: 250px"></div>
Avatar billede cronaldo Nybegynder
12. april 2010 - 22:19 #8
Oh my f******* god :o) det virker :)
Nu ved jeg ikke, om det er imod reglerne, men kan jeg få din mail, så jeg evt. kan sende dig et link el.lign.? :)
Avatar billede cronaldo Nybegynder
12. april 2010 - 22:23 #9
Og er det for øvrigt muligt, at google maps-boksen "følger" google street view? sådan at hvis man går frem i street view gør man også i google maps :) ?
Avatar billede intenz Novice
13. april 2010 - 11:21 #10
Du kan sende mig en besked herinde (klik på mit brugernavn), jeg er ikke så meget for at skrive min mail på et offentligt forum.

Omkring #9:
Det er muligvis muligt, men det er ikke noget jeg lige kan gøre :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester