Beste leden,
Ik wilde vandaag google maps gaan inmplementeren in een website. Dit had ik voorheen al wel eens vaker gedaan maar dan met de V2 api van google, nu de V3 er is kreeg ik de melding dat ik die moest gaan gebruiken.
Nu stuit ik op het volgende probleem:
Ik heb meerdere markers (die rode bolletjes) met elk een eigen content (naam, plaats). Nu wil ik dat wanneer je op zo'n bolletje drukt, die informatie krijgt van dat bolletje.
Momenteel heb ik deze code gevonden:
function initialize()
{
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
setMarkers(map, beaches);
}
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map, locations)
{
var image = new google.maps.MarkerImage('startpuntMini.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(24, 23),
// 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, 23));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.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(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var name = '';
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: beach[0],
});
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; color: #000; margin-top: 8px; background: white; padding: 5px;";
boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";
var myOptions =
{
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
width: "280px"
,color: "#000;"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
ib.open(map, marker);
}
}
Toon Meer
Maar dit is niet zoals het hoort, google had hier eerst:
myMarkers[3].bindInfoWindowHtml('vats');
Mijn markers komen straks uit een database, en nu zoek ik dus weer dat mooie tekst ballonnetje van google.
Hopelijk kan iemand met helpen.
Groet,
Luc
