Avatar billede carstenandersen Nybegynder
26. marts 2012 - 07:10 Der er 1 løsning

Google Maps V3 og MarkerClusterer

Hej eksperter

Jeg er gået i luften med visning af Bed and Breakfast annoncer på Google Maps kort, se www.bedandbreakfastoverblik.dk.

Flere "gemmes" bag andre, og når endnu flere kommer på, fungerer det bare ikke. Jeg vil derfor gerne have kortet med "MarkerClusterer", så antal annoncer vises med tal indtil der zoomes, eks. http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/simple_example.html

Har kigget på http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html, men godt nok svært ved at se, hvordan jeg kan kombinere det med mit eget udtræk fra databasen. Håber virkelig, at I kan hjælpe :-)

Nuværende kode er:

<script src="http://maps.google.com/maps/api/js?sensor=false"
                        type="text/javascript"></script>
                        <div id="map" style="width: 100%; height: 570px;">
                             </div>
                        <script type="text/javascript">
                        var locations = [
                        <% Do %>
                        <%
                          SQL4 = "SELECT * FROM bruger Where Id = '" & rs("Udlejerid") & "'"    
                          Set rs4 = conn.execute(SQL4)
                          Navn = rs4("Navn")
                          Adresse = rs4("Adresse")
                          Post = rs4("Post")
                          %>
                        <%
                        Dagsdato = date()
                        %>
                        <% if rs("Udloeb") > Dagsdato then %>
                        ['<font size="2" face="Arial" color="#000000"><% Response.Write Navn %><br><% Response.Write Adresse %>, <% Response.Write Post %></font><p><a href="/hus.asp?Id=<% Response.Write rs("Id") %>"><font size="2" face="Arial" color="#000000"><u>Se infoside</u></font></a>', <% Response.Write rs("Breddegrad") %>, <% Response.Write rs("Laengdegrad") %>],
                        <% end if %>
                        <%
                        rs.MoveNext
                        Loop While Not rs.EOF
                        %>
                        ];
                       
                        var map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 7,
                        center: new google.maps.LatLng(56.401744, 11.151123),
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                        });

                        var infowindow = new google.maps.InfoWindow();

                        var marker, i;

                        for (i = 0; i < locations.length; i++) {
                        marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map
                        });

                        google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                        }
                        })(marker, i));
                        }
                        </script>

som nok skal laves helt ok.

På forhånd tak.
Avatar billede carstenandersen Nybegynder
26. marts 2012 - 14:47 #1
Har fået det løst :-)

Hvis andre kan bruge det til noget, så løste denne kode problemet:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
            <script type="text/javascript" src="/js/fluster.js"></script>
                        <div id="map_canvas" style="width:100%; height:570px"></div>
                        <script type="text/javascript">
                        var map; var fluster;
  function initialize() {
    var latlng = new google.maps.LatLng(56.401744, 11.151123);
    var myOptions = {
      zoom: 7,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    fluster = new Fluster2(map);
   
    <% Do %>
    <%
    SQL4 = "SELECT * FROM bruger Where Id = '" & rs("Udlejerid") & "'"    
    Set rs4 = conn.execute(SQL4)
    Navn = rs4("Navn")
    Adresse = rs4("Adresse")
    Post = rs4("Post")
    %>
    <%
    Dagsdato = date()
    %>   

    var html_box = "<a href=\"foo bar\"><font size=\"2\" face=\"Arial\" color=\"#000000\"><% Response.Write Navn %><br><% Response.Write Adresse %>, <% Response.Write Post %></font></a>";
    var marker = add_marker(<% Response.Write rs("Breddegrad") %>, <% Response.Write rs("Laengdegrad") %>,"<% Response.Write Navn %>",html_box); // pass in as Latitude, then Longitude
    fluster.addMarker(marker);
   
    <%
    rs.MoveNext
    Loop While Not rs.EOF
    %>
   
    fluster.initialize();   
   
  }
 
  function add_marker(lat,lng,title,box_html) {
 
    var infowindow = new google.maps.InfoWindow({
        content: box_html
    });

    var marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat,lng),
          map: map,
          title: title
    });
     
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });     
     
    return marker;
  }
                        </script>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester