Google kort på egen hjemmeside med flere adresse

Tags: google-maps

Bruger #16723 @ 30.06.13 13:25

Kende I et godt sted på internettet, hvor jeg kan læse om google kort på egen hjemmeside med flere adresse.
Jeg er ikke så god til engelsk, men har læst lidt på https://developers.google.com/maps/documentation/javascript/
Der må finde en tutorials, med flere adresse et eller andet sted på internettet

Men hvor

10 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 10 karma

Sorter efter stemmer Sorter efter dato

Bruger #16075 @ 01.07.13 13:56

1.223

>Der sker ingen ting ! siden er tom

prøv at tilføje CSS, så den har en bredde

Kode

<style type="text/css">
#map {		
	width:100%;
	margin:0 auto;
	height:400px;		
}	
</style>

Bruger #4487 @ 01.07.13 18:11

1.384

Det hjalp med :

HTML kode

 <style type="text/css">
 #map {        
     width:100%;
     margin:0 auto;
     height:400px;        
 }    
 </style>

HTML kode

 $(function() { 
     $("#map").goMap({ 
         markers: [{  
             latitude: 56.948813, 
             longitude: 24.704004, 
             html: { 
                 content: 'Hello InfoWindow<br> #1!', 
                 popup: false 
             } 
         },{  
             latitude: 50.948813, 
             longitude: 7.704004, 
             html: { 
                 content: 'Hello InfoWindow #2!', 
                 popup: true 
             } 
         }], 
         hideByClick:   false, 
         oneInfoWindow: false 
     }); 
 });

Men jeg vil heller bruge en adresse !

Hvis du hellere vil bruge en adresse, tror jeg at du bare skal initialiserer en 'marker' ved brug af address i stedet for længdegrad og breddegrad.

JScript kode

 $("#map").goMap({ 
         markers: [{  
             address: 'Christiansborg, København, Danmark',
             html: { 
                 content: 'Hello InfoWindow<br> #1!', 
                 popup: false 
             } 
         },{  
             address: 'Amalienborg, København, Danmark',
             html: { 
                 content: 'Hello InfoWindow #2!', 
                 popup: true 
             } 
         }], 
         hideByClick:   false, 
         oneInfoWindow: false 
     }); 
 });

Men ellers kan du vist også benytte dig af funktionen createMarker()

JScript kode

 $.goMap.createMarker({  
     address: 'Vilnius, Lithuania' 
 });

Indlæg senest redigeret d. 01.07.2013 18:12 af Bruger #4487

Bruger #4487 @ 30.06.13 14:07

1.384

Måske du kan gøre brug af dette API - http://www.pittss.lv/jquery/gomap/

Bruger #16723 @ 30.06.13 14:59

Måske du kan gøre brug af dette API - http://www.pittss.lv/jquery/gomap/

Mangler en forklaring, hvor kode fra ttp://www.pittss.lv/jquery/gomap/ skal ind på en html side ?

Bruger #4487 @ 30.06.13 16:24

1.384

Du kan imellem din <head></head> HTML tag inkluderer følgende

HTML kode

 <!DOCTYPE html>
 <html>
 <head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>  
    <script type="text/javascript" src="js/jquery.gomap-1.3.2.min.js"></script>
 </head>
 <body>
    <!-- map er ID'et der benyttes under initialisiationen -->
    <div id="map"></div>
 </body>
 </html>

Hvor Gomap biblioteket er det du har downloadet fra siden.

Herefter kan du inistialiserer gomap således

JScript kode

 $(function() { 
     $("#map").goMap({ 
         markers: [{  
             latitude: 56.948813, 
             longitude: 24.704004, 
             title: 'marker title 1' 
         }] 
     }); 
  
     $.goMap.createMarker({  
             address: 'Vilnius, Lithuania' 
     }); 
 });

Hvor gang du vil lave en ny markering, kan du bruge funktionen 'createMarker()'. Bemærk at javascript koden ovenfor skal ind i et <script /> HTML tag.

Indlæg senest redigeret d. 30.06.2013 16:25 af Bruger #4487

Bruger #16723 @ 01.07.13 13:12

HTML kode

 <!DOCTYPE html>
  <html>
  <head>
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>  
     <script type="text/javascript" src="js/jquery.gomap-1.3.2.min.js"></script>
  </head>
  <body>
     <!-- map er ID'et der benyttes under initialisiationen -->
     <div id="map"></div>
   <script>
   $(function() { 
      $("#map").goMap({ 
          markers: [{  
              latitude: 56.948813, 
              longitude: 24.704004, 
              title: 'marker title 1' 
          }] 
      }); 
   
      $.goMap.createMarker({  
              address: 'Vilnius, Lithuania' 
      }); 
  });
  </script>
  </body>
  </html>

Der sker ingen ting ! siden er tom

Bruger #4487 @ 01.07.13 15:16

1.384

HTML kode

 <!DOCTYPE html>
  <html>
  <head>
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>  
     <script type="text/javascript" src="js/jquery.gomap-1.3.2.min.js"></script>
  </head>
  <body>
     <!-- map er ID'et der benyttes under initialisiationen -->
     <div id="map"></div>
   <script>
   $(function() { 
      $("#map").goMap({ 
          markers: [{  
              latitude: 56.948813, 
              longitude: 24.704004, 
              title: 'marker title 1' 
          }] 
      }); 
   
      $.goMap.createMarker({  
              address: 'Vilnius, Lithuania' 
      }); 
  });
  </script>
  </body>
  </html>

Der sker ingen ting ! siden er tom

Har du husket at downloade gomap scriptet og lagt det ind i en js mappe som er relativ i forhold til din HTML side?

Og ja, prøv at give din #map div en bredde og en højde

Indlæg senest redigeret d. 01.07.2013 15:17 af Bruger #4487

Bruger #16723 @ 01.07.13 15:21

Det hjalp med :

HTML kode

 <style type="text/css">
 #map {        
     width:100%;
     margin:0 auto;
     height:400px;        
 }    
 </style>

HTML kode

 $(function() { 
     $("#map").goMap({ 
         markers: [{  
             latitude: 56.948813, 
             longitude: 24.704004, 
             html: { 
                 content: 'Hello InfoWindow<br> #1!', 
                 popup: false 
             } 
         },{  
             latitude: 50.948813, 
             longitude: 7.704004, 
             html: { 
                 content: 'Hello InfoWindow #2!', 
                 popup: true 
             } 
         }], 
         hideByClick:   false, 
         oneInfoWindow: false 
     }); 
 });

Men jeg vil heller bruge en adresse !

Bruger #16723 @ 01.07.13 18:44

HTML kode

 $(function() { 
     $("#map").goMap({ 
         zoom: 10,
         markers: [{  
             latitude: 55.448813, 
             longitude: 10.424004,
             html: { 
                 content: 'Hello InfoWindow<br><a href="http://www.w3schools.com/">Visit W3Schools</a>', 
                 popup: false 
             } 
         },{  
             latitude: 55.40375600, 
             longitude: 10.40237000,
             icon: 'js/drag.png', 
             html: { 
                 content: 'Hello InfoWindow #2!', 
                 popup: false 
             } 
         },{  
             latitude: 55.478813, 
             longitude: 10.414804,
             icon: 'js/drag.png', 
             html: { 
                 content: 'Hello InfoWindow #3!', 
                 popup: false 
             } 
         }], 
         hideByClick:   false, 
         oneInfoWindow: false 
     }); 
 });

Her er hele min kode, hvis andre kan bruge den

Tak for hjælpen til Martin Rohwedder, men de kode med adresse virker desværre ikke !

Indlæg senest redigeret d. 01.07.2013 18:56 af Bruger #16723

Bruger #4487 @ 02.07.13 15:55

1.384

men de kode med adresse virker desværre ikke !

Ok, har heller ikke testet selv, men tænke at det var muligt, da den var på hans hjemmeside i funktionen createMarker().

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler