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 #3427 @ 27.07.11 11:25

1.520

Hej.

har lige hurtigt sat en lille demo sammen.

whatever.html/php

HTML kode

 <html>
   <head></head>
   <body onload="initialize();">
     <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

 //koordinater til map
 var centerMapLat = 55.403756;
 var centerMapLng = 10.40237;
             
 //koordinater og indhold til marker
 var infoWindowText = "tekst/html <strong>her</strong>";
 var positionMarkerLat = 55.403756;
 var positionMarkerLng = 10.40237;
 
 var initialZoom =  10;
 
 function initialize() {
     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);
      });
 }

du kan finde kordinater på hjemmesiden:
http://www.getlatlon.com/

du kan lave google_maps.js om til en php fil og ændre koordinater med nogen du tager ud fra din database etc.

Indlæg senest redigeret d. 27.07.2011 11:29 af Bruger #3427

Bruger #13770 @ 26.07.11 15:24

Hej Lise.

Tror desværre ikke der findes så meget på dansk, jeg kunne i vært fald ikke lige finde noget. Derfor har jeg i stedet lavet dette kode til dig ud fra googles api, som Mikkel også har givet et link til.

Hvis du indsætter dette i din head section

HTML kode

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
 <script type="text/javascript">
 function loadMap(address) {
     geocoder = new google.maps.Geocoder();
     geocoder.geocode( { 'address': address}, function(results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
             var latlng = results[0].geometry.location;
             var myOptions = {
                 zoom: 15,
                 center: latlng,
                 mapTypeId: google.maps.MapTypeId.ROADMAP
             }
             map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
             map.setCenter(results[0].geometry.location);
             var marker = new google.maps.Marker({
                 map: map,
                 position: results[0].geometry.location
             });
         } else {
             //alert("There was a problem query to google maps.\nDetails:\n " + status);
         }
     });
 }
 </script>

Så skal du bare indsætte dette, der hvor du vil have de kort, og skifte adressen ud med den du vil have bliver vidst.

HTML kode

 <div id="map_canvas" style="width:340px; height:300px"></div>
 <script type='text/javascript'>loadMap('Vesterbrogade 3, 1630 københavn');</script>

Håber det hjælper dig

Bruger #13770 @ 27.07.11 13:09

Her er et eksempel på en side hvor bruger kan indtaste adresse, post nr og by og så få det vidst på kortet.

din_fil.html

HTML kode

 <!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="content-type" content="text/html; charset=UTF-8"/>
     <title>Google Maps API Example: Simple Geocoding</title>
     <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 initialize() {
       if (GBrowserIsCompatible()) {
         map = new GMap2(document.getElementById("map_canvas"));
         map.setCenter(new GLatLng(37.4419, -122.1419), 13);
         geocoder = new GClientGeocoder();
       }
     }
 
     function showAddress(address) {
       if (geocoder) {
         geocoder.getLatLng(
           address,
           function(point) {
             if (!point) {
               alert(address + " not found");
             } else {
               map.setCenter(point, 13);
               var marker = new GMarker(point);
               map.addOverlay(marker);
 
               // As this is user-generated content, we display it as
               // text rather than HTML to reduce XSS vulnerabilities.
               marker.openInfoWindow(document.createTextNode(address));
             }
           }
         );
       }
     }
     </script>
   </head>
 
   <body onload="initialize()" onunload="GUnload()">
     <form action="#" onsubmit="showAddress(this.address.value); return false">
       <p>
         <input type="text" size="60" name="address" value="1600 Amphitheatre Pky, Mountain View, CA" />
         <input type="submit" value="Go!" />
       </p>
       <div id="map_canvas" style="width: 500px; height: 300px"></div>
     </form>
 
   </body>
 </html>

Du kan se et fungerende eksempel her

http://code.google.com/intl/da/apis/maps/documentation/javascript/v2/examples/geocoding-simple.html

og dokumentation her

http://code.google.com/intl/da/apis/maps/documentation/javascript/v2/services.html#Geocoding

Bruger #16613 @ 18.07.11 11:43

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

Google Maps API family :-))

Bruger #16689 @ 18.07.11 21:12

<img src="http://maps.google.com/maps/api/staticmap?markers=size:mid|color:brown|postnummer og by, Denmark&zoom=9&size=170x170&maptype=roadmap&sensor=false"
width="170" height="170" />

Du kan så udskrifte postnummer og by og Denmark med land og by og postnummer fra din database

Du kan også lave højde og bredden om

Bruger #15083 @ 26.07.11 11:14

Findes der nogle sider på dansk om hvordan man kan gøre det?

Jeg kan ikke få ovenstående kode til at virke.

Bruger #15083 @ 27.07.11 10:50

Kan desværre ikke få det til at virke. Der bliver ikke vist noget kort

Bruger #1 @ 27.07.11 11:02

1.204

Hej Lise,

Prøv at lægge det du har lavet online og så smid en URL til det her, det gør det betydeligt lettere for folk at hjælpe dig. "Det virker ikke" er svær at hjælpe ud fra

Mvh.

Kasper (TSW)

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

Bruger #13770 @ 27.07.11 11:03

Prøv at poste den kode du har eller et link til siden hvor du prøver at få det til at virke

Bruger #15083 @ 27.07.11 11:07

Jeg må desværre ikke vise siden frem endnu.

men i min header har jeg indsat:

JScript kode

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
     <script type="text/javascript">
     function loadMap(address) {
     geocoder = new google.maps.Geocoder();
     geocoder.geocode( { 'address': address}, function(results, status) {
     if (status == google.maps.GeocoderStatus.OK) {
     var latlng = results[0].geometry.location;
     var myOptions = {
     zoom: 15,
     center: latlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
     map.setCenter(results[0].geometry.location);
     var marker = new google.maps.Marker({
     map: map,
     position: results[0].geometry.location
     });
     } else {
     //alert("There was a problem query to google maps.\nDetails:\n " + status);
     }
     });
     }
     </script>

Og det sted på siden hvor kortet skal vises har jeg indsat:

HTML kode

 <div id="world">    <div id="map_canvas" style="width:340px; height:300px"></div>
     <script type='text/javascript'>loadMap('Vesterbrogade 3, 1630 københavn');</script>>/div>

Håber det kan hjælpe lidt.

Siden kommer ikke med nogen fejl. Kortet bliver bare ikke vist. i min div: world

<< < 1 2 > >>

google maps på egen hjemmeside

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler