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

Googlemaps problem


bengt11

Rekommendera Poster

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>


 

Länk till kommentar
Dela på andra webbplatser

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.

Länk till kommentar
Dela på andra webbplatser

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

Länk till kommentar
Dela på andra webbplatser

  • 3 veckor senare...

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...