How to get rid of duplicate marker titles in google maps api?

A

Alec Onim2015-10-28 19:21:24

JavaScript

Alec Onim, 2015-10-28 19:21:24

Hello everyone, I’ll say right away that I don’t specialize in JS, etc., so maybe my question is stupid, but nevertheless, I googled for a long time, searched on stackoverflow, etc., but I didn’t find the answer.
I am making a small page in which I can select a text file (the content is a bunch of lines like "HeaderForMarker"; "AddressString"), click on the button and create a marker on the map for each line with a corresponding note that will pop up when you click on the marker. I create several markers, but the title to all is written from the last one :( I don’t know what to do already.
Tell me, please, where to at least read it? :)
There is also a problem with how to bypass the Google limit of 10 requests per second? I tried to make a delay, but it still swears.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Google Map Template with Geocoded Address</title>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>		<!-- Google Maps API -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>	<!-- Google CDN for jQuery -->
  <script>
  var map;	// Google map object
  
  // Initialize and display a google map
  $(function() {  
    // Create a Google coordinate object for where to initially center the map
    var latlng = new google.maps.LatLng( 55.7520263,37.6153107);//38.8951, -77.0367 );	// Washington, DC
    
    // Map options for how to display the Google map
    var mapOptions = { zoom: 12, center: latlng  };
    
    // Show the Google map in the div with the attribute id 'map-canvas'.
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    // Update the Google map for the user's inputted address
    $( "#locate" ).click( function( event ) {
      var geocoder = new google.maps.Geocoder();    // instantiate a geocoder object
      
      // Get the user's inputted address
      var address = document.getElementById( "address" ).value;
    
      // Make asynchronous call to Google geocoding API
      geocoder.geocode( { 'address': address }, function(results, status) {
        var addr_type = results[0].types[0];	// type of address inputted that was geocoded
        if ( status == google.maps.GeocoderStatus.OK ) 
          ShowLocation( results[0].geometry.location, address);
        else     
          alert("Geocode was not successful for the following reason: " + status);        
      });
    } );

    // FILE TEST!!!
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        var fileSelected = document.getElementById('txtfiletoread');
        fileSelected.addEventListener('change', function (e) { 
             //Set the extension for the file 
             var fileExtension = /text.*/; 
             //Get the file object 
             var fileTobeRead = fileSelected.files[0];
            //Check of the extension match 
             if (fileTobeRead.type.match(fileExtension)) { 
                 //Initialize the FileReader object to read the 2file 
                 var fileReader = new FileReader(); 
                 fileReader.onload = function (e) { 
                     var fileContents = document.getElementById('filecontents'); 
                     fileContents.innerText = fileReader.result; 
                 } 
                 fileReader.readAsText(fileTobeRead); 
             } 
             else { 
                 alert("Please select text file"); 
             }
     
        }, false);
    } 
     else { 
         alert("Files are not supported"); 
     }
 		// FILE TEST!!!

 		function sleep(ms) 
 		{
      ms += new Date().getTime();
      while (new Date() < ms){}
    } 
    
    // loads all the adresses and places markers on the map
    $("#load_all").click(function(event)
    {
      var geocoder = new google.maps.Geocoder();    // instantiate a geocoder object

      var fileContents = document.getElementById('filecontents'); 

      var lines = fileContents.innerText.split('\n');

      for(var i = 0; i<lines.length; i++)
      {
        lines[i] = lines[i].split(';');
      }

      for (var i = 0; i<lines.length; i++)
      {
        sleep(102);

        var PersonalData = lines[i][0];

        geocoder.geocode( { 'address': lines[i][1] }, function(results, status) {
          if ( status == google.maps.GeocoderStatus.OK ) 
            ShowLocation(results[0].geometry.location, PersonalData);
          else     
            alert("Geocode was not successful for the following reason: " + status);        
        });
      }
    });
  } );
  
  function bindInfoWindow(marker, map, infowindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(html);
          infowindow.open(map, marker);
      });
  } 

  // Show the location (address) on the map.
  function ShowLocation( latlng, PersonalData)
  {	
    // Place a Google Marker at the same location as the map center 
    // When you hover over the marker, it will display the title
    var marker = new google.maps.Marker( { 
      position: latlng,     
      map: map,      
      title: PersonalData
    });
    
    // Create an InfoWindow for the marker
    var contentString = "<b>" + PersonalData + "</b>";	// HTML text to display in the InfoWindow
    var infowindow = new google.maps.InfoWindow( { content: contentString } );
    
    // Set event to display the InfoWindow anchored to the marker when the marker is clicked.
    //google.maps.event.addListener( marker, 'click', function() { infowindow.open( map, marker ); });
    bindInfoWindow(marker, map, infowindow, PersonalData);
  }

  </script>
  <style>
  /* style settings for Google map */
  #map-canvas
  {
    width : 1024px; 	/* map width */
    height: 768px;	/* map height */
  }
  </style>
</head>
<body>
  <!-- Dislay Google map here -->
  <div id='map-canvas' ></div><br/>
  <div>
    <label for="address"> Address:</label>
    <input type="text" id="address"/>
    <button id="locate">Locate</button>
    <button id="load_all">Load all adresses</button>
    <hr/>
     Please Select text file of which contents are to be read: 
      	<input type="file" id="txtfiletoread" />
    	<div>The File Contents are as below:</div> 
     	<div id="filecontents">
    	</div>
    </div>
</body>
</html>

I would appreciate any help :)

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

N

Nicholas, 2015-10-29
@healqq

Why do you need the html parameter in the bindInfoWindow function ?
Pull the data from the marker parameter . For example, using the
This method should solve the problem.