Just nu i M3-nätverket
Gå till innehåll
bengt11

Googlemaps problem

Rekommendera Poster

bengt11

Positioneringsproblem. Alla kart-ikonerna har hamnat under första länken "Bendt Bil AB".
 

1zn74lc.jpg

Men jag vill ha kart-ikonerna (som pekar mot kartan) jämte länkarna, alltså en kart-ikon jämte varje länk. Alltså så här:

5ajfgw.jpg

 

http://halmstadtrafik.nl/example_map41.html"]http://halmstadtrafik.nl/example_map41.html

Koden:
 

<html>

<head>
<title>example_map41</title>
</head>

<body>
<table border=1>
    <tr>
        <td>
            <a id="top"></a>
            <a href="#bila"><img src="http://i60.tinypic.com/4i1xli.png"></a><a

href="#bila" style="color:black">Bilar</a>
            <br>
            <a href="#hyra"><img src="http://i60.tinypic.com/4i1xli.png"></a><a

href="#hyra" style="color:black">Biluthyrning</a>
            <br>
        </td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2">
 <!--           <script src="https://online.adservicemedia.dk/showflash.php?

bid=465284&id=7835" type="text/javascript" encoding="utf-8"></script> -->
            <br>
        </td>
    </tr>
    <tr>
        <td>
           


            <a id="bila"><b>BILAR</b></a>
            <br>
            <br>


            <a href="http://www.bendtbil.se" style="color:black"

target="_blank">Bendt Bil AB</a> <div id="side_bar"

style="position:relative;right:0;top:0;"></div>
            <br>


            <a href="http://www.motorhalland.se" style="color:black"

target="_blank">Motor AB Halland</a>
            <br>
            <br>

            <a href="http://www.bilmansson.com" style="color:black"

target="_blank">Bil-Månsson i Halland AB</a>
            <br>
            <br>

            <a href="http://www.rejmesbil.se" style="color:black"

target="_blank">Rejmes Bil</a>
            <br>
            <br>

            <a href="http://www.klasenbil.se" style="color:black"

target="_blank">Klasén Bil</a>
            <br>
            <br>

            <a href="http://www.hedinbil.se" style="color:black"

target="_blank">Hedin Bil</a>
            <br>
            <br>

            <a href="http://www.lpbilar.se" style="color:black"

target="_blank">LP-bilar i Halland AB</a>
            <br>
            <br>

            <a href="http://toyotahalmstad.se" style="color:black"

target="_blank">Toyota-Center</a>
            <br>
            <br>

            <a href="http://plus.google.com/102020664711772777647/about?

gl=se&hl=sv" style="color:black" target="_blank">Motorsalongen</a>
            <br>
            <br>

            <a href="http://www.sannarpsbil.se" style="color:black"

target="_blank">Sannarps Bil AB</a>
            <br>
            <br>

            <a href="#top"><img src="http://i57.tinypic.com/2eftbft.png"></a> <a

href="#top" style="color:black" style="text-decoration: none">upp</a>
            <br>
            <br>

            <a href="http://www.flygstadensbil.se" style="color:black"

target="_blank">Flygstadens Bil</a>
            <br>
            <br>

            <a href="http://plus.google.com/113011163701256911230/about?

gl=se&hl=sv" style="color:black" target="_blank">Sportpromotion J Greger AB</a>
            <br>
            <br>

            <a href="http://www.gpbil.se" style="color:black" target="_blank">GP

Bil AB</a>
            <br>
            <br>

            <a href="http://www.hitta.se/bilialen/halmstad/xRRP-4vUU1"

style="color:black" target="_blank">Bilialen</a>
            <br>
            <br>

            <a href="http://www.halmstadbil.com" style="color:black"

target="_blank">Halmstad Bil</a>
            <br>
            <br>

            <a href="http://www.bilgaraget.se/bilhandlare/gpetterssonbil"

style="color:black" target="_blank">Gösta Pettersson Bil AB</a>
            <br>
            <br>

            <a href="http://plus.google.com/107958965564780755815/about?

gl=se&hl=sv" style="color:black" target="_blank">MH Bil</a>
            <br>
            <br>

            <a href="http://www.wahlstromsbil.se" style="color:black"

target="_blank">Wahlströms Bil AB</a>
            <br>
            <br>

            <a href="#top"><img src="http://i57.tinypic.com/2eftbft.png"></a> <a

href="#top" style="color:black">upp</a>
            <br>
            <br>

            <a id="hyra"><b>BILUTHYRNING</b></a>
            <br>
            <br>

            <a href="http://www.hertz.se/rentacar/location" style="color:black"

target="_blank">Hertz</a>
            <br>
            <br>

            <a href="http://www.mabi.se/#!/offices/halmstad" style="color:black"

target="_blank">MABI</a>
            <br>
            <br>

            <a href="http://www.rent-a-wreck.se/?hyrbil=halmstad"

style="color:black" target="_blank">Rent-A-Wreck</a>
            <br>
            <br>

            <a href="http://se.sixt.com/biluthyrning/sverige/halmstad"

style="color:black" target="_blank">Sixt</a>
            <br>
            <br>

            <a href="http://www.europcar.se/station-finder?countryCode=SE"

style="color:black" target="_blank">Europcar</a>
            <br>
            <br>

            <a href="http://www.avis.se/hyrbil/Europa/Sverige/Halmstad"

style="color:black" target="_blank">Avis</a>
            <br>
            <br>

            <a

href="http://www.budget.se/budgetonline/se/budget.nsf/c/kontor,biluthyrning-

