Google Map met meerdere markers

Status
Niet open voor verdere reacties.
N

Nickdude

Gebruiker
Lid geworden
2 dec 2004
Berichten
88
Hoi Allen,

Onderstaand een code voor google map een kaart te openen met meerdere markers. Ik ben niet echt een pro in het werken met dit soort codes, dus daarom dat ik jullie te hulp vraag.

Waar het om gaat is dat ik via access een planningsprogramma heb waarbij de adressen ingevoerd staan. Ik had bedacht dat ik via een Ms Access een code kan laten genereren in een html bestand om deze vervolgens te openen. Doel hiervan is dat ik met 1 klik kan zien waar de verschillende taken die dag gepland staan.

Ik wil bij iedere marker los de opmaak kunnen veranderen (verschillende letters erin) en de tekst in het tekstwolkje kunnen aanpassen (als men erop klikt).

Nu is het zo dat de punten worden bepaald aan de hand van de graden die men invoert. Ik zou graag willen dat ik het adres invoer en dat aan de hand daarvan de marker op de kaart wordt geplaatst. Dit is mogelijk, maar mij is het niet gelukt. Ik heb de codes gehaald van "http://code.google.com/apis/maps/documentation/examples/" (hier kan men ook een code vinden voor het zoeken van een stad/adres wat misschien de oplossing is voor mij idee).

Hulp wordt beloond!



HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Custom Icon</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
            type="text/javascript"></script>
    <script type="text/javascript">
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(51.608830, 4.820580), 7);
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());

        // Create a base icon for all of our markers that specifies the
        // shadow, icon dimensions, etc.
        var baseIcon = new GIcon();
        baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
        baseIcon.iconSize = new GSize(20, 34);
        baseIcon.shadowSize = new GSize(37, 34);
        baseIcon.iconAnchor = new GPoint(9, 34);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);
        baseIcon.infoShadowAnchor = new GPoint(18, 25);

        // Creates a marker whose info window displays the letter corresponding
        // to the given index.
        function createMarker(point, index) {
          // Create a lettered icon for this point using our icon class
          var letter = String.fromCharCode("A");
          var letteredIcon = new GIcon(baseIcon);
	letteredIcon.image = "http://www.google.com/mapfiles/marker" + "A" + ".png";


          // Set up our GMarkerOptions object
          markerOptions = { icon:letteredIcon };
          var marker = new GMarker(point, markerOptions);

          GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml("Aanvullende informatie");
          });
          return marker;
        }
        	map.addOverlay(createMarker(new GLatLng(51.608830, 4.820580), 1));
	map.addOverlay(createMarker(new GLatLng( 51.397400, 5.399020), 2));	
        }
      }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 1000px; height: 600px"></div>
  </body>
</html>
 
Hoi Nickdude,

Ik heb voor ons bedrijf iets soortgelijks gemaakt.

Ik zal een stuk code posten, maar kan helaas niet alles laten zien.
De onderstaande code wordt door een php script aangemaakt.
myArray bevat alle gegevens die we van een auto hebben (chauffeur, kenteken, laatste vijf posities, snelheid, richting etc.)

HTML: 
//<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(  52.5,  7), 6);

        var baseIcon = new GIcon();
        baseIcon.shadow = "shadowZO.png";
        baseIcon.iconSize = new GSize(77, 33);
        baseIcon.shadowSize = new GSize(77, 33);
        baseIcon.iconAnchor = new GPoint(10, 0);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);
        baseIcon.infoShadowAnchor = new GPoint(0,8);

        function createMarker(point, index) {
          var icon = new GIcon(baseIcon);
          var kenteken = myArray[i]["kenteken"];
          var chauffeur = myArray[i]["chauffeur"];
          var Kpl = myArray[i]["Kpl"];
          var kplurl = "mainfuncties.php?gebied=" + Kpl;
          var kplurl = kplurl + "&userid=";
          var userid = "-";
          var kplurl = kplurl + userid;
          var kplurl= kplurl + "&afdeling=";
          var afdeling = "3N";
          var kplurl = kplurl + afdeling;
          function myOpen() {open(kplurl, name="_self");}
            var richting = myArray[i]["richting"];
            var snelheid = myArray[i]["snelheid"];

          icon.image = "roos.png";
          var marker = new GMarker(point,{title : chauffeur, icon: icon});
          GEvent.addListener(marker, "click", function() {
            myOpen();

          });
          GEvent.addListener(marker, "dblclick", function() {
            marker.openInfoWindowHtml(chauffeur);

          });

          return marker;
        }

        var bounds = map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();

        for (i = 1; i < 10; i++) {
            var latitude = myArray[i]["latitude"];
            var longitude = myArray[i]["longitude"];
            var afdeling = "3N";
            var point = new GLatLng(latitude,longitude);
            var kenteken = myArray[i]["kenteken"];
            var chauffeur = myArray[i]["chauffeur"];
            var richting = myArray[i]["richting"];
            var snelheid = myArray[i]["snelheid"];
            if (snelheid==0) {var kleur = "rood"}
            else if (richting>=0 && richting<=20) {kleur="geelmt"}
            else if (richting>=20 && richting<=70) {kleur="geelur"}
            else if (richting>=70 && richting<=110) {kleur="geelmr"}
            else if (richting>=110 && richting<=160) {kleur="geelbr"}
            else if (richting>=160 && richting<=200) {kleur="geelmb"}
            else if (richting>=200 && richting<=250) {kleur="geelbl"}
            else if (richting>=250 && richting<=290) {kleur="geelml"}
            else if (richting>=290 && richting<=340) {kleur="geelgl"}
            else {kleur="geelmb"};
            var label = new TLabel();
            label.id = 'label' + i;
            label.anchorLatLng = point;
            label.anchorPoint = 'bottomCenter';
            label.markerOffset = new GSize (4,0);
            label.content = '<div id="plaat' + kleur + '"><div id="tekst"><NOBR>' + kenteken + '</NOBR></div></div>';
            label.percentOpacity = 0;
            map.addTLabel(label);
            map.addOverlay(createMarker(point, i));
            
        }

      }
    }

    //]]>
   </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 705px; height: 595px"></div>

Het script voor de tlabel waarmee ik de markers heb gemaakt, heb ik hier gevonden:
http://gmaps.tommangan.us/tlabel2.html en een beetje verbouwd.

Ik hoop dat je er wat aan hebt.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan