0

I'm a beginner when it comes to javascript and I'm really stuck on one of my projects. I have a single page with a Google Map of a certain area. I use nearby search to populate 20 places and put them in an observable array. I then also populate a list with all of the places from the array.

I want to make each list item clickable and then have the map pan to each place's marker and open an infowindow.

Here's some of my code:

HTML:

<body>
    <input id="pac-input" class="controls" type="text"
        placeholder="Enter a Location">
    <div id="map-canvas"></div>
    <div id="list">
        <h2 style="text-align: center;">Good Eats!</h2>
        <ul data-bind="foreach: allPlaces">
            <li data-bind="click: $parent.clickMarker">
                <p data-bind="text: name"></p> 
                <p data-bind="text: address"></p> 
            </li>
        </ul>
    </div>
</body>

Javascript:

function appViewModel() {
  var self = this; 
  var map;
  var service;
  var infowindow;
  var chapelHill = new google.maps.LatLng(35.908759, -79.048100);
  var markersArray = [];
  var marker;

  self.allPlaces = ko.observableArray([]);

  self.clickMarker = function(place) {
    console.log('clicked');
    for(var e in markersArray)
    if(place.place_id === markersArray[e].place_id) {
      map.panTo(markersArray[e].place_id);
    }
  }

  function getAllPlaces(place){
    var myPlace = {};
    myPlace.address = place.vicinity;
    myPlace.place_id = place.place_id;
    myPlace.position = place.geometry.location.toString();
    myPlace.name = place.name;

    self.allPlaces.push(myPlace);
  }
  function createMarker(place) {
    var marker = new google.maps.Marker({
      map: map,
      name: place.name.toLowerCase(),
      position: place.geometry.location,
      place_id: place.place_id,
      animation: google.maps.Animation.DROP
    });
    var address;
    if (place.vicinity !== undefined){
      address = place.vicinity;
    } else if (place.formatted_address !== undefined){
      address = place.formatted_address;
    }
    var contentString = '<div class="strong">' +place.name+ '</div><div>' + address + '</div>';
    markersArray.push(marker);
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(contentString);
      infowindow.open(map, this);
      map.panTo(marker.position);      
    });
    return marker;
  }

I'm stuck on the clickMarker function.

I have left some of the javascript out to save room.

Here's a link to my gh-pages if you'd like to look at the entire code:

http://tarheelsrule44.github.io/

As you can probably tell, I've been messing around with this code to the point of spaghetti-fying it horribly.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
Tyler Woods
  • 1
  • 1
  • I was stuck with the clickMarker function, trying to get it to pan to the marker of the corresponding list item and open an infowindow. Of course, 5 minutes after posting, I've figured it out on my own. – Tyler Woods Mar 01 '15 at 15:01

1 Answers1

0

Sorry for the unclear question, but I figured it out.

I changed my clickMarker function to this:

  self.clickMarker = function(place) {
    console.log('clicked');
    for(var e in markersArray)
    if(place.place_id === markersArray[e].place_id) {
      map.panTo(markersArray[e].position);
    }
  }

Originally, I had mistakenly put map.panTo(markersArray[e].place_id); which, of course, makes no sense. I guess that's what I get for late, late night coding with no coffee.

Tyler Woods
  • 1
  • 1
  • 2
    Don't use `for-in` to loop through array entries (without safeguards); [details and better alternatives here](http://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript/9329476#9329476). – T.J. Crowder Mar 01 '15 at 15:05