Gå til innhold

Et lite spørsmål angående javascript og Google maps.

Atmosphere

Anbefalte innlegg

Atmosphere

Atmosphere

Skrevet
Skrevet (endret)

Hei

 

Jeg driver å lager et script for å lese fra en XML-fil, som igjen generesres i et php-script fra en mysql-database, og over i Google maps. Det jeg sliter litt med er variabelen 'html'. Jeg får nemlig samme popupvindu på alle punktene, uachengig av hvilket jeg velger. Noen tips. Kunne trengt noen friske øyne til åse over det. Javascriptkunnskapene mine er ganske rustne. På forhånd takk. :)

 

<html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]">
 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <title>Test av Google Maps tilknyttet en mySQL-database</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
   <script src="[url="http://maps.google.com/maps/api/js?sensor=false"]http://maps.google.com/maps/api/js?sensor=false[/url]" type="text/javascript"></script>
   <script src="infobox_packed.js" type="text/javascript"></script>
   <script type="text/javascript">
       //<![CDATA[
       /*Definerer ikoner for forskjellige typer m�ter. Mulig � definere flere*/
       var customIcons = {
           infomeeting: {
               icon: 'img/inf.png',
               shadow: 'img/inf_shadow.png'
           },
           othermeeting: {
               icon: 'img/inf.png',
               shadow: 'img/inf_shadow.png'
           }
       };
       var MY_MAPTYPE_ID = 'Skagen';

       function initialize() {
           /*Fargepalett for kartet*/

           var stylez = [
            {
                featureType: "all",
                elementType: "all",
                stylers: [
               { saturation: -30 },
               { hue: "#0066CC" },
               { lightness: -30 }
             ]
            },
            {
                featureType: "water",
                elementType: "all",
                stylers: [
             { hue: "#FFFFFF" },
             { lightness: 100 }
           ]
           }]

           /*Variabler for kartets zoomniv�, senter, verktøy etc.*/
           var mapOptions = {
               zoom: 5,
               center: new google.maps.LatLng(63.431005, 10.39208),
               mapTypeControlOptions: {
                   mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
               },
               mapTypeId: MY_MAPTYPE_ID
           };

           /*Selve kartet*/
           var map = new google.maps.Map(document.getElementById("map"), mapOptions);

           /*Navn p� stilisert kart (vises som kontroll)*/
           var styledMapOptions = {
               name: "Skagen"
           };

           var coloredMap = new google.maps.StyledMapType(stylez, styledMapOptions);

           map.mapTypes.set(MY_MAPTYPE_ID, coloredMap);

           var ib = new InfoBox(myOptions);

           /*Looper gjennom den genererte xml-filen og definerer html for popupvinduet basert på tagene*/

           downloadUrl("genxml.php", function(data) {
               var xml = data.responseXML;
               var markers = xml.documentElement.getElementsByTagName("marker");
               for (var i = 0; i < markers.length; i++) {
                   var name = markers[i].getAttribute("name");
                   var address = markers[i].getAttribute("address");
                   var type = markers[i].getAttribute("type");
                   var date = markers[i].getAttribute("date");
                   var time = markers[i].getAttribute("time");
                   var agenda = markers[i].getAttribute("agenda");
                   var link = markers[i].getAttribute("link");
                   var linkText = markers[i].getAttribute("linkText");
                   var point = new google.maps.LatLng(
                   parseFloat(markers[i].getAttribute("lat")),
                   parseFloat(markers[i].getAttribute("lng")));
                   /*formatering for popupboks*/
                   boxText.innerHTML = "<div id='box'><h2 class='title'>" + name + "</h2><p class='datetime'><strong>Dato: </strong>" + date + ", " + time + "</p><p class='address'><strong>Adresse: </strong>" + address + "</p><p class='agenda'><strong>Agenda:</strong>" + agenda + "</p><a href='" + link + "' class='meetinglink' target='blank'>" + linkText + "</a></div>";

                   var icon = customIcons[type] || {};
                   var marker = new google.maps.Marker({
                       map: map,
                       position: point,
                       icon: icon.icon,
                       shadow: icon.shadow
                   });
                   bindInfoWindow(marker, map, ib);
               }
           });
       };
       /*Overstyring av default infobokser. Bruker bibliotek infoBox_packed */
       var boxText = document.createElement("div");
       boxText.style.cssText = "border: 1px solid black; background: white; margin-top: 8px; padding: 5px;";

           var myOptions = {
               content: boxText
  , disableAutoPan: false
  , maxWidth: 0
  , pixelOffset: new google.maps.Size(-140, 0)
  , boxStyle: {
      opacity: 0.85
   , width: "280px"
  }
  , infoBoxClearance: new google.maps.Size(1, 1)
           , closeBoxURL: "[url="http://www.google.com/intl/en_us/mapfiles/close.gif"]http://www.google.com/intl/en_us/mapfiles/close.gif[/url]"
  , isHidden: false
  , closeBoxMargin: "10px 2px 2px 2px"
  , pane: "floatPane"
  , enableEvenPropagation: false
           };

       /*Definerer event for når man trykker på markørene*/
       var ib = new InfoBox(myOptions);

       function bindInfoWindow(marker, map, ib, myOptions, html) {
           google.maps.event.addListener(marker, 'click', function() {
               ib.open(map, marker);
           });
       }
       /*Funksjoner for XML*/

       function downloadUrl(url, callback) {
           var request = window.ActiveXObject ?
         new ActiveXObject('Microsoft.XMLHTTP') :
         new XMLHttpRequest;

           request.onreadystatechange = function() {
               if (request.readyState == 4) {
                   request.onreadystatechange = doNothing;
                   callback(request, request.status);
               }
           };
           request.open('GET', url, true);
           request.send(null);
       }
       function doNothing() { }
       //]]>
 </script>
 </head>
 <body onload="initialize()">
   <div id="map" style="width: 500px; height: 700px"></div>
 </body>
</html>

Endret av Jude Quinn
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...