title: Googlemaps markers and links
body: <p>Googlemaps map icon problem. As you can see <em>all</em> map icons end up <em>below</em> the first link "Bendt Bil".  Now all I need is to place the small map icons beside the links, <em>one</em> small map <em>beside</em> each link.</p>
  
  <p><a href="http://halmstadtrafik.nl/example_map41.html" rel="nofollow">Example page 41</a></p>
  
  <p><a href="http://i59.tinypic.com/2pt5qgy.jpg" rel="nofollow">wrong and right pictures</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;title&gt;example_map41&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;table border=1&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;a id="top"&gt;&lt;/a&gt;
              &lt;a href="#bila"&gt;&lt;img src="http://i60.tinypic.com/4i1xli.png"&gt;&lt;/a&gt;&lt;a 
  
  href="#bila" style="color:black"&gt;Bilar&lt;/a&gt;
              &lt;br&gt;
              &lt;a href="#hyra"&gt;&lt;img src="http://i60.tinypic.com/4i1xli.png"&gt;&lt;/a&gt;&lt;a 
  
  href="#hyra" style="color:black"&gt;Biluthyrning&lt;/a&gt;
              &lt;br&gt;
          &lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan="2"&gt;
   &lt;!--           &lt;script src="https://online.adservicemedia.dk/showflash.php? 
  
  bid=465284&amp;id=7835" type="text/javascript" encoding="utf-8"&gt;&lt;/script&gt; --&gt;
              &lt;br&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
             
  
  
              &lt;a id="bila"&gt;&lt;b&gt;BILAR&lt;/b&gt;&lt;/a&gt;
              &lt;br&gt;
  
  
  
              &lt;a href="http://www.bendtbil.se" style="color:black" 
  
  target="_blank"&gt;Bendt Bil AB&lt;/a&gt; &lt;div id="side_bar" 
  
  style="position:relative;right:0;top:0;"&gt;&lt;/div&gt;
              &lt;br&gt;
  
  
              &lt;a href="http://www.motorhalland.se" style="color:black" 
  
  target="_blank"&gt;Motor AB Halland&lt;/a&gt; 
              &lt;br&gt;
  
  
              &lt;a href="http://www.bilmansson.com" style="color:black" 
  
  target="_blank"&gt;Bil-M&amp;aring;nsson i Halland AB&lt;/a&gt; 
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.rejmesbil.se" style="color:black" 
  
  target="_blank"&gt;Rejmes Bil&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.klasenbil.se" style="color:black" 
  
  target="_blank"&gt;Klasén Bil&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.hedinbil.se" style="color:black" 
  
  target="_blank"&gt;Hedin Bil&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.lpbilar.se" style="color:black" 
  
  target="_blank"&gt;LP-bilar i Halland AB&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://toyotahalmstad.se" style="color:black" 
  
  target="_blank"&gt;Toyota-Center&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://plus.google.com/102020664711772777647/about?
  
  gl=se&amp;hl=sv" style="color:black" target="_blank"&gt;Motorsalongen&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.sannarpsbil.se" style="color:black" 
  
  target="_blank"&gt;Sannarps Bil AB&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="#top"&gt;&lt;img src="http://i57.tinypic.com/2eftbft.png"&gt;&lt;/a&gt; &lt;a 
  
  href="#top" style="color:black" style="text-decoration: none"&gt;upp&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.flygstadensbil.se" style="color:black" 
  
  target="_blank"&gt;Flygstadens Bil&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://plus.google.com/113011163701256911230/about?
  
  gl=se&amp;hl=sv" style="color:black" target="_blank"&gt;Sportpromotion J Greger AB&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.gpbil.se" style="color:black" target="_blank"&gt;GP 
  
  Bil AB&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.hitta.se/bilialen/halmstad/xRRP-4vUU1" 
  
  style="color:black" target="_blank"&gt;Bilialen&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.halmstadbil.com" style="color:black" 
  
  target="_blank"&gt;Halmstad Bil&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.bilgaraget.se/bilhandlare/gpetterssonbil" 
  
  style="color:black" target="_blank"&gt;Gösta Pettersson Bil AB&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://plus.google.com/107958965564780755815/about?
  
  gl=se&amp;hl=sv" style="color:black" target="_blank"&gt;MH Bil&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.wahlstromsbil.se" style="color:black" 
  
  target="_blank"&gt;Wahlströms Bil AB&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="#top"&gt;&lt;img src="http://i57.tinypic.com/2eftbft.png"&gt;&lt;/a&gt; &lt;a 
  
  href="#top" style="color:black"&gt;upp&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a id="hyra"&gt;&lt;b&gt;BILUTHYRNING&lt;/b&gt;&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.hertz.se/rentacar/location" style="color:black" 
  
  target="_blank"&gt;Hertz&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.mabi.se/#!/offices/halmstad" style="color:black" 
  
  target="_blank"&gt;MABI&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.rent-a-wreck.se/?hyrbil=halmstad" 
  
  style="color:black" target="_blank"&gt;Rent-A-Wreck&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://se.sixt.com/biluthyrning/sverige/halmstad" 
  
  style="color:black" target="_blank"&gt;Sixt&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.europcar.se/station-finder?countryCode=SE" 
  
  style="color:black" target="_blank"&gt;Europcar&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.avis.se/hyrbil/Europa/Sverige/Halmstad" 
  
  style="color:black" target="_blank"&gt;Avis&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a 
  
  href="http://www.budget.se/budgetonline/se/budget.nsf/c/kontor,biluthyrning-
  
  halmstad" style="color:black" target="_blank"&gt;Budget&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.allwayshyrfordon.se" style="color:black" 
  
  target="_blank"&gt;All Ways Hyrfordon AB&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.okq8.se/hyrbil" style="color:black" 
  
  target="_blank"&gt;OKQ8&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://rejmesbil.se/sida/rejmes-biluthyrning" 
  
  style="color:black" target="_blank"&gt;Rejmes Bil&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.statoil.se/sv_SE/pg1334072572280/st1/Sok-
  
  station.html?stationid=26233&amp;countryid=se" style="color:black" 
  
  target="_blank"&gt;Statoil&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="http://www.halmstadsbilpool.se" style="color:black" 
  
  target="_blank"&gt;Halmstads Bilpool&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              &lt;a href="#top"&gt;&lt;img src="http://i57.tinypic.com/2eftbft.png"&gt;&lt;/a&gt; &lt;a 
  
  href="#top" style="color:black"&gt;upp&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
          &lt;/td&gt;
  
          &lt;td valign="top"&gt;
  
              &lt;div id="map" 
  
  style="position:relative;width:500px;height:400px;top:0;left:0"&gt;&lt;/div&gt;
  
              &lt;script src="https://maps.googleapis.com/maps/api/js?
  
  v=3.exp&amp;sensor=false"&gt;&lt;/script&gt;
  
              &lt;script type="text/javascript"&gt;
                  //&lt;![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 += '&lt;a href="javascript:myclick(' +
  
                          (gmarkers.length - 1) + ')"&gt;' + name + '&lt;\/a&gt;&lt;br&gt;';
                      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,'&lt;img src="maps.png"&gt;','&lt;a 
  
  href="http://www.bendtbil.se" style="color:black" target="_blank"&gt;Bendt Bil 
  
  AB&lt;/a&gt;');
                          marker.setMap(map);
  
  
                          var point = new google.maps.LatLng(56.663724, 12.860540);
                          var marker = createMarker(point,'&lt;img src="maps.png"&gt;','&lt;a 
  
  href="http://www.motorhalland.se" style="color:black" target="_blank"&gt;Motor AB 
  
  Halland&lt;/a&gt;');
                          marker.setMap(map);
  
   
                          var point = new google.maps.LatLng(56.680101, 12.810132);
                          var marker = createMarker(point,'&lt;img src="maps.png"&gt;','&lt;a 
  
  href="http://www.bilmansson.com" style="color:black" target="_blank"&gt;Bil-
  
  M&amp;aring;nsson i Halland AB&lt;/a&gt;');
                          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);
              &lt;/script&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>