halmstad" style="color:black" target="_blank">Budget</a>
            <br>
            <br>

            <a href="http://www.allwayshyrfordon.se" style="color:black"

target="_blank">All Ways Hyrfordon AB</a>
            <br>
            <br>

            <a href="http://www.okq8.se/hyrbil" style="color:black"

target="_blank">OKQ8</a>
            <br>
            <br>

            <a href="http://rejmesbil.se/sida/rejmes-biluthyrning"

style="color:black" target="_blank">Rejmes Bil</a>
            <br>
            <br>

            <a href="http://www.statoil.se/sv_SE/pg1334072572280/st1/Sok-

station.html?stationid=26233&countryid=se" style="color:black"

target="_blank">Statoil</a>
            <br>
            <br>

            <a href="http://www.halmstadsbilpool.se" style="color:black"

target="_blank">Halmstads Bilpool</a>
            <br>
            <br>

            <a href="#top"><img src="http://i57.tinypic.com/2eftbft.png"></a> <a

href="#top" style="color:black">upp</a>
            <br>
            <br>
        </td>

        <td valign="top">

            <div id="map"

style="position:relative;width:500px;height:400px;top:0;left:0"></div>

            <script src="https://maps.googleapis.com/maps/api/js?

v=3&sensor=false"></script>

            <script type="text/javascript">
                //<![CDATA[

                // this variable will collect the html which will be placed in the

side_bar
                var side_bar_html = "";

                // arrays to hold copies of the markers and html by the side_bar
                // because the function closure trick doesnt work there
                var gmarkers = [];

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

                // A function to create the marker and set up the event window

               function createMarker(point, name, html) {
                    var marker = new google.maps.Marker({
                        position: point,
                       icon:'http://halmstadtrafik.nl/Pin-icon.png'
                       });
                    google.maps.event.addListener(marker, "click", function() {
                            infoWnd.setContent(html);
                            infoWnd.open(marker.getMap(), marker);
                        });
                    
               // save the info we need to use later for the side_bar
                    gmarkers.push(marker);
                   
               // add a line to the side_bar html
                    side_bar_html += '<a href="javascript:myclick(' +

                        (gmarkers.length - 1) + ')">' + name + '<\/a><br>';
                    return marker;
                }


                // This function picks up the click and opens the corresponding

info window

                function myclick(i) {
                    google.maps.event.trigger(gmarkers[i], "click");
                }


                // create the map


                function initialize() {
                        var mapOptions = {
                            zoom: 12,
                            streetViewControl: false,
                panControl: false,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.LEFT_CENTER
    },
                            center: new google.maps.LatLng(56.67437, 12.85779),
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        }
                        var map = new google.maps.Map(document.getElementById

('map'), mapOptions);

var styles = [
  {
    stylers: [
      { hue: "#00ffe6" },
      { saturation: -10 }
    ]
  },{
    featureType: "road",
    elementType: "geometry.stroke",
    stylers: [
      { lightness: 100 },
      { visibility: "simplified" }
    ]
  }
];

map.setOptions({styles: styles});

                        // add the points  
 
                        var point = new google.maps.LatLng(56.680652, 12.886448);
var marker = createMarker(point,'<img

src="http://halmstadtrafik.nl/maps.png">','<a href="http://www.bendtbil.se"

style="color:black" target="_blank">Bendt Bil AB</a>');
                        marker.setMap(map);


                        var point = new google.maps.LatLng(56.663724, 12.860540);
                        var marker = createMarker(point,'<img

src="http://halmstadtrafik.nl/maps.png">','<a href="http://www.motorhalland.se"

style="color:black" target="_blank">Motor AB Halland</a>');
                        marker.setMap(map);

 
                        var point = new google.maps.LatLng(56.680101, 12.810132);
                        var marker = createMarker(point,'<img

src="http://halmstadtrafik.nl/maps.png">','<a href="http://www.bilmansson.com"

style="color:black" target="_blank">Bil-Månsson i Halland AB</a>');
                        marker.setMap(map);


                            // put the assembled side_bar_html contents into the

side_bar div
                        document.getElementById("side_bar").innerHTML =

side_bar_html;

                }

                google.maps.event.addDomListener(window, 'load', initialize);
            </script>
        </td>
    </tr>
</table>
</body>
</html>


 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Jonas__B

Koden gör rätt - lägger till alla kartikoner till side_bar

 

Du behöver ha en lista som knyter samma objekten i vänsterkolumnen till kartikonerna;

Typ ett json-objekt som innehåller "företagen" och dess positioner om de ska visas på kartan.

 

Exempelvis

var companies= [
{
name:"Bilia",
url:"http://www.bilia.se",
position: {long:56.680101, lat:12.810132}
},
{ 
name:"Taxi",
url:"http://www.taxi.se"
} //finns ingen position på denna.
]

Man itererar listan med javascript och skriver ut både listan till väster och kartikoner, om position finns.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
bengt11

Tack! Försökte med lite olika variationer, men gick ej. Förstår vad du menar, men är nybörjare på det här...

 

Vill alltså ha en länk för varje firma - klickar man på den så hamnar man i ett nytt fönster/en ny flik.

Dessutom då en kartsymbol (inrutade nedan) - klickar man på den så visas en nål på kartan med namn.

 

Kanske man kan lösa det med en variabel till i createMarker så att man genom den får in länken ("Bendt Bil AB") i side_bar och slopa själva länken som nu ligger inom <td>-taggarna?

function createMarker(????, point, name, html) {

68eo7o.jpg

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
bengt11

Problemet löst via Elamce.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...