login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Google Maps centreren op de 3 markers

Offline JLT - 15/08/2011 15:09
Avatar van JLTPHP interesse Hoi allemaal,

Voor een klant heb ik 3 adressen omgezet (geocoding) naar coördinaten welke ik vervolgens op een Google Maps kaart toon. Nu heb ik het eindelijk voor elkaar en dat werkt goed. Nu wil ik alleen ook dat kaart automatisch aangepast wordt (middels zoom en locatie) zodat alle markers in beeld zijn.

Ik heb al heel wat dingen gevonden en geprobeerd, maar kom er niet uit. Ik gebruik API v3. Hopelijk dat een van jullie me op weg kunnen helpen.

Hierbij de code voor Google Maps die ik momenteel gebruik

Natuurlijk bedankt voor de moeite (en waarschijnlijk de wijze les)

8 antwoorden

Gesponsorde links
Offline WouterPSV - 15/08/2011 17:35
Avatar van WouterPSV Lid In je code doe je de optie myOptions.

Als je met die Zoom wat probeert zou het het moeten werken. Heb het zojuist even in mijn eigen site getest.

Mijn code ziet er zo uit :

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. 		function initialize() {
  3. 		  var myLatlng = new google.maps.LatLng(53.18865, 6.54725);
  4. 		  var myOptions = {
  5. 			zoom: 14,
  6. 			center: myLatlng,
  7. 			mapTypeId: google.maps.MapTypeId.ROADMAP
  8. 		  }
  9. 		  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  10.  
  11. 		  var image = '../images/logo_google.png';
  12. 		  var myLatLng = new google.maps.LatLng(53.18865, 6.54725);
  13. 		  var CTAMarker = new google.maps.Marker({
  14. 			  position: myLatLng,
  15. 			  map: map,
  16. 			  title:"CleanTech Alliantie",
  17. 			  icon: image
  18. 		  });
  19. 		}
  20. 	</script>
Offline vinTage - 15/08/2011 21:20
Avatar van vinTage Nieuw lid Niet zelf getest 

stackoverflow schreef:
var bounds = new google.maps.LatLngBounds();

then for each marker:

bounds.extend(myLatLng);

map.fitBounds(bounds);
Offline JLT - 16/08/2011 09:28
Avatar van JLT PHP interesse Hoi Wouter

Met die zoomoptie kan in inderdaad het zoom niveau veranderen, maar ik wil dat dat automatisch gebeurd, want de Google Maps markers veranderen bij elke pagina request en zijn dus niet statisch.

Hoi Vintage,

Dat stukje script ben ik ook tegen gekomen, maar hoe moet ik dat precies verwerken (lees: waar plaats ik die stukken code) in mijn script. Bij mij werkte het dus niet, maar misschien dat ik het niet goed geplaatst heb.

Natuurlijk beide bedankt voor de moeite,

Grt.
Jelte
Offline WouterJ - 16/08/2011 15:25
Avatar van WouterJ HTML gevorderde Zie bijv. deze uitleg: http://blog.sha...aps-api-v3/
En de officiële documentatie: http://code.goo...tLngBounds
En voor mijn voorbeeldje: http://waldio.webatu.com/js/mapsV3/fitBounds.html (met uitleg in de broncode)
Offline JLT - 16/08/2011 17:03
Avatar van JLT PHP interesse Hoi Waldio,

Ik had die pagina's ook gezien op jouw voorbeeldje na. Die heb ik dan ook gebruikt om het te integreren op mijn website. Het probleem is dat ik dan alleen de eerste marker zie (wel gecentreerd). De andere markers zijn verdwenen. Als ik de bounds extend code weg haal bij de eerste marker zie ik de eerste twee. Op de een of andere manier verdwijnen mijn markers na de code.

Ik zal vast iets fout doen, maar zie zo snel niet wat.

Hierbij de aangepaste code

Hopelijk kan je me nog even verder helpen...
Offline WouterJ - 16/08/2011 21:31
Avatar van WouterJ HTML gevorderde Je vergeet het defineren van de var bounds (of ik zie het over het hoofd):
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var bounds = new google.maps.LatLngBounds();
Offline JLT - 17/08/2011 09:17
Avatar van JLT PHP interesse Je had gelijk, maar nadat ik dat gedaan heb werkt het nog steeds niet :-s Toen ik deze korte handleiding zelf had gevonden liep ik tegen het zelfde probleem. Ik heb het idee dat ik de codes niet goed plaats.

Hierbij nog even mijn volledige (nieuwe) code
nieuwe code

Hopelijk kan je me nog even helpen speuren...
Offline JLT - 17/08/2011 09:17
Avatar van JLT PHP interesse Je had gelijk, maar nadat ik dat gedaan heb werkt het nog steeds niet :-s Toen ik deze korte handleiding zelf had gevonden liep ik tegen het zelfde probleem. Ik heb het idee dat ik de codes niet goed plaats.

Hierbij nog even mijn volledige (nieuwe) code
nieuwe code

Hopelijk kan je me nog even helpen speuren...
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.203s