adding markers to my google maps...

[George Thompson]

i have a google maps api on my website, where when you click it grabs the lat/long coordinates and works well for me, but i would for a visual reference like to see a marker added to the place where i clicked do i know exactly where it is.. and i\'ve tried many different configurations.. any ideas?

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var geocoder;
    var map;
 
function initialize(){
    var latlng = new google.maps.LatLng(36.879,-96.537);
    var myOptions = {
        zoom: 3,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        scaleControl: true,
        navigationControl: true,
        navigationControlOptions:{
            style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeControl: true,
        mapTypeControlOptions:{
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }
    };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        google.maps.event.addListener(map, 'mousedown', function(event){
            findAddress(event.latLng);
        });
    }
    function findAddress(loc){
        geocoder = new google.maps.Geocoder(); 
        if (geocoder){
            geocoder.geocode({'latLng': loc}, function(results, status){
                if (status == google.maps.GeocoderStatus.OK){
                    if (results[0]){
                        address = results[0].formatted_address;
                        document.getElementById('lat').value = loc.lat();
                        document.getElementById('long').value = loc.lng();
                    }
                }else{
                    alert("Geocoder failed due to: " + status);
                }
            });
        }
    }
    var markers = new Array();
    function addMarkers(){
        var lats = document.getElementById('lats').value;
        var lngs = document.getElementById('lngs').value;
        var names = document.getElementById('names').value;
        var descrs = document.getElementById('descrs').value;
        var memid = document.getElementById('memid').value;
 
        var las = lats.split(";;")
        var lgs = lngs.split(";;")
        var dss = descrs.split(";;")
        var usrn = memid.split(";;")
 
        for (i=0; i<las.length; i++){
            if (las[i] != ""){
                var loc = new google.maps.LatLng(las[i],lgs[i]);
                var marker = new google.maps.Marker({
                    position: loc, 
                    map: window.map,
                    title: nms[i]
                });
                markers[i] = marker;
                var contentString = [
                  '<div id="tabs">',
                  '<ul>',
                    '<li><a href="#tab-2"><span>description</span></a></li>',
                    '<li><a href="#tab-3"><span>location</span></a></li>',
                  '</ul>',
                  '<div id="tab-1">',
                    '<p><h1>'+nms[i]+'</h1></p>',
                  '</div>',
                  '<div id="tab-2">',
                   '<p><h1>'+nms[i]+'</h1></p>',
                   '<p>Added by: '+usrn[i]+' from '+usrl[i]+'</p>'+
                   '<p>'+dss[i]+'</p>'+
                  '</div>',
                  '<div id="tab-3">',
                    '<p><h1>'+nms[i]+'</h1></p>',
                  '</div>',
                  '</div>'
                ].join('');
                var infowindow = new google.maps.InfoWindow;
                bindInfoWindow(marker, window.map, infowindow, contentString);
            }
        }
    }
    function bindInfoWindow(marker, map, infoWindow, contentString){
        google.maps.event.addListener(marker, 'mouseover', function() {
            map.setCenter(marker.getPosition());
            infoWindow.setContent(contentString);
            infoWindow.open(map, marker);
            $("#tabs").tabs();
         });
    }
    function highlightMarker(index){
        for (i=0; i<markers.length; i++){
            if (i == index){
                markers[i].setZIndex(10);
                markers[i].setIcon('http://www.google.com/mapfiles/arrow.png');
            }else{
                markers[i].setZIndex(2);
                markers[i].setIcon('http://www.google.com/mapfiles/marker.png');
            }
        }
    }
</script>
 

you see at the end i have a markers function with locations to the pics and still nothing.. thanks for any help gt

[omerbutt]

hey ,
why dont you use googleearth to see the right code, it generates the code for the markers you are talking about. simply add a marker and then generate code it would give you all the script , hoping that it uses the same api.
regards,
Omer Aslam