Hej,
nu har jag återigen fastnat i google maps.
Försöker lägga till egna markörer för olika platser på kartan (just nu har jag bara en png-fil för att se att dom visas öht, som det är nu kommer det inte upp någon markör alls.), hittade ett inlägg om detta på http://stackoverflow.com/questions/1...custom-markers och har försökt göra som det står där men lyckas inte. Tänkte höra här om någon gjort något liknande och kan se vad det är jag gör för fel.
HTML & Javascript
[Kod]
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/mini-map.css">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(59.37066659999999, 17.975824800000055),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var locations = [
['Sundbybergs BGK', 59.37066659999999, 17.975824800000055, 'http://www.bangolfkartan.se/gfx/markers/golf-icon.png'],
['Solna BGK', 59.370096770101284, 17.99651657696836, 'http://www.bangolfkartan.se/gfx/markers/golf-icon.png'],
['Tyresö BGK', 59.244784086003406, 18.237312592837498, 'http://www.bangolfkartan.se/gfx/markers/golf-icon.png'],
['Akalla-Kanaan 98 BGK', 59.4114427021035, 17.912663276196326, 'http://www.bangolfkartan.se/gfx/markers/golf-icon.png'],
['Norrtälje BGK', 59.754732583736114, 18.717763342852777, 'http://www.bangolfkartan.se/gfx/markers/golf-icon.png']
];
var marker, i;
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
var map = new google.maps.Map(map_canvas, map_options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
[/Kod]
CSS
[Kod]
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#map_canvas {
width: 100%;
height: 100%;
}
[/Kod]
Tack på förhand
/Kolsyra
nu har jag återigen fastnat i google maps.
Försöker lägga till egna markörer för olika platser på kartan (just nu har jag bara en png-fil för att se att dom visas öht, som det är nu kommer det inte upp någon markör alls.), hittade ett inlägg om detta på http://stackoverflow.com/questions/1...custom-markers och har försökt göra som det står där men lyckas inte. Tänkte höra här om någon gjort något liknande och kan se vad det är jag gör för fel.
HTML & Javascript
[Kod]
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/mini-map.css">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(59.37066659999999, 17.975824800000055),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var locations = [
['Sundbybergs BGK', 59.37066659999999, 17.975824800000055, 'http://www.bangolfkartan.se/gfx/markers/golf-icon.png'],
['Solna BGK', 59.370096770101284, 17.99651657696836, 'http://www.bangolfkartan.se/gfx/markers/golf-icon.png'],
['Tyresö BGK', 59.244784086003406, 18.237312592837498, 'http://www.bangolfkartan.se/gfx/markers/golf-icon.png'],
['Akalla-Kanaan 98 BGK', 59.4114427021035, 17.912663276196326, 'http://www.bangolfkartan.se/gfx/markers/golf-icon.png'],
['Norrtälje BGK', 59.754732583736114, 18.717763342852777, 'http://www.bangolfkartan.se/gfx/markers/golf-icon.png']
];
var marker, i;
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
var map = new google.maps.Map(map_canvas, map_options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
[/Kod]
CSS
[Kod]
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#map_canvas {
width: 100%;
height: 100%;
}
[/Kod]
Tack på förhand
/Kolsyra
Comment