Dynamische markers Google maps

[WebTwister]

In een webapplicatie wordt er met behulp van googlemaps de locatie aangegevens van een aantal bedrijven in een bepaalde omgeving. Nu wil ik dat de standaard markers worden vervangen door logo's van desbetreffende bedrijven, indien aanwezig.

Op zich ben ik al heel ver want ik kan ervoor zorgen dat er een custom marker wordt getoond ipv de standaard. maar nu het dynamisch maken..

ik heb aan de functie 'addMarker' een variable toegevoegd genaamd 'logo'. als ik deze alert heeft hij de goede waarde, maar gebeurt er niets.

als ik op de plek van logo in deze regel:

JavaScript:

var marker = new GMarker(new GLatLng(latitude, longitude), logo);

de waarde 'hard coded' neerzet die normaal in 'logo' zal zitten..dus defaultMarker of RonJonLogo dan krijg ik wel netjes de markers te zien die ik wil.

hieronder de volledige code.. en ik hoop dat iemand me kan helpen.

JavaScript:

var centerLatitude      = 52.105840;
var centerLongitude     =  4.327251;
var startZoom           = 16;
var map;
                
var defaultMarker = new GIcon(); 
defaultMarker.image = '../images/layout/mapmarker.png'; 
defaultMarker.iconSize = new GSize(19, 34); 
defaultMarker.iconAnchor = new GPoint(10, 17); 
defaultMarker.infoWindowAnchor = new GPoint(10, 17); 

var RonJonLogo = new GIcon(); 
RonJonLogo.image = '../images/layout/ronJon.png'; 
RonJonLogo.iconSize = new GSize(40, 40); 
RonJonLogo.iconAnchor = new GPoint(20, 20); 
RonJonLogo.infoWindowAnchor = new GPoint(20, 20); 

var markers = [{    
    'latitude': 52.10630, 
    'longitude': 4.327261,
    'name': '8',
    'logo': 'RonJonLogo',
    'description': 'omschrijving ' },
{   'latitude': 52.104851, 
    'longitude': 4.325115,
    'name': '10',
    'logo': 'defaultMarker',
    'description': 'omschrijving ' },
];

function addMarker(latitude , longitude, description, logo) {
    
    var marker = new GMarker(new GLatLng(latitude, longitude), logo);
    // alert(logo);
        GEvent.addListener(marker, 'click',
        function() {
            marker.openInfoWindowHtml(description);
        }
    );
    map.addOverlay(marker);
}               
                
function init() {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        var location = new GLatLng(centerLatitude, centerLongitude);
        map.addControl(new GSmallMapControl());
        map.setCenter(location, startZoom);
        
        for(id in markers) {
            addMarker(markers[id].latitude , markers[id].longitude, markers[id].description, markers[id].logo);
        }                       
    }
}               

window.onload = init;
window.onunload = GUnload;

[ Voor 0% gewijzigd door een moderator op 23-07-2007 14:51 . Reden: highlighting maakt het wat leesbaarder :) ]

[Blue-eagle]

Je voegt 'defaultMarker' als string toe, niet als object?

[André]

Kun je het niet ongeveer zo doen:

JavaScript:

function dynamischlogo()
{
  var dlogo = new GIcon(); 
  dlogo.image = '../images/layout/bla.png'; 
  dlogo.iconSize = new GSize(40, 40); 
  dlogo.iconAnchor = new GPoint(20, 20); 
  dlogo.infoWindowAnchor = new GPoint(20, 20); 

  return dlogo;
}

var marker = new GMarker(new GLatLng(latitude, longitude), dynamischlogo());

[WebTwister]

Blue-eagle schreef op maandag 23 juli 2007 @ 15:08:
Je voegt 'defaultMarker' als string toe, niet als object?

oke.. nou ik ben niet echt een specialist in javascript.. maar zoiets dacht ik wel al.
Hoe zou ik zoiets op kunnen lossen?

[Blue-eagle]

Andre's voorbeeld zou ook kunnen werken, maar anders:

code:

'logo': defaultMarker,

misschien?

[WebTwister]

André schreef op maandag 23 juli 2007 @ 15:08:
Kun je het niet ongeveer zo doen:

JavaScript:

function dynamischlogo()
{
  var dlogo = new GIcon(); 
  dlogo.image = '../images/layout/bla.png'; 
  dlogo.iconSize = new GSize(40, 40); 
  dlogo.iconAnchor = new GPoint(20, 20); 
  dlogo.infoWindowAnchor = new GPoint(20, 20); 

  return dlogo;
}

var marker = new GMarker(new GLatLng(latitude, longitude), dynamischlogo());

Ik zie niet precies hoe dit werkt, maar het probleem dat ik hierbij zie is dat de paden naar de icoontjes ook in wijzigen... komt in het voorbeeld niet goed naar voren

wat ik in het vorige bericht al zei ik ben niet echt handig met javascript.. dus als je me nog een handje kan helpen zou ik dat heel erg op prijs stellen

[WebTwister]

ik heb het opgelost!

de functie heb ik gewoon wat gewijzigd.. en laat in de functie zelf de logo's definieren

JavaScript:

function addMarker(latitude , longitude, description, iconImage) {

    if(iconImage!='') {
        var icon = new GIcon();
        icon.image = iconImage;
        icon.iconSize = new GSize(40, 40);
        icon.iconAnchor = new GPoint(20, 20);
        icon.infoWindowAnchor = new GPoint(20, 20);
        var marker = new GMarker(new GLatLng(latitude, longitude), icon);
    } else {
        var marker = new GMarker(new GLatLng(latitude, longitude));
    }

    GEvent.addListener(marker, 'click', function() {
            marker.openInfoWindowHtml(description);
        }
    );
    map.addOverlay(marker);
}