Google Maps with Multiple Markers

[timmah1]

I'm trying, unsuccessfully to get a map to show multiple markers with the information that's being grabbed by google.

 

This is what I'm using to pull info from google

    <script language="Javascript" type="text/javascript">
    //<!
    google.load('search', '1');

    function OnLoad() {
      // Create a search control
      var searchControl = new google.search.SearchControl();

      // Add in a full set of searchers
      var localSearch = new google.search.LocalSearch();
  
      searchControl.addSearcher(localSearch);

      // Set the Local Search center point
      localSearch.setCenterPoint("<?php echo $center; ?>");

      // tell the searcher to draw itself and tell it where to attach
      searchControl.draw(document.getElementById("searchcontrol"));

      // execute an inital search
      searchControl.execute("<?php echo $item; ?>");
  // Declare function for using results

searchControl.setSearchCompleteCallback(this, gotResults);
    }
    google.setOnLoadCallback(OnLoad);
	function gotResults(sc, searcher)
	{
	var resultcontent = '';
	var resultdiv = document.getElementById('searchresults');
	for (i=0; i<searcher.results.length; i++)
	{
		var result = searcher.results[i];
		resultcontent += '<p>'+result.title+'<br />'+result.streetAddress+'<br />'+result.lng+'<br />'+result.lat+'</p>';
	}
			resultdiv.innerHTML = resultcontent;
}
    //]]>
    </script>

 

What I need to do now is with the info that's being displayed, resultcontent, take that and place markers on a google map

 

I found this script, but I'm totally lost with how to utilize it

	<script type="text/javascript">
      (function() {

        window.onload = function(){

        	// Creating a LatLng object containing the coordinate for the center of the map  
          var latlng = new google.maps.LatLng(<?php echo $starting; ?>);  

          // Creating an object literal containing the properties we want to pass to the map  
          var options = {  
          	zoom: 7,
          	center: new google.maps.LatLng(<?php echo $starting; ?>),
          	mapTypeId: google.maps.MapTypeId.ROADMAP
          };    

          // Calling the constructor, thereby initializing the map  
          var map = new google.maps.Map(document.getElementById('map'), options);  

          // Creating a marker
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(40.521622,-81.481115), 
            map: map,
            title: 'My workplace'
          });

          // Creating an InfowWindow          
          var infowindow = new google.maps.InfoWindow({
            content: 'Hello world'
          });

          // Adding a click event to the marker
          google.maps.event.addListener(marker, 'click', function() {
            // Opening the InfoWindow
          	infowindow.open(map, marker);
          });
      	}
      })();
</script>

 

Can anybody help me out here?

 

Thanks in advance

 

[Kays]

How many is multiple? If it's over hundreds, this may not be the best route because that is pretty intensive work for a single page load.

[timmah1]

Right now, the results only show 4 at a time, per page, so I don't think that is too many

[Kays]

Okay. Now the hard thing is to find out how Google Maps API works. This is best done with experiments.

 

Here is the process:

1. Create the map. The snippet of code that you found will create the map for you.

2. Create a function that will create a Marker and put it on the map. Again, the snippet of code does that for you. Just modify the coordinates of the marker and the infowindow details.

3. When you get the results from Google, just call the function in #2 for each marker.

 

Now that may sound difficult, but it's not. You already have everything you need. You can view a bunch of examples in the link below. View Source to see the code.

 

See here: https://developers.google.com/maps/documentation/javascript/examples/