aan alle goede dingen komt een eind, webmasterplein.net 2003 - 2013
wij danken jullie voor al mooie momenten die dankzij dit forum ontstonden - Derk, Rutger en Stef

Multiadressen in Google Maps weergeven

Het echte opmaakwerk, alles vragen over HTMLen, CSSen en Javascripten.

Multiadressen in Google Maps weergeven

Berichtdoor Stefan » 09 jun 2010 14:26

Hey Webmasters!

Het is al weer een tijdje geleden dat ik een vraag had maar nu heb ik er toch weer 1. Ik was al gedeeltelijk geholpen op PHPhulp maar die hebben nogsteeds niet genoeg kennis in huis.
Daarom mijn vraag nog maar een keer:

Ik zit met een database met daarin adressen (straat+nummer, postcode, plaats, land).
Nu wil ik deze adressen tonen op een Google Maps, alleen mijn vraag is hoe ik dit kan doen. Een applicatie van een derde persoon is niet mogelijk omdat er regelmatig addressen worden toegevoegd of juist weer verwijderd.

Code die ik al heb:
Code: Selecteer alles
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
  setMarkers(map, beaches);
}

var beaches = [
  ['Bondi Beach', -33.890542, 151.274856],
  ['Coogee Beach', -33.923036, 151.259052],
  ['Cronulla Beach', -34.028249, 151.157507],
  ['Manly Beach', -33.80010128657071, 151.28747820854187],
  ['Maroubra Beach', -33.950198, 151.259302]
];

function setMarkers(map, locations) {
  for (var i = 0; i < locations.length; i++) {
     
    var beach = locations[i];
   
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
   
    var infowindow = new google.maps.InfoWindow({
        content: beach[0]
    });
   
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: beach[0]
    });
   
    google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map, marker);
    });
  }
}
</script>


Nu laat bovenstaande code alle vijf de locaties in Google Maps zien maar hij laat maar één tekstwolk zien, steeds dezelfde op welke marker je ook klikt. Hebben jullie hier een oplossing voor?

Ik heb overigens http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/v2/services.htmldeze API van Google gebruikt.
Opzoek naar een webdesigner? http://webtilize.net/
Avatar gebruiker
Stefan
wmpr
 
Berichten: 406
Geregistreerd: 27 dec 2007 14:08
Woonplaats: Ter Aar

Re: Multiadressen in Google Maps weergeven

Berichtdoor frizzy » 09 jun 2010 16:41

http://plantenencyclopedie.alleplanten. ... tuincentra

Dit heb ik wel eens gemaakt (map werkt niet meer)
frizzy
wmpr
 
Berichten: 4261
Geregistreerd: 20 sep 2006 16:03
Woonplaats: Boskoop :D

Re: Multiadressen in Google Maps weergeven

Berichtdoor Stef » 09 jun 2010 16:45

Doet het bij mij niet Frizzy.

Bedoel je zoiets? http://www.foquestoisterwijk.nl/contact

Ik maak gebruik van V3, maar heb het eerst ook met V2 gemaakt.

En de volgende keer direct op WMP vragen he!
Avatar gebruiker
Stef
wmpr
 
Berichten: 5575
Geregistreerd: 27 nov 2003 21:51

Re: Multiadressen in Google Maps weergeven

Berichtdoor Stefan » 09 jun 2010 17:01

@Stef, daar kan ik wel iets mee.

Ik maak ook gebruik van V3 maar boven de API staat nog V2 :o

De broncode is niet zo heel erg overzichtelijk maar er valt wel taart mee te bakken. Ik dacht doe het wel met een array scheelt weer ruimte maar misschien toch niet de makkelijkste manier.

Of ik maak voor iedere melding wel een aparte var aan.

En de volgende keer direct op WMP vragen he!
Zal ik zeker doen, hier krijg je tenminste duidelijker antwoord!
Laatst bijgewerkt door Stefan op 09 jun 2010 17:04, in totaal 1 keer bewerkt.
Opzoek naar een webdesigner? http://webtilize.net/
Avatar gebruiker
Stefan
wmpr
 
Berichten: 406
Geregistreerd: 27 dec 2007 14:08
Woonplaats: Ter Aar

Re: Multiadressen in Google Maps weergeven

Berichtdoor Stef » 09 jun 2010 17:03

Als je de PHP-code er achter wilt hebben (die is wel overzichtelijk) moet je het maar even laten weten.
Avatar gebruiker
Stef
wmpr
 
Berichten: 5575
Geregistreerd: 27 nov 2003 21:51

Re: Multiadressen in Google Maps weergeven

Berichtdoor Stefan » 09 jun 2010 17:05

Als ik die zou mogen zien, graag :D Ik was zelf al een stukje begonnen met de javascript die ik eerder al plaatste maar als ik die van jou als voorbeeld zou mogen gebruiken maakt dat het nog makkelijker.
Opzoek naar een webdesigner? http://webtilize.net/
Avatar gebruiker
Stefan
wmpr
 
