Menu
Positioning problem (icons). As you can see _all_below
[URL=”http://i58.tinypic.com/122p374.jpg”]http://i58.tinypic.com/122p374.jpg
Now all I need is to place the small map icons beside the links, _one_beside
[URL=”http://i62.tinypic.com/68eo7o.jpg”]http://i62.tinypic.com/68eo7o.jpg
[code=html]
<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=”#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, html, 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, ‘<a
href=”http://www.bendtbil.se” style=”color:black” target=”_blank”>Bendt Bil
AB</a>’, ‘<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å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>