Avatar billede jetobi Juniormester
03. juni 2011 - 13:01 Der er 21 kommentarer og
1 løsning

Hjælp med google maps

Hej allesammen. Jeg gad godt have et kort ligesom http://faceup.dk/ har med online medlemmer, hvor man kan se hvor henne af de er.
ALtså hvis man har i databasen nogen forskellige rows, og en af dem er "landsdel" og der står kolding, så ligesom faceup, skal der være en prik over kolding, med noget tekst i?

Mange tak på forhånd.
Mvh jesper kaae
Avatar billede olsensweb.dk Ekspert
03. juni 2011 - 13:21 #1
hvor langt er du selv kommet ??

du kunne feks google:
"php google maps mysql" eller "php google maps api tutorial"

uden at have afprøvet det ser dette interessant ud:
http://www.phpriot.com/articles/google-maps-geocoding
http://tips4php.net/2010/10/use-php-mysql-and-google-map-api-v3-for-displaying-data-on-map/
http://code.google.com/intl/da/apis/maps/articles/phpsqlajax.html
Avatar billede jetobi Juniormester
03. juni 2011 - 13:45 #2
Ikke noget ret langt, fordi har problemer, fandt noget der hed geotagging, men gad godt sådan noget med den selv fandt den specefikke kode, om kolding eks? hvis jeg skriver kolding, finder den selv den specefikke kode ?
Avatar billede olsensweb.dk Ekspert
05. juni 2011 - 09:33 #3
her er lidt du kan starte op på, det er helt basalt, array'et skal selvføgelig være en database.
ulemper: den udskriver alle data i JS, så siden kan blive unødig tung

demo  http://olsensweb.dk/test/experten/spm/940285/
source http://olsensweb.dk/test/experten/spm/940285/index.php?source

 
<?php   
// bør ligge i en database
$ar = array(       
    array("city" => "Copenhagen",     "Lat" =>"55.6934", "Lng" =>"12.5830", "Description"=>"Hovedstaden i Danmark" ),       
    array("city" => "Tåstrup",         "Lat" =>"55.6500", "Lng" =>"12.3000", "Description"=>""  )
);   
?>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title></title>   
    <style type="text/css"></style>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOU_NEED_TO_PUT_YOUR_KEY_HERE" type="text/javascript"></script>
    <script type="text/javascript">
    function CreateMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });
        return marker;
    }   
    </script>
</head>

<body style="background-color:#fff">
<div id="map" style="width:400px;height:350px;"></div>


<script type="text/javascript">   
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(55.7277, 12.4208), 10, G_NORMAL_MAP);
   
<?php
echo "\n";
$ar_lng = count($ar);
for($i=0; $i<$ar_lng; $i++){
    echo "var point = new GLatLng(".$ar[$i]['Lat'].",".$ar[$i]['Lng'].");\n";       
    echo "var marker = CreateMarker(point".",'".$ar[$i]['Description']."');\n";
    echo "map.addOverlay(marker);\n";
    echo "\n";
}
?>
</script>
</body>
</html>
Avatar billede olsensweb.dk Ekspert
05. juni 2011 - 09:40 #4
>hvis jeg skriver kolding, finder den selv den specefikke kode ?

http://code.google.com/intl/da/apis/maps/index.html
http://code.google.com/intl/da/apis/maps/documentation/javascript/tutorial.html

http://code.google.com/intl/da/apis/maps/documentation/geocoding/
A Geocoding API request must be of the following form:

http://maps.googleapis.com/maps/api/geocode/output?parameters

where output may be either of the following values:
* json (recommended) indicates output in JavaScript Object Notation (JSON)
* xml indicates output as XML


så en forspørgelse på kolding vil se sådan ud
som json http://maps.googleapis.com/maps/api/geocode/json?address=kolding,DK&sensor=true
som xml  http://maps.googleapis.com/maps/api/geocode/xml?address=kolding,DK&sensor=true