Berichten: 406
Geregistreerd: 27 dec 2007 14:08
Woonplaats: Ter Aar

Re: Multiadressen in Google Maps weergeven

Berichtdoor Stef » 09 jun 2010 17:14

Rechtstreeks van de site, kijk maar even of je het begrijpt en laat anders weten waar je vast loopt.

Code: Selecteer alles
*knip*
Avatar gebruiker
Stef
wmpr
 
Berichten: 5575
Geregistreerd: 27 nov 2003 21:51

Re: Multiadressen in Google Maps weergeven

Berichtdoor Stefan » 09 jun 2010 17:20

Zoals ik het script lees snap ik het wel, ik ga kijken of ik eruit kom (vast wel).
Opzoek naar een webdesigner? http://webtilize.net/
Avatar gebruiker
Stefan
wmpr
 
Berichten: 406
Geregistreerd: 27 dec 2007 14:08
Woonplaats: Ter Aar

Re: Multiadressen in Google Maps weergeven

Berichtdoor Remi » 09 jun 2010 17:44

Het probleem met jou script is dat je var infowindow en marker niet uniek zijn. Deze worden telkens overschreven, dus alleen de laatste blijven staan. Dus wat het script doet het neemt ongeachte op welke marker je klikt de laatste infowindow en hangt deze boven de laatste marker.
Ik heb geprobeerd om jou script op te losen door het in een array te hangen. Maar dat wilde niet leuken, ik denk dat je in javascript geen objecten in een array kan hangen.
Om die laatste rede moet je een andere oplossing zoeken, stef draagt al een mooie aan. Maar ik denk ik leg even uit waarom jou script niet werkt. ;)
Avatar gebruiker
Remi
wmpr
 
Berichten: 3010
Geregistreerd: 04 apr 2006 15:22

Re: Multiadressen in Google Maps weergeven

Berichtdoor Stefan » 10 jun 2010 09:40

Het is me gelukt! Zie hieronder de code...

