petertje34
Nieuwe gebruiker
- Lid geworden
- 3 dec 2011
- Berichten
- 2
Ik heb een script geschreven om meerder markers op een Google Maps plaatje te laten zien. Nu wil ik bij elke marker nog een infowindow laten zien met eigen tekst. Dit lukt me niet. Kunnen jullie de code aanvullen om bij elke marker een eigen popup window te tonen met unieke tekst? Dank!
[JS]
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 500px;"></div>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(23.241346, 18.281250),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
setMarkers(map, locations);
}
var locations = [
['AU', -37.850565, 144.980289 , 4],
['AS', 48.1670845, 16.3465254, 5],
['BE', 50.8826906, 4.4570261, 3],
['BR', -23.5004937, -46.8482093, 2],
['CZ', 50.0878114, 14.4204598, 1],
['DM', 55.6710507, 12.4401635, 6],
['FI', 60.2101064, 24.8251788, 7],
['FR', 48.8744779, 2.1668675, 8],
['GE', 51.19423, 6.70568, 9],
['GR', 38.0433281, 23.797971, 10]
];
function setMarkers(map, locations) {
// Add markers to the map
var image = new google.maps.MarkerImage('punaise.png',
// This marker is 30 pixels wide by 30 pixels tall.
new google.maps.Size(30, 30),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('schaduw.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(30, 30),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var entity = locations;
var myLatLng = new google.maps.LatLng(entity[1], entity[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: entity[0],
zIndex: entity[3],
});
}
}
</script>
[/JS]
[JS]
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 500px;"></div>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(23.241346, 18.281250),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
setMarkers(map, locations);
}
var locations = [
['AU', -37.850565, 144.980289 , 4],
['AS', 48.1670845, 16.3465254, 5],
['BE', 50.8826906, 4.4570261, 3],
['BR', -23.5004937, -46.8482093, 2],
['CZ', 50.0878114, 14.4204598, 1],
['DM', 55.6710507, 12.4401635, 6],
['FI', 60.2101064, 24.8251788, 7],
['FR', 48.8744779, 2.1668675, 8],
['GE', 51.19423, 6.70568, 9],
['GR', 38.0433281, 23.797971, 10]
];
function setMarkers(map, locations) {
// Add markers to the map
var image = new google.maps.MarkerImage('punaise.png',
// This marker is 30 pixels wide by 30 pixels tall.
new google.maps.Size(30, 30),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('schaduw.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(30, 30),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var entity = locations;
var myLatLng = new google.maps.LatLng(entity[1], entity[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: entity[0],
zIndex: entity[3],
});
}
}
</script>
[/JS]