og så er det bare at decode "location"
http://www.php.net/manual/en/function.json-decode.php
http://dk2.php.net/manual/en/simplexml.examples-basic.php

her er der en lille "tut" http://www.maporegon.net/tutorial/ , tut er ikke særlig dækkende, men eks er godt til at starte op på, og modificerer, alle data hentes via AJAX

man kan downloade et komplet eks (4 filer), man skal dog omdøbe nogle af den og, indsætte php tag i en af dem, men det står beskrevet
jeg har downloadet dem og lavet de ændringer der skal til http://olsensweb.dk/test/experten/spm/940285/maporegon.zip

hvis man ændre i alle markeringerne, skal man huske at ændre sit centerpoint i html filen

var centerpoint = new GLatLng('44.2','-120.6');
et bud kunne værer
var centerpoint = new GLatLng('55.6','12.5'); // københavn
var zoomlevel=5; kan godt settes op til 7
Avatar billede olsensweb.dk Ekspert
06. juni 2011 - 15:24 #5
der er nogle begrænsninger på brug af http://code.google.com/intl/da/apis/maps/articles/geocodestrat.html
[cut geocodestrat.html]
Quota Considerations

Server-side geocoding, through the Geocoding Web Service has a quota of 2,500 requests per IP per day, so all requests in one day count against the quota. In addition, the Web Service is rate-limited, so that requests that come in too quickly result in blocking. Client-side geocoding through the browser is rate limited per map session, so the geocoding is distributed across all your users and scales with your userbase. Geocoding quotas and rate limits drive the strategies outlined in this article.

In Google Maps API Premier, quotas are tied to client IDs, which provide much higher quotas. If you are still running into quota limits using Premier, file a support request here http://www.google.com/support/enterprise/bin/static.py? page=portal_login.html.
[/cut geocodestrat.html]

baseret på ovenstående bør du ikke slå det op hver gang, du skal bruge det, men derimod gemmen det i en database, og slå det op hvis det ikke står i databasen

det smarteste vil være at lave ovenstående test ved bruger oprettelse

til at hente Lat, Lng fra google maps:
 <?php
$url = utf8_encode ("http://maps.googleapis.com/maps/api/geocode/json?address=københavn,+DK&sensor=true");
// $url = utf8_encode ("http://maps.googleapis.com/maps/api/geocode/json?address=københavn+v,+DK&sensor=true");
// $url = utf8_encode ("http://maps.googleapis.com/maps/api/geocode/json?address=brønshøj,+DK&sensor=true");

$JsonContent = json_decode(file_get_contents($url), true);
$lat = $JsonContent["results"][0]["geometry"]["location"]["lat"];
$lng = $JsonContent["results"][0]["geometry"]["location"]["lng"];

// test udskrivning
echo $lat;
echo "\n";
echo $lng;
?>
Avatar billede jetobi Juniormester
08. juni 2011 - 17:12 #6
Hej ronols! det vil jeg da lige prøve, og se om jeg har nogen problemer ;)
Indtil videre mange tak, men dengang jeg prøvede hvor jeg skrev kolding, ville den ikke finde den, Den sagde jeg skulle have en Specefik kode.?
Mvh jesper kaae
men skriver lige tilbage når jeg har prøvet det. :)
Avatar billede jetobi Juniormester
08. juni 2011 - 17:47 #7
Hvad skal mine punkter i databasen hede? ,
skal de hedde "Lat", "Lng", og "by"?
Avatar billede olsensweb.dk Ekspert
08. juni 2011 - 18:02 #8
#6
>men dengang jeg prøvede hvor jeg skrev kolding, ville den ikke finde den
nu ved jeg ikke om du bare har kopieret coden fra #5, UDEN at tager højde for at E forkorter link

