login  Naam:   Wachtwoord: 
Registreer je!
 Forum
Zoeken  Regels  Help
Categorieën > JavaScript

Google Maps centreren op de 3 markers

JLT – 15/08/2011 15:09
Offline offline




PHP 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
Daisycon - Verdien geld met uw website

WouterPSV – 15/08/2011 17:35
Offline offline



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 :

  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>

vinTage – 15/08/2011 21:20
Offline offline



Nieuw lid
Niet zelf getest 

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

then for each marker:

bounds.extend(myLatLng);

map.fitBounds(bounds);

JLT – 16/08/2011 09:28
Offline offline



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

WouterJ – 16/08/2011 15:25
Offline offline



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)

JLT – 16/08/2011 17:03
Offline offline



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...

WouterJ – 16/08/2011 21:31
Offline offline



HTML gevorderde
Je vergeet het defineren van de var bounds (of ik zie het over het hoofd):
  1. var bounds = new google.maps.LatLngBounds();

JLT – 17/08/2011 09:17
Offline offline



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...

JLT – 17/08/2011 09:17
Offline offline



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-2012 Sitemasters.be - Regels - Gehost door: Vircon - Laadtijd: 0.037s