By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,288 Members | 1,695 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,288 IT Pros & Developers. It's quick & easy.

adding markers to my google maps...

P: 33
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?

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  2. <script type="text/javascript">
  3.     var geocoder;
  4.     var map;
  5.  
  6. function initialize(){
  7.     var latlng = new google.maps.LatLng(36.879,-96.537);
  8.     var myOptions = {
  9.         zoom: 3,
  10.         center: latlng,
  11.         mapTypeId: google.maps.MapTypeId.HYBRID,
  12.         scaleControl: true,
  13.         navigationControl: true,
  14.         navigationControlOptions:{
  15.             style: google.maps.NavigationControlStyle.SMALL
  16.         },
  17.         mapTypeControl: true,
  18.         mapTypeControlOptions:{
  19.             style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  20.         }
  21.     };
  22.         map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  23.         google.maps.event.addListener(map, 'mousedown', function(event){
  24.             findAddress(event.latLng);
  25.         });
  26.     }
  27.     function findAddress(loc){
  28.         geocoder = new google.maps.Geocoder(); 
  29.         if (geocoder){
  30.             geocoder.geocode({'latLng': loc}, function(results, status){
  31.                 if (status == google.maps.GeocoderStatus.OK){
  32.                     if (results[0]){
  33.                         address = results[0].formatted_address;
  34.                         document.getElementById('lat').value = loc.lat();
  35.                         document.getElementById('long').value = loc.lng();
  36.                     }
  37.                 }else{
  38.                     alert("Geocoder failed due to: " + status);
  39.                 }
  40.             });
  41.         }
  42.     }
  43.     var markers = new Array();
  44.     function addMarkers(){
  45.         var lats = document.getElementById('lats').value;
  46.         var lngs = document.getElementById('lngs').value;
  47.         var names = document.getElementById('names').value;
  48.         var descrs = document.getElementById('descrs').value;
  49.         var memid = document.getElementById('memid').value;
  50.  
  51.         var las = lats.split(";;")
  52.         var lgs = lngs.split(";;")
  53.         var dss = descrs.split(";;")
  54.         var usrn = memid.split(";;")
  55.  
  56.         for (i=0; i<las.length; i++){
  57.             if (las[i] != ""){
  58.                 var loc = new google.maps.LatLng(las[i],lgs[i]);
  59.                 var marker = new google.maps.Marker({
  60.                     position: loc, 
  61.                     map: window.map,
  62.                     title: nms[i]
  63.                 });
  64.                 markers[i] = marker;
  65.                 var contentString = [
  66.                   '<div id="tabs">',
  67.                   '<ul>',
  68.                     '<li><a href="#tab-2"><span>description</span></a></li>',
  69.                     '<li><a href="#tab-3"><span>location</span></a></li>',
  70.                   '</ul>',
  71.                   '<div id="tab-1">',
  72.                     '<p><h1>'+nms[i]+'</h1></p>',
  73.                   '</div>',
  74.                   '<div id="tab-2">',
  75.                    '<p><h1>'+nms[i]+'</h1></p>',
  76.                    '<p>Added by: '+usrn[i]+' from '+usrl[i]+'</p>'+
  77.                    '<p>'+dss[i]+'</p>'+
  78.                   '</div>',
  79.                   '<div id="tab-3">',
  80.                     '<p><h1>'+nms[i]+'</h1></p>',
  81.                   '</div>',
  82.                   '</div>'
  83.                 ].join('');
  84.                 var infowindow = new google.maps.InfoWindow;
  85.                 bindInfoWindow(marker, window.map, infowindow, contentString);
  86.             }
  87.         }
  88.     }
  89.     function bindInfoWindow(marker, map, infoWindow, contentString){
  90.         google.maps.event.addListener(marker, 'mouseover', function() {
  91.             map.setCenter(marker.getPosition());
  92.             infoWindow.setContent(contentString);
  93.             infoWindow.open(map, marker);
  94.             $("#tabs").tabs();
  95.          });
  96.     }
  97.     function highlightMarker(index){
  98.         for (i=0; i<markers.length; i++){
  99.             if (i == index){
  100.                 markers[i].setZIndex(10);
  101.                 markers[i].setIcon('http://www.google.com/mapfiles/arrow.png');
  102.             }else{
  103.                 markers[i].setZIndex(2);
  104.                 markers[i].setIcon('http://www.google.com/mapfiles/marker.png');
  105.             }
  106.         }
  107.     }
  108. </script>
  109.  
you see at the end i have a markers function with locations to the pics and still nothing.. thanks for any help gt
Dec 5 '11 #1
Share this Question
Share on Google+
1 Reply


omerbutt
100+
P: 638
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
Dec 5 '11 #2

Post your reply

Sign in to post your reply or Sign up for a free account.