Googlemaps标记和链接

时间：2015-04-30 09:31:39

标签： google-maps-api-3 marker

Googlemaps地图图标问题。如您所见，所有地图图标最终在下面的第一个链接“Bendt Bil”。现在我需要的是将小地图图标放在链接旁边，一个小地图旁边每个链接。

Example page 41

wrong and right pictures 

<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>



            <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>


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

target="_blank">Bil-M&aring;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.exp&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:'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,
                            center: new google.maps.LatLng(56.67437, 12.85779),
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        }
                        var map = new google.maps.Map(document.getElementById

('map'), mapOptions);


                        // add the points  
  
                        var point = new google.maps.LatLng(56.680652, 12.886448);
var marker = createMarker(point,'<img src="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="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="maps.png">','<a 

href="http://www.bilmansson.com" style="color:black" target="_blank">Bil-

M&aring;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>

1 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
<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>



        <a href="http://www.bendtbil.se" style="color:black" target="_blank">Bendt Bil AB</a> 
        <a href="javascript:;" id="googlemapLinkBendtBilAB">
          <img src="maps.png" height="20" width="20">
        </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> 
        <a href="javascript:;" id="googlemapLinkMotorABHalland">
          <img src="maps.png" height="20" width="20">
        </a>
        <br>


        <a href="http://www.bilmansson.com" style="color:black" target="_blank">Bil-M&aring;nsson i Halland AB</a> 
        <a href="javascript:;" id="googlemapLinkBil-MnssoniHallandAB">
          <img src="maps.png" height="20" width="20">
        </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.exp&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, imageId, html) {
            var marker = new google.maps.Marker({
              position: point,
              icon: '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 href to each link
            document.getElementById(imageId).href = 'javascript:myclick(' + (gmarkers.length - 1) + ')';
            /*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,
              center: new google.maps.LatLng(56.67437, 12.85779),
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById

              ('map'), mapOptions);


            // add the points  

            var point = new google.maps.LatLng(56.680652, 12.886448);
            var marker = createMarker(point, 'googlemapLinkBendtBilAB', '<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, 'googlemapLinkMotorABHalland', '<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, 'googlemapLinkBil-MnssoniHallandAB', '<a href="http://www.bilmansson.com" style="color:black" target="_blank">Bil-M&aring;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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题