Code: Selecteer alles
function get_markers()
{
   global $db;
   
   $sAddresses = $db->sql_query("
      SELECT
         tmca.address_id,
         tmca.address_street,
         tmca.address_zipcode,
         tmca.address_place,
         tmca.address_country,
         tmca.address_longitude,
         tmca.address_latitude,
         tmca.address_compagnyid,
         tmc.compagny_name,
         tmc.compagny_location
      FROM
         " . TABLE_MAIN_COMPAGNIES_ADDRESSES . " AS tmca
      INNER JOIN
         " . TABLE_MAIN_COMPAGNIES . " AS tmc
      ON
         tmc.compagny_id = tmca.address_compagnyid
      WHERE
         tmca.address_type = 1
   ");
   
   if(!$sAddresses || ($db->sql_query_count($sAddresses) == 0))
   {
      if(!$sAddresses)
         errorlog('Could not load addresses', TABLE_MAIN_COMPAGNIES_ADDRESSES, 'main/addresses/addressview.php', 1);
      
      $return .= 'Er zijn geen adressen gevonden...';
   }
   else
   {
      $return .= 'var blueIcon = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";';
      $return .= 'var redIcon = "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";';
         
      while($rAddresses = $db->sql_query_fetch($sAddresses))
      {
         $return .= 'var infowindow_id' . $rAddresses['address_id'] . ' = new google.maps.InfoWindow( { content: \'' . $rAddresses['compagny_name'] . ' (' . $rAddresses['compagny_location'] . ')\'  });';
         $return .= 'var marker_id' . $rAddresses['address_id'] . ' = new google.maps.Marker({ position: new google.maps.LatLng(' . $rAddresses['address_latitude']. ', ' . $rAddresses['address_longitude']. '), map: map, icon: ' . (($rAddresses['address_id'] == 1) ? 'blueIcon' : 'redIcon') . ' });';
      
         $return .= 'google.maps.event.addListener(marker_id' . $rAddresses['address_id'] . ', \'click\', function() { infowindow_id' . $rAddresses['address_id'] . '.open(map,marker_id' . $rAddresses['address_id'] . '); }); ';
           $return .= 'google.maps.event.addListener(marker_id' . $rAddresses['address_id'] . ', \'dblclick\', function() { infowindow_id' . $rAddresses['address_id'] . '.close(); }); ';
      }
   }
   
   return $return;
}


Code: Selecteer alles
$page .= '
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=nl&language=nl"></script>
      <script type="text/javascript">
         function initialize() {
          var myLatlng = new google.maps.LatLng(52.1326, 5.2913);
          var myOptions = {
               zoom: 8,
               center: myLatlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
          }
          var map = new google.maps.Map(document.getElementById("map"), myOptions);
         
         ' . get_markers() . '
      }
      
   </script>
   
   <div onLoad="initialize()"></div>
   <div id="map" style="width:100%; height:900px"></div>
';


Dank voor jullie hulp en @remi, bedankt voor de analyse!
Opzoek naar een webdesigner? http://webtilize.net/
Avatar gebruiker
Stefan
wmpr
 
Berichten: 406
Geregistreerd: 27 dec 2007 14:08
Woonplaats: Ter Aar

Re: Multiadressen in Google Maps weergeven

Berichtdoor Stefan » 10 jun 2010 14:26

Ik heb nog een andere vraag:

Is het mogelijk om te zorgen dat als je een nieuw infowindow aanroept dat het reeds geopende infowindow gesloten wordt?
Opzoek naar een webdesigner? http://webtilize.net/
Avatar gebruiker
Stefan
wmpr
 
Berichten: 406
Geregistreerd: 27 dec 2007 14:08
Woonplaats: Ter Aar

Re: Multiadressen in Google Maps weergeven

Berichtdoor Remi » 10 jun 2010 17:40

Ik denk dat dit zou moeten werken:
Ik heb het alleen nog niet getest, dus het kan ook dat het niet werkt. Ik heb een functie toegevoegd die alle markers sluit, close_all_markers(). Deze functie wordt uitgevoerd zodra er op een marker wordt geklikt. Dus alle infowindows worden gesloten. Vervolgens wordt de infowindow geopend waar zojuist opgeklikt was.
Laat even weten of het werkt.
Code: Selecteer alles
<?php

function get_markers
()
{
   global $db;
   
   $sAddresses 
= $db->sql_query("
      SELECT
         tmca.address_id,
         tmca.address_street,
         tmca.address_zipcode,
         tmca.address_place,
         tmca.address_country,
         tmca.address_longitude,
         tmca.address_latitude,
         tmca.address_compagnyid,
         tmc.compagny_name,
         tmc.compagny_location
      FROM
         "
 . TABLE_MAIN_COMPAGNIES_ADDRESSES . " AS tmca
      INNER JOIN
         "
 . TABLE_MAIN_COMPAGNIES . " AS tmc
      ON
         tmc.compagny_id = tmca.address_compagnyid
      WHERE
         tmca.address_type = 1
   "
);
   
   if
(!$sAddresses || ($db->sql_query_count($sAddresses) == 0))
   {
      if(!$sAddresses)
         errorlog('Could not load addresses', TABLE_MAIN_COMPAGNIES_ADDRESSES, 'main/addresses/addressview.php', 1);
      
      $return 
.= 'Er zijn geen adressen gevonden...';
   }
   else
   
{
      $return .= 'var blueIcon = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";';
      $return .= 'var redIcon = "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";';
         
      while
($rAddresses = $db->sql_query_fetch($sAddresses))
      {
         $return .= 'var infowindow_id' . $rAddresses['address_id'] . ' = new google.maps.InfoWindow( { content: \'' . $rAddresses['compagny_name'] . ' (' . $rAddresses['compagny_location'] . ')\'  });';
         $return .= 'var marker_id' . $rAddresses['address_id'] . ' = new google.maps.Marker({ position: new google.maps.LatLng(' . $rAddresses['address_latitude']. ', ' . $rAddresses['address_longitude']. '), map: map, icon: ' . (($rAddresses['address_id'] == 1) ? 'blueIcon' : 'redIcon') . ' });';
      
         $return 
.= 'google.maps.event.addListener(marker_id' . $rAddresses['address_id'] . ', \'click\', function() {  close_all_markers(); infowindow_id' . $rAddresses['address_id'] . '.open(map,marker_id' . $rAddresses['address_id'] . '); }); ';
           $return .= 'google.maps.event.addListener(marker_id' . $rAddresses['address_id'] . ', \'dblclick\', function() { infowindow_id' . $rAddresses['address_id'] . '.close(); }); ';
      }
        
    $return 
.= 'function close_all_markers(){';
    while($rAddresses = $db->sql_query_fetch($sAddresses))
      {      
         $return 
.= 'infowindow_id' . $rAddresses['address_id'] . '.close(); ';
      }
    $return .= '}' ; 
    

   
}
   
   return $return
;
}
?>
Avatar gebruiker
Remi
wmpr
 
Berichten: 3010
Geregistreerd: 04 apr 2006 15:22

Re: Multiadressen in Google Maps weergeven

Berichtdoor Stefan » 16 jun 2010 08:25

@Remi, het werkt hoor! Het heeft even geduurd maar ik was niet op mijn werk dus ik kon het niet testen.

Die broncode is best wel lang nu :o Met ongeveer 220 adressen...

EDIT: ter info, het cache bestandje is 134kb
Opzoek naar een webdesigner? http://webtilize.net/
Avatar gebruiker
Stefan
wmpr
 
Berichten: 406
Geregistreerd: 27 dec 2007 14:08
Woonplaats: Ter Aar


Keer terug naar HTML, CSS, Javascript



cron