3 omskrevet til ren js  http://olsensweb.dk/test/experten/spm/940285/3_js.html
5 demo  http://olsensweb.dk/test/experten/spm/940285/test.php
5 source http://olsensweb.dk/test/experten/spm/940285/test.php?source

#7
Hvad skal mine punkter i databasen hede? ,
skal de hedde "Lat", "Lng", og "by"?
"Lat", "Lng" gode bud. men du har frit slag, ("Latitude" "Longitude" kunne også være bud, mere sigende)
"by" Nej, by er et reseveret ord i sql, du får unødige problemer, vil du kalde den noget med by så kald den bynavn
Avatar billede jetobi Juniormester
08. juni 2011 - 23:32 #9
En sidste ting, ved du sådan hvordan man også kan få husnummer med?
Avatar billede olsensweb.dk Ekspert
09. juni 2011 - 00:26 #10
tested nedenstående 3 addresser og de passer :)
address=københavn+jagtvej+69,+DK&sensor=true
address=københavn+s+jenagade+22,+DK&sensor=true
address=københavn+s+strandlodsvej+48,+DK&sensor=true

<?php
// uri'en SKAL værer utf8 incodet
// $url = "http://maps.googleapis.com/maps/api/geocode/json?address=københavn+jagtvej+69,+DK&sensor=true";
// $url = "http://maps.googleapis.com/maps/api/geocode/json?address=københavn+s+jenagade+22,+DK&sensor=true";
$url = "http://maps.googleapis.com/maps/api/geocode/json?address=københavn+s+strandlodsvej+48,+DK&sensor=true";


$JsonContent = json_decode(file_get_contents($url), true);
$lat = $JsonContent["results"][0]["geometry"]["location"]["lat"];
$lng = $JsonContent["results"][0]["geometry"]["location"]["lng"];

echo $lat;
echo "\n";
echo $lng; 
?>
Avatar billede jetobi Juniormester
09. juni 2011 - 10:32 #11
Hej ronols, det virkede fint igår, da jeg prøvede idag virker det ikke? jeg skriver mine adresser ind på dansk, ligesom du har sagt, og alt er som du har sagt, men lige meget hvilken dansk adresse jeg skriver ind, sætter den sig mellem silkeborg, og viborg. jeg har prøvet alt, hvis jeg trykker på kortet, visen den kordinaterne for hvor byerne er, og i danmark er det bare sådan nogen ånsvage nogen som det her. (56.31653672211301, 9.755859375) giver ikke mening.?
Avatar billede olsensweb.dk Ekspert
09. juni 2011 - 14:59 #12
>men lige meget hvilken dansk adresse jeg skriver ind, sætter den sig mellem silkeborg, og viborg.
kan du ikke lige vise den code du bruger, samt nogle danske test data.

nb: jeg vil nok nok bytte om på rækkefølgen af addressen så
address=københavn+jagtvej+69,+DK&sensor=true
bliver til
address=jagtvej+69+københavn,+DK&sensor=true
ikke af det tilsyneladende har nogle betydning, men er nemmerer at læse
Avatar billede jetobi Juniormester
09. juni 2011 - 21:36 #13
jeg bruger denne
<!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="CACHE-CONTROL" content="NO-CACHE">
<meta http-equiv="PRAGMA" content="NO-CACHE">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAXN2FY9WdZRXpfwA1wHChwRS-oezoou6dpr19RdiAj_y_fdq75hQcEYfDDfAm5nTluyyXFo7PmTfe-Q" type="text/javascript"></script>
<script src="maps.js" type="text/javascript"></script>
</head>
<body onunload="GUnload();" style="background-color:#fff">
<table border=1 >
<tr>
<td>
<input type="button" value="one" onclick='getMarks("marks.php?name=one")';>

<input type="button" value="two" onclick='getMarks("marks.php?name=two");'>

</td><td> <div id="map" style="width:400px;height:350px;"></div></td></tr>

</table>
<br />
<br />
<br />
<br />
<br />
<br />
<noscript>
<p>
JavaScript must be enabled in order for you to use Google Maps.
  However, it seems JavaScript is either disabled or not supported by your browser.
  To view Google Maps, enable JavaScript by changing your browser options, and then
  try again.
  </p>
</noscript>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    var centerpoint = new GLatLng('44.2','-120.6');
    var zoomlevel=5;
    map.setCenter(centerpoint, zoomlevel);
    GEvent.addListener(map, 'click' , function( overlay,point) {
      if (point) { alert(point  ); }
    });
    getMarks("marks.php?name=one");  //call function that retrieves the marks
}
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    //]]>
</script>
</body>
</html>
Avatar billede jetobi Juniormester
09. juni 2011 - 21:40 #14
og min map.js

/<![CDATA[
/* A lot of the code is taken from other tutorials. */
function createMarker(point,html) {
    var marker = new GMarker(point);
    GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });
    return marker;
      }

function getMarks(url) { /* pass url during the call. */
    map.closeInfoWindow(); /*close any InfoWindows that happen to be open  */
    map.clearOverlays();
      var request = GXmlHttp.create(); /* use the XML methods  */
        request.open("GET", url, true);
        request.onreadystatechange = function() {
        if (request.readyState == 4) {   
        var xmlDoc = request.responseXML; /* php returns 'XML' */
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var loop1=0;loop1<markers.length;loop1++){
            var lat = parseFloat(markers[loop1].getAttribute("lat"));  /* data is string. */
            var lng = parseFloat(markers[loop1].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var county = markers[loop1].getAttribute("county");
            var html = markers[loop1].getAttribute("html");
            var marker = createMarker(point,html);
            map.addOverlay(marker);
            }
        }
        };
    request.send(null);
}
   
//]]>
Avatar billede olsensweb.dk Ekspert
10. juni 2011 - 00:50 #15
jeg kan se du anvender koden fra http://www.maporegon.net/tutorial/
umildbart kan jeg kun se du har sat en nøgle ind i html filen (#13)

har du lavet nogle ændringer i marks.php (der hvor du indlæsser data fra databasen) ??, og retunerer XML data til html filen

har du ændret databasen ??, jf #7.

hvor henter du geo data, du skriver: "men lige meget hvilken dansk adresse jeg skriver ind, sætter den sig mellem silkeborg, og viborg." (#11)

getMarks decoder "bare" de XML data der kommer fra marks.php.

det er kun marks.php og databasen du skal ændre i,
og selvføgelig indsætte egen nøgle i html filen som du har gjort.
Avatar billede jetobi Juniormester
10. juni 2011 - 01:40 #16
<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
header("content-type:text/xml");
$name=$_GET['name'];
###server information
$server_name="xxx";
$db_user="xxx";
$db_pass="xxx";
$db="xxx";
$link = mysql_connect($server_name,$db_user,$db_pass) or die ("could not connect");
mysql_select_db($db) or die("could not connect");

$query="";
echo "<markers>";
if ($name != ""){
if ($name=='one'){
    $query="Select name,lat,lng,county,elevation from tutor limit 10";
    }
if ($name=='two'){
    $query="Select name,lat,lng,county,elevation from tutor limit 20";
    }
if ($query != ""){
    $results = mysql_query($query);
    while ($row=mysql_fetch_array($results)){
        echo '<marker html="'.$row[0].'" lat="'.$row[1].'" lng="'.$row[2].'" county="'.$row[3].'" elev="'.$row[4].'" />'; }
}
}
    echo "</markers>";
?>

det er det jeg har, og det i min database, er fuldstædnigt det samme som det der står i samlpe.mysql, Har bare været inde og redigere lng lat, så de passede til danmark kordinater. Det virkede her den anden dag, men plduselig ikke med?
Avatar billede olsensweb.dk Ekspert
10. juni 2011 - 13:38 #17
i #13 (map.html) kan jeg se du IKKE har rettet 
var centerpoint = new GLatLng('44.2','-120.6');
var zoomlevel=5;
som jeg skrev i #4
til feks
var centerpoint = new GLatLng('55.6','12.5'); // københavn
var zoomlevel=6;

jeg har valgt at udkommenterer de 2 knapper


i marks.php skal du sætte mysql_set_charset('utf8',$link), meget vigtig, hvis bare 1 af posterne indeholder æøå kommer der ikke noget over hvis dette IKKE er sat :)
$link = mysql_connect($server_name,$db_user,$db_pass) or die ("could not connect");
mysql_select_db($db) or die("could not connect");
mysql_set_charset('utf8',$link);


og jeg har valgt at udkommenterer begrænsningen på de 10 og 20 poster

min test db ser sådan ud, jeg har valgt at fjerne de felter der ikke bruges til noget. Feltet elevation bør vel også fjernes, men det kræver rettelse i marks.php (sql+ while løkke), men kan ellers slettes da det ikke bruges til noget
CREATE TABLE IF NOT EXISTS `tutor` (
  `name` varchar(80) DEFAULT NULL,
  `county` varchar(30) DEFAULT NULL,
  `lat` varchar(12) DEFAULT NULL,
  `lng` varchar(12) DEFAULT NULL,
  `elevation` int(11) DEFAULT NULL,
  KEY `name_ind` (`name`(20))
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

INSERT INTO `tutor` (`name`, `county`, `lat`, `lng`, `elevation`) VALUES
('Christiansborg', 'DK', '55.6768104', '12.5799018', 0),
('Brønderslev', 'DK', '57.270904', '9.945168', 0),
('tåstrup', 'DK', '55.6500', '12.3000', 0);


rettet vertion ligger her http://olsensweb.dk/test/experten/spm/940285/rettet.zip
Avatar billede jetobi Juniormester
10. juni 2011 - 16:10 #18
name    county    lat    lng    elevation
            Christiansborg    DK    55.6768104    12.5799018    0
            Brønderslev    DK    57.270904    9.945168    0
            tåstrup    DK    55.6500    12.3000    0
            Kolding    DK    56.26392    9.501785    0
Nu har jeg lavet kolding, den placere sig stadig i midten af viborg og silkeborg, link -> http://www.jeska.dk/rettet/map.html
Avatar billede jetobi Juniormester
10. juni 2011 - 16:17 #19
Hej ronols
Har fået det til at virke nu :D! mange tak for hjælpen accepter dit svar, hvis jeg har flere problemer kan jeg så ikke bare skrive til dig?
mvh jesper kaae
mange tak for hjælpen!
Avatar billede olsensweb.dk Ekspert
10. juni 2011 - 16:42 #20
>hvis jeg har flere problemer kan jeg så ikke bare skrive til dig?
hvis du problemer igen må du lave et nyt spørgsmål, så kan andre også bidrage og lærer af det
Avatar billede jetobi Juniormester
10. juni 2011 - 16:56 #21
Ved ikke om du stadig læser på dette indlæg, men hvordan kan jeg gøre så mit map, ikke viser kordinaterne når man trykker, det er vildt irreterende det popper op, gad godt have noget ligne
http://www.krak.dk/profil/kim+pedersen/1222530?search_word=kim%20pedersen (mappet) ved bare ikke om det er noget der kan lade sig gøre?
Avatar billede olsensweb.dk Ekspert
10. juni 2011 - 17:32 #22
i map.html
 <script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    var centerpoint = new GLatLng('55.6','12.5'); // københavn
    var zoomlevel=6;
    map.setCenter(centerpoint, zoomlevel);

    /* slet dette start */
   
    GEvent.addListener(map, 'click' , function( overlay,point) {
      if (point) { alert(point  ); }
    });
   

    /* slet dette slut */

    getMarks("marks.php?name=one");  //call function that retrieves the marks
}
else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>
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