CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

celfa Nybegynder

04. januar 2012 - 18:15 Der er 19 kommentarer og
1 løsning

Automatisk googlemap udfra database med adresse?

Hej..

Ville hører om det er muligt at lave et google map der automatisk bliver genereret udfra en adresse i en database?(mysql)

Således at når fx. id=1 så tager den adressen udfra id=1 og sætter ind i google mappet

Nogen der kan hjælpe, eller kender alternativer?

Synes godt om

olebole Juniormester

04. januar 2012 - 19:36 #1

<ole>

Løsningen er en kombination af JavaScript og PHP. Først må du hente adressen i databasen med PHP - og derefter skrive den ind i et JavaScript på siden.

Herefter kan JS hente koordinaterne fra Googles geocoder med et Ajax kald:

Responsen indeholder et JSON-objekt i stil med:

{ "results" : [ { "address_components" : [ { "long_name" : "1", "short_name" : "1", "types" : [ "street_number" ] }, { "long_name" : "Vesterbrogade", "short_name" : "Vesterbrogade", "types" : [ "route" ] }, { "long_name" : "Nyrops", "short_name" : "Nyrops", "types" : [ "sublocality", "political" ] }, { "long_name" : "Indre By", "short_name" : "Indre By", "types" : [ "sublocality", "political" ] }, { "long_name" : "København", "short_name" : "KBH", "types" : [ "locality", "political" ] }, { "long_name" : "København", "short_name" : "København", "types" : [ "administrative_area_level_2", "political" ] }, { "long_name" : "Hovedstaden", "short_name" : "Hovedstaden", "types" : [ "administrative_area_level_1", "political" ] }, { "long_name" : "Danmark", "short_name" : "DK", "types" : [ "country", "political" ] }, { "long_name" : "1550", "short_name" : "1550", "types" : [ "postal_code" ] } ], "formatted_address" : "Vesterbrogade 1, 1550 København, Danmark", "geometry" : { "bounds" : { "northeast" : { "lat" : 55.67528560, "lng" : 12.56641710 }, "southwest" : { "lat" : 55.67527480, "lng" : 12.56640470 } }, "location" : { "lat" : 55.67527480, "lng" : 12.56641710 }, "location_type" : "RANGE_INTERPOLATED", "viewport" : { "northeast" : { "lat" : 55.67662918029149, "lng" : 12.56775988029150 }, "southwest" : { "lat" : 55.67393121970849, "lng" : 12.56506191970850 } } }, "types" : [ "street_address" ] } ], "status" : "OK"}

Her kan du hente koordinaterne og indsætte en marker på dit GoogleMap på helt sædvanlig måde.

/mvh
</bole>

Synes godt om

olebole Juniormester

04. januar 2012 - 19:37 #2

Hmmmm ... formateringen af responsen blev ikke så pæn, men det skulle være forståeligt alligevel =)

Synes godt om

celfa Nybegynder

04. januar 2012 - 20:01 #3

Jeg er fint med på ajax kaldet.. Men du mister mig lidt ved responsen. Hvordan går jeg fra kaldet til at indsætte kordinaterne? Hvis du kunne uddybe lidt

PÅ forhånd tak..

Synes godt om

olebole Juniormester

04. januar 2012 - 20:47 #4

Kan du sætte en marker på et GoogleMap?

Synes godt om

celfa Nybegynder

04. januar 2012 - 20:58 #5

Jeg har kun brugt googlemap hvor man skriver adressen også sætter den selv mærket.. Jeg formoder der findes en anden fremgangsmåde til det? Da man vel via det ajax kald får kordinater til det, som så på en eller anden måde skal indsættes? Den del er jeg i tvivl om.

Synes godt om

olebole Juniormester

04. januar 2012 - 21:21 #6

Dette er indgangen til Google Maps V3.

Her er et eksempel fra den tilhørende tutorial. Kik rigtig godt på menuen til venstre *o)

Koordinaterne får du med:

var sAddr = "Vesterbrogade 1, 1550 København";
var sUrl = "http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=" + encodeURIComponent(sAddr);
var oXHR = new XMLHttpRequest();
oXHR.open("GET", sUrl, true);
oXHR.onreadystatechange = function() {
if (this.readyState<4) return;
var oResponse = JSON.parse(this.responseText);
alert(oResponse.results[0].geometry.location.lat);
alert(oResponse.results[0].geometry.location.lng);
}
oXHR.send();

JSON.parse er kun understøttet i nyere browsere (IE først i IE9), så du bør for browsere, der ikke understøtter den, inkludere denne JS-fil

Synes godt om

olebole Juniormester

04. januar 2012 - 21:23 #7

- og URL'en ser sådan ud uden E's URL-parser:

var sUrl = "http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=" + encodeURIComponent(sAddr);

Synes godt om

celfa Nybegynder

05. januar 2012 - 10:57 #8

Har siddet og læst en del om det nu.. Jeg kan bare ikke gennemskue at nu hvor jeg har lavet mit kald til databasen, og den indsætter fint adressen. Så får det ajax du har skrevet hentet kordinaterne via geocode. Jeg får så en lat og en lng, det er vel dem jeg skal bruge til at indsætte i et tradionelt google map? Eksempelvis det eksempel de viser med en marker, hvor det kræver kordinaterne.

Via det ajax kald du skriver, får jeg så min kordinater i en variabel/streng?

Men skridtet imellem dem kan jeg ikke gennemskue, har kun en smule kendskab til javascript og ajax..

Synes godt om

olebole Juniormester

05. januar 2012 - 15:46 #9

Alle data vedr. adressen returneres i en JSON-streng. Den parses til et objekt med JSON.parse. På dette objekt kan du hente længde- og breddegrad, som jeg viser med de to alerts i #6. Dem bruger du så på helt sædvanlig vis til en marker på et map

Synes godt om

celfa Nybegynder

05. januar 2012 - 17:45 #10

Så følgende giver mig kordinatsættet
alert(oResponse.results[0].geometry.location.lat);
alert(oResponse.results[0].geometry.location.lng);

det skal jeg have indsat i
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});

Jeg antager at
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);

er der hvor jeg så skal have min 2 alters ind? Er det korrekt?

Synes godt om

olebole Juniormester

06. januar 2012 - 01:14 #11

Ja, i stedet for at alert'e dem, kunne du lægge dem i to variabler - og så bruge dem i scriptet, hvor du opretter myLatlng. Det er længe siden, jeg har lavet en app med GoogleMaps, men koden ser meget rigtigt ud

Synes godt om

celfa Nybegynder

08. januar 2012 - 22:36 #12

Jeg har nu følgende kode:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var cord1;
var cord2;

var sAddr = "Vesterbrogade 1, 1550 København";
var sUrl = "http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=" + encodeURIComponent(sAddr);var oXHR = new XMLHttpRequest();
var oXHR = new XMLHttpRequest();
oXHR.open("GET", sUrl, true);
oXHR.onreadystatechange = function() {
if (this.readyState<4) return;
var oResponse = JSON.parse(this.responseText);
cord1 = oResponse.results[0].geometry.location.lat;
cord2 = oResponse.results[0].geometry.location.lng;
}
oXHR.send();
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(cord1,cord2);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
}
</script>
</head>

<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

Men jeg får et blankt kort? Hvis jeg derimod erstatter mit cord1 og cord2 med nogle kordinater virker kortet fint. Så tror ikke ajax kaldet henter adressen korrekt?

Synes godt om

celfa Nybegynder

08. januar 2012 - 22:57 #13

Ellers tænker jeg om man måske kan bruge denne side til noget?
http://code.google.com/intl/da-DK/apis/maps/documentation/javascript/examples/geocoding-simple.html

Hvis du ser den kildekode? Kan man på en måde omskrive koden så funktionen ikke skal bruges ved klik, men bare bruges udfra min data fra min database?

Synes godt om

celfa Nybegynder

08. januar 2012 - 23:11 #14

Og i øvrigt er linket dødt til den javascript fil du linker til med JSON. Jeg har testet det her i chrome og firefox, du nævner kun IE - så håber ikke bare det er det der er problemet.

Synes godt om

olebole Juniormester

09. januar 2012 - 15:30 #15

Nej, linket er ikke dødt - det virker i hvertfald her. Hvis du kun tester i den seneste version, er der ingen browsere, der har problemer - men er det en webside, der skal ligge på WWW, er man jo nødt til også at supportere lidt ældre browsere. Og så er IE altså stadig nettets mest udbredte, så ulykkerne er klart størst, hvis det ikke virker dér *o)

Hvad fejl angår, må du prøve at alert'e de forskellige værdier, du sender - og hvad du får retur. Det er muligt, Ajax kaldet ikke henter adressen korrekt, men så må du få styr på, hvorfor og hvad der sker - og her kan du kommer rigtig langt med en simpel alert =)

Synes godt om

celfa Nybegynder

28. februar 2012 - 20:32 #16

Jeg fik det desværre aldrig til at virke, så for nu giver jeg op. Kan være jeg prøver igen på et senere tidspunkt. Hvis nogle finder links der omhandler emnet ville jeg meget gerne have dem :)

Men smid et svar olebole, du fik mig da på rette spor.

Synes godt om

olebole Juniormester

28. februar 2012 - 21:27 #17

Ellers tak, jeg samler ikke point. Læg selv et svar og accepter det, så tråden lukkes =)

Synes godt om

celfa Nybegynder

28. februar 2012 - 21:31 #18

Tak.. Håber at kunne læse mig frem til en løsning andet steds, og dele det herinde.

Synes godt om

celfa Nybegynder

28. februar 2012 - 22:39 #19

Hej olebole. Jeg kiggede lige lidt på det igen. Er det ikke muligt bare at bruge følgende kode:
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>

Hvor at man i stedet for at bruge en javascript funktion, den her stammer fra on focus:
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {

skifter adress ud med en $adress som vi henter fra min database(mysql)?

Problemet med ovenstående kode er vel kun at den virker hvis der sker et klik fra fx. et input field med den action der.

var latlng = new google.maps.LatLng(-34.397, 150.644);

er vel bare der hvor kortet starter, problemet er jo at jeg skal konvertere min adresse om til en lat og lng? Det er jo reelt mit eneste problem. Synes jeg har prøvet helt vildt mange ting nu uden succes uanset hvad jeg gør får jeg ikke noget tilbage fra googles api.

Synes godt om

olebole Juniormester

28. februar 2012 - 23:03 #20

Det burde ikke være et problem. Jeg viste jo, hvordan man finder koordinaterne i #6

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra PHP kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hent array key Af nemlig i PHP	3	17/05/202415:22	17/05/202416:30
iCal-feed og import til google kalender driller Af nemlig i PHP	11	09/05/202417:49	10/05/202421:28
Adgang til vandaflæsningsdata Af nemlig i PHP	4	22/04/202422:04	30/04/202421:08
Vælg post rækkefølge Af Mojo_dk i PHP	3	06/04/202418:40	07/04/202412:20
Hjælp til PHP Af Friis77 i PHP	5	11/02/202419:58	12/02/202407:55

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS