adding markers to my google maps...

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • George Thompson
    New Member
    • Dec 2011
    • 33

    #1

    adding markers to my google maps...

    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?

    Code:
    <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
    Contributor
    • Nov 2006
    • 638

    #2
    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

    Comment

    Working...