• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 637
  • Last Modified:

Google Maps, displaying results as text below a map

I have some code that shows a house on a map and then shows surrounding schools - the page can be viewed here:

http://4letproperty.co.uk/index.php/properties/property-map-schools/139

I am trying to now show results below the map as text - with each result contained within a <div> tag, but I have no idea where to start. I have come across what may be a partial solution with document.createElement but I am not 100% sure.

The current code is:
    <script type="text/javascript">
      var map;
      var infowindow;

      function initialize() {
        var pyrmont = new google.maps.LatLng({address:latitude}, {address:longitude});

        map = new google.maps.Map(document.getElementById('map'), {
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: pyrmont,
          zoom: 15
        });

 var marker = new google.maps.Marker({
            position: pyrmont, 
            map: map,
            icon: 'http://www.4letproperty.co.uk/themes/cp_global_images/4let_pin.png'
        });

        var request = {
          location: pyrmont,
          radius: 5000,
          types: ['school']
        };
        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.search(request, callback);
      }

      function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
          }
        }
      }

      function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(place.name);
          infowindow.open(map, this);
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Open in new window

0
dchid
Asked:
dchid
  • 3
  • 2
2 Solutions
 
Tom BeckCommented:
Yes, you can use document.createElement. You did not say what information from the results you wanted to display so I'll suggest this example. Replacing your callback function with this will display the school name and the distance in miles from the house to the school.
function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
		  var resultsDiv, list, listItem, liText, distance, lat, long;
		  resultsDiv = document.getElementById("results");
		  list = document.createElement('ul');
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
		    lat   = results[i].geometry.location.lat();
    	    long  = results[i].geometry.location.lng();
			distance = google.maps.geometry.spherical.computeDistanceBetween(pyrmont, new google.maps.LatLng(lat, long));
			listItem = document.createElement('li');
			liText = document.createTextNode(results[i].name + ', ' + (Math.round((distance * 0.00062137119)*10)/10) + ' miles');
			listItem.appendChild(liText);
			list.appendChild(listItem);
          }
		  resultsDiv.appendChild(list);
        }
      }

Open in new window


You will need the google maps geometry library and a "results" div where you want the information displayed. Also, I made the pyrmont variable global so I could access it from the callback function.
0
 
dchidAuthor Commented:
Thanks for the reply, it is really appreciated. Yes I am hoping to display the name of the school and the distance from the house to the school as you look to have included which is great.

I have added the code, and a results div. By this I am assume a <div id="results">. Please correct if I am mistaken.

I also moved the pyrmont variable outside of the function to make it global however this stopped the map from loading.

Also I added <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"> to the page. Not sure if this is what you meant by geometry library.

The current code is as follows:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"> 

    <script type="text/javascript">
      var map;
      var infowindow;
      var pyrmont = new google.maps.LatLng({address:latitude}, {address:longitude});
      function initialize() {		        
	
        map = new google.maps.Map(document.getElementById('map'), {
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: pyrmont,
          zoom: 15
        });

 var marker = new google.maps.Marker({
            position: pyrmont, 
            map: map,
            icon: 'http://www.4letproperty.co.uk/themes/cp_global_images/4let_pin.png'
        });

        var request = {
          location: pyrmont,
          radius: 5000,
          types: ['school']
        };
        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.search(request, callback);
      }

function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
		  var resultsDiv, list, listItem, liText, distance, lat, long;
		  resultsDiv = document.getElementById("results");
		  list = document.createElement('ul');
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
		    lat   = results[i].geometry.location.lat();
    	    long  = results[i].geometry.location.lng();
			distance = google.maps.geometry.spherical.computeDistanceBetween(pyrmont, new google.maps.LatLng(lat, long));
			listItem = document.createElement('li');
			liText = document.createTextNode(results[i].name + ', ' + (Math.round((distance * 0.00062137119)*10)/10) + ' miles');
			listItem.appendChild(liText);
			list.appendChild(listItem);
          }
		  resultsDiv.appendChild(list);
        }
      }

      function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(place.name);
          infowindow.open(map, this);
        });

      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Open in new window

0
 
Tom BeckCommented:
I can check your code a little later if it still does not work for you, but there's one problem I see immediately.

When using multiple google maps libraries, use one script include and separate libraries with a comma.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry,places&sensor=false"></script>

Not sure why it might make a difference, but this is what I have for making the pyrmont variable global.

<script type="text/javascript">
      var map, pyrmont;
      var infowindow;

      function initialize() {
        pyrmont = new google.maps.LatLng({address:latitude}, {address:longitude});

         .....
         .....
0
 
dchidAuthor Commented:
Thanks very much for your help, those 2 changes made the difference.
0
 
Tom BeckCommented:
You're welcome, glad it worked for you. Thanks for the points.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now