google - google maps på egen hjemmeside - Udvikleren.dk

Tags: google maps

<< < 1 2 > >>

Bruger #15083 @ 18.07.11 11:03

Hej alle sammen

Nu har jeg længe søgt på nettet om hjælp til hvordan man laver kort med google maps og får dem på sig egen hjemmeside.

Jeg har registreret mig, som jeg kan læse mig frem til at man skal.

Men herefter kan jeg ikke finde flere oplysninger. Ikke engang under google's egne artikler.

Hvor kan man finde koden, man skal sætte ind på sig egen hjemmeside og hvordan opretter jeg efterfølgende forskellige forhandlere?

Og kan jeg få maps til at spille sammen med en forhandler oversigt som jeg har i en MySql database, hvor man på hjemmesiden kan vælge land og by via drop down bokse.
Altså når man i min drop down menu vælger et land, viser google maps selv det rigtige land og efterfølgende by?

Håber meget der er nogen der kan hjælpe.

18 svar postet i denne tråd vises herunder
4 indlæg har modtaget i alt 16 karma

Sorter efter stemmer Sorter efter dato

Bruger #9814 @ 27.07.11 11:20

1.302

Du har ikke afsluttet din div korrekt. Der står >/div>

Det skal rettes til at starte med.

Bruger #15083 @ 27.07.11 11:25

Nu kan jeg få den til at vise kortet.

Men, er det muligt at søge på adresse, postnr og by i stedet for på kordinater? (i .js filen, som jeg laver om til .php)

Jeg bruger nemlig adr, postnr og ny i min database.

Vil fx. gerne have det til at virke som på pandora's hjemmeside

Jeg giver brugeren mulighed for at vælge land og by fra en drop down menu.

Og de forhandler der i den pågældende by bliver så vist med mærker.

Indlæg senest redigeret d. 27.07.2011 12:43 af Bruger #15083

Bruger #3427 @ 27.07.11 13:59

1.520

Okay, har desvære ikke mulig for at test det da jeg ikke har en google api key til den her lan server jeg er på pt.

prøv det her ikke testet.

whatever.html

HTML kode

 <html>
    <head></head>
    <body onload="initialize('odense denmark');">
      <div id="map_canvas" style="width:450px; height:450px"></div>
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
      <script type="text/javascript" src="google_maps.js"></script>
    </body>
  </html>

google_maps.js

JScript kode

 function initialize(location) {
       var api_key = "------ HUSK API KEY HER ------";
       
       location = location.replace(" ", "+");
       var s = document.createElement('script');
       s.src = "http://maps.google.com/maps/geo?output=json&oe=utf-8&q="+location+"&key="+api_key+"&mapclient=jsapi&hl=en&callback=loadmap";
       s.type = 'text/javascript';
       document.getElementsByTagName('head')[0].appendChild(s);
     }
     
     function loadmap(result){
      // if(result.code != 200){ #edit 19.41
      if(result.Status.code != 200){
         alert("fejl!");
         return false;
       }
       
       var lat = result.Point.coordinates[1]; //eller 0 - kan ik huske om det er 1 eller 0 først
       var lng = result.Point.coordinates[0]; //eller 1, - || - 
       
       //koordinater til map
       var centerMapLat = lat; //55.403756;
       var centerMapLng = lng; //10.40237;
 
       //koordinater og indhold til marker
       var infoWindowText = "tekst/html <strong>her</strong>";
       var positionMarkerLat = lat; //55.403756;
       var positionMarkerLng = lng; //10.40237;
 
       var initialZoom =  10;
       
       var latlng = new google.maps.LatLng(centerMapLat,centerMapLng);
       var myOptions = {zoom: initialZoom, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
       var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
       var infowindow = new google.maps.InfoWindow({ content: infoWindowText });
       var myLatLng = new google.maps.LatLng(positionMarkerLat,positionMarkerLng);
       var marker = new google.maps.Marker({position: myLatLng, map: map, title:""});
       google.maps.event.addListener(marker, 'click', function() {
         infowindow.open(map,marker);
       });
     }

Indlæg senest redigeret d. 27.07.2011 21:49 af Bruger #3427

Bruger #15083 @ 27.07.11 15:13

Heller ingen held med det... desværre

Bruger #3427 @ 27.07.11 15:48

1.520

okay, får du nogen fejl?

hov tror da også at

result.code != 200
skal være
result.Status.code != 200

Indlæg senest redigeret d. 27.07.2011 16:42 af Bruger #3427

Bruger #15083 @ 28.07.11 10:05

Der kommer ikke nogen fejl.

Kortet bliver bare ikke vist.

Bruger #1 @ 28.07.11 17:46

1.204

Lise, i de her situationer er det altså super irriterende at du ikke lige ligger det online, så de dygtige udviklere der forsøger at hjælpe dig, selv kan se hvad der går galt. Jeg har forståelse for at det du forsøger at lave er en del af noget der ikke kan offentliggøres endnu, men så er det god skik at isolere den del der ikke virker ud og placere det på sin egen lille test side, som man godt kan vise frem. Tit vil man så opleve at det rent faktisk er noget andet på siden der får det nye til ikke at virke, eller at man har lavet en fejl i forsøget, og derfra vil det så være betydeligt lettere for andre at hjælpe med at få problemet fixet, i stedet for at skulle gætte sig frem

Mvh.

Kasper (TSW)

TSW WebCoder | TSW SiteSync | FashionArena.net | SuperBazar | Jeans Udsalg

Bruger #3427 @ 28.07.11 22:06

1.520

Okay kunne se der var lidt små fejl i koden jeg gav dig tidliger.

et her skulle meget gerne virker.

whatever.php

HTML kode

 <html>
   <head></head>
   <body onload="initialize('Vesterbrogade 3, 1630 københavn');">
     <div id="map_canvas" style="width:450px; height:450px"></div>
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
     <script type="text/javascript" src="google_maps.js"></script>
   </body>
 </html>

google_maps.js

JScript kode

 function initialize(location) {
       var api_key = "------ HUSK API KEY HER ------";
       
       location = location.replace(" ", "+");
       var s = document.createElement('script');
       s.src = "http://maps.google.com/maps/geo?output=json&oe=utf-8&q="+location+"&key="+api_key+"&mapclient=jsapi&hl=en&callback=loadmap";
       s.type = 'text/javascript';
       document.getElementsByTagName('head')[0].appendChild(s);
     }
     
     function loadmap(result){
       if(result.Status.code != 200){
         alert("fejl!");
         return false;
       }
       
       var lat = result.Placemark[0].Point.coordinates[1];
       var lng = result.Placemark[0].Point.coordinates[0];
       
       //koordinater til map
       var centerMapLat = lat; //55.403756;
       var centerMapLng = lng; //10.40237;
 
       //koordinater og indhold til marker
       var infoWindowText = "tekst/html <strong>her</strong>";
       var positionMarkerLat = lat; //55.403756;
       var positionMarkerLng = lng; //10.40237;
 
       var initialZoom =  14;
       
       var latlng = new google.maps.LatLng(centerMapLat,centerMapLng);
       var myOptions = {zoom: initialZoom, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
       var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
       var infowindow = new google.maps.InfoWindow({ content: infoWindowText });
       var myLatLng = new google.maps.LatLng(positionMarkerLat,positionMarkerLng);
       var marker = new google.maps.Marker({position: myLatLng, map: map, title:""});
       google.maps.event.addListener(marker, 'click', function() {
         infowindow.open(map,marker);
       });
     }

Indlæg senest redigeret d. 28.07.2011 22:11 af Bruger #3427

<< < 1 2 > >>

google maps på egen hjemmeside

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler