javascript - Centrering af google kort - Udvikleren.dk - Programmering, webdesign og grafik

Tags: javascript gomap

Bruger #16723 @ 03.07.13 10:22

JScript kode

 $(function() { 
     $("#map").goMap({ 
         latitude: 55.948813, 
         longitude: 11.104004, 
         zoom: 6 
         });
         markers: [{  
             latitude: 55.47184660, 
             longitude: 11.88010510,
             html: { 
                 content: 'Parkeringsplads og indgang <br><a href="http://www.kvaerkebyfuglereservat.dk/forside-2">info</a>', 
                 popup: false 
             } 
         },{  
             latitude: 55.47195770, 
             longitude: 11.87810520,
             icon: 'js/drag.png', 
             html: { 
                 content: 'Her kan du se gransanger og Gråand', 
                 popup: false 
             } 
         },{  
             latitude: 55.47126680, 
             longitude: 11.87800530,
             icon: 'js/drag.png', 
             html: { 
                 content: 'Om foråret kan se citronsommerfugl her', 
                 popup: false 
             } 
         }], 
         hideByClick:   false, 
         oneInfoWindow: false 
     }); 
 });

Google kortet skal centrer om latitude: 55.948813 og longitude: 11.104004, og herefter oprettet 3 location.
Men jeg kan ikke gennemskue, hvorfor det ikke virker ! Håber I vil hjælpe mig :-)

http://www.pittss.lv/jquery/gomap/examples.php

Indlæg senest redigeret d. 03.07.2013 10:25 af Bruger #16723

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 @ 03.07.13 12:39

1.223

forsættelse af http://www.udvikleren.dk/forum/40062/google-kort-paa-egen-hjemmeside-med-flere-adresse/
prøv denne

Kode

<!DOCTYPE html>
    <html>
    <head>
	<meta charset="utf-8">
	<title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="jquery.gomap-1.3.2.min.js"></script>
    <style type="text/css">
		#map {
			width:710px;
			margin:0 auto;
		height:600px;
		}
    </style>
	</head>
    <body>
    <!-- map er ID'et der benyttes under initialisiationen -->
    <div id="map"></div>
    <script type="text/javascript">
$(function() {
 	$("#map").goMap({
		latitude: 55.47184660,
		longitude: 11.88010510,
		zoom: 14, 
    
		markers: [{
			latitude: 55.47184660,
			longitude: 11.88010510,
			icon: 'drag.png',
			html: {
				content: 'Parkeringsplads og indgang <br><a href="http://www.kvaerkebyfuglereservat.dk/forside-2">info</a>',
				popup: false
			}		
			},{
				latitude: 55.47195770,
				longitude: 11.87810520,
				icon: 'drag.png',
			html: {	
				content: 'Her kan du se gransanger og Gråand',
				popup: false
			}
			},{
				latitude: 55.47126680,
				longitude: 11.87800530,
				icon: 'drag.png',
			html: {
				content: 'Om foråret kan se citronsommerfugl her',
				popup: false
			}
		}],
		hideByClick: false,
		oneInfoWindow: false
	});
}); 

</script>
</body>
</html>

der skal da godt nok zoomes ind for at se der er 3 locationer, derfor zoom: 14 og ikke 6
demo http://udvikleren.olsensweb.dk/40068/geomap.html
ret selv placeringerne af img i js så de passer til dit, jeg har det hele lagt sammen sted
og skift så icon: 'drag.png', til mere passende icon

Bruger #16075 @ 03.07.13 16:03

1.223

Her virker det, men her kan jeg ikke bruge "popup besked html"

har du prøvet med ?

Kode

html: { 
    content: 'Bækkelunds have', 
    popup: false 
}

kortet her er centraret omkring tivoli (københavn)

Kode

<!DOCTYPE html>
    <html>
    <head>
	<meta charset="utf-8">
	<title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="jquery.gomap-1.3.2.min.js"></script>
    <style type="text/css">
		#map {
			width:710px;
			margin:0 auto;
		height:600px;
		}
    </style>
	</head>
    <body>
    <!-- map er ID'et der benyttes under initialisiationen -->
    <div id="map"></div>	
    <script>
    $(function() {
    $("#map").goMap({
		latitude: 55.673726200000000000,
		longitude: 12.568341599999940000, 
		zoom: 7
    });
    $.goMap.createMarker({
    address: 'Bækkelunds have, Odense',
	html: { 
                content: 'Bækkelunds have', 
                popup: false 
            } 
	
    });
    $.goMap.createMarker({
    address: 'uffesvej 12, Odense',
	html: { 
                content: 'uffesvej 12', 
                popup: false 
            } 
    });
    });
    </script>
    </body>
    </html>

demo http://udvikleren.olsensweb.dk/40068/geomap1.html

Bruger #955 @ 03.07.13 11:04

1.624

Hvad er det der ikke virker?

Centreringen kun eller mangler de 3 lokationer også?

Kan vi se din kode live et sted?

Bruger #16723 @ 03.07.13 11:12

Hvad er det der ikke virker?

Centreringen kun eller mangler de 3 lokationer også?

Kan vi se din kode live et sted?

Der kommer kun en tom side !

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="js/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><style type="text/css">
 #map {        
     width:710px;
     margin:0 auto;
     height:600px;        
 }    
 </style>
   <script>
  $(function() { 
     $("#map").goMap({ 
         latitude: 56.948813, 
         longitude: 24.104004, 
         zoom: 6 
         });
         markers: [{  
             latitude: 55.47184660, 
             longitude: 11.88010510,
             html: { 
                 content: 'Parkeringsplads og indgang <br><a href="http://www.kvaerkebyfuglereservat.dk/forside-2">info</a>', 
                 popup: false 
             } 
         },{  
             latitude: 55.47195770, 
             longitude: 11.87810520,
             icon: 'js/drag.png', 
             html: { 
                 content: 'Her kan du se gransanger og Gråand', 
                 popup: false 
             } 
         },{  
             latitude: 55.47126680, 
             longitude: 11.87800530,
             icon: 'js/drag.png', 
             html: { 
                 content: 'Om foråret kan se citronsommerfugl her', 
                 popup: false 
             } 
         }], 
         hideByClick:   false, 
         oneInfoWindow: false 
     }); 
 }); 
  </script>
  </body>
  </html>

Her er hel koden :-)

Jeg har lavet koden om, men nu vil den ikke lave popup (html)

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="js/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><style type="text/css">
 #map {        
     width:710px;
     margin:0 auto;
     height:600px;        
 }    
 </style>
   <script>
   $(function() { 
      $("#map").goMap({ 
          
              latitude: 56.948813, 
              longitude: 24.704004, 
              zoom: 6
          
      }); 
   
      $.goMap.createMarker({  
              address: 'Bækkelunds have, Odense'
               
      }); 
      
      $.goMap.createMarker({  
              address: 'uffesvej 12, Odense' 
              
      }); 
  });
  </script>
  </body>
  </html>

Indlæg senest redigeret d. 03.07.2013 11:45 af Bruger #16723

Bruger #955 @ 03.07.13 11:51

1.624

De to JavaScript filer du linker til ligger i "js" mappen?

Bruger #16723 @ 03.07.13 13:39

Mange tak for hjælpen.
Den center forsat om den første location"Parkeringsplads og indgang" Centreringen skal være ude i søen, men uden positionsmål

http://teaterforeningenfyn.dk/test/test11.html test domæne
Her virker det, men her kan jeg ikke bruge "popup besked html"

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="js/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><style type="text/css">
  #map {        
      width:710px;
      margin:0 auto;
      height:600px;        
  }    
  </style>
    <script>
    $(function() { 
       $("#map").goMap({ 
           
               latitude: 56.948813, 
               longitude: 24.704004, 
               zoom: 6
           
       }); 
    
       $.goMap.createMarker({  
               address: 'Bækkelunds have, Odense'
                
       }); 
       
       $.goMap.createMarker({  
               address: 'uffesvej 12, Odense' 
               
       }); 
   });
   </script>
   </body>
   </html>

Bruger #10216 @ 03.07.13 15:08

4.283

Kan man overhovedet det?

Ellers vil jeg nok begynde at kigge på matematikken i triangulering.

Så længe du kun arbejder med xy-sæt burde det være som at regne med pythagoras.

Bruger #16723 @ 03.07.13 15:17

Kan man overhovedet det?

Ellers vil jeg nok begynde at kigge på matematikken i triangulering.

Så længe du kun arbejder med xy-sæt burde det være som at regne med pythagoras.

Koordinater ud i søen skal jeg nok finde. Men hvordan fortæller jeg google kortet, der skal være centrum ude i søen uden positionsmål ?

Bruger #16723 @ 03.07.13 18:11

Her virker det, men her kan jeg ikke bruge "popup besked html"

har du prøvet med ?

Kode

html: { 
    content: 'Bækkelunds have', 
    popup: false 
}

kortet her er centraret omkring tivoli (københavn)

Kode

<!DOCTYPE html>
    <html>
    <head>
	<meta charset="utf-8">
	<title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="jquery.gomap-1.3.2.min.js"></script>
    <style type="text/css">
		#map {
			width:710px;
			margin:0 auto;
		height:600px;
		}
    </style>
	</head>
    <body>
    <!-- map er ID'et der benyttes under initialisiationen -->
    <div id="map"></div>	
    <script>
    $(function() {
    $("#map").goMap({
		latitude: 55.673726200000000000,
		longitude: 12.568341599999940000, 
		zoom: 7
    });
    $.goMap.createMarker({
    address: 'Bækkelunds have, Odense',
	html: { 
                content: 'Bækkelunds have', 
                popup: false 
            } 
	
    });
    $.goMap.createMarker({
    address: 'uffesvej 12, Odense',
	html: { 
                content: 'uffesvej 12', 
                popup: false 
            } 
    });
    });
    </script>
    </body>
    </html>

demo http://udvikleren.olsensweb.dk/40068/geomap1.html

Mange tak for hjælpen :-)
Hvorfor er latitude: 55.673726200000000000, blevet så lang ?

Indlæg senest redigeret d. 03.07.2013 18:20 af Bruger #16723

Bruger #16075 @ 03.07.13 19:41

1.223

Mange tak for hjælpen :-)
Hvorfor er latitude: 55.673726200000000000, blevet så lang ?

selvtak,
du kan uden problemer fjerne mindst 12 af de sidste decimaler i latitude, longitude i dette tilfælde, men alt andet lige, jo flere decimaler jo mere precist er punktet udpeget
prøvede med latitude: 55.673726, longitude: 12.568341, uden problemer

Centrering af google kort

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler