Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps Places api, how do I get the standard infowindow content from a marker

New to Google Maps, and not a script expert either. Thanks in advance for any help you can provide.

I am putting a google map on a page of store locations. I have managed to get the map to display the marker I want for the store location using the search. Now I want the infoWindow to be populated to look like the standard google window. But using the code I was able to find on the places library, the results show up unformatted with no line breaks, and shows errors if a piece if information is missing, etc... I have searched and didn't find anything that helped - so please forgive me if this is already answered - and I have read through the google places library numerous times so either I am dense or they just don't address this specific question.

The user will click on a store location listed on the page and I want to show them the map with the one marker (through search I think I can get that to happen) and I want the store information show up in the infoWindow when they click on the marker (preferably I would like the infoWindow already opened but I couldn't find anything on that either). Since I am new to the site I can't post an image of the infoWindow so hopefully it's not needed. Like the google's map website, I want a nicely formatted name, the reputation stars, a formatted address, phone number and website, along with a picture of the business if it exists. The example I use below is for a business where all of this information exists within google. The code I currently have for the map is included.

Please don't reply simply to direct me back to the places library; if that's all you have then it is not helping. I need some clarification and ideally an example. Thanks.

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

    function initialize() {
    var mvale = new google.maps.LatLng(40.708572,-74.017385);

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

    var request = {
      location: mvale,
      radius: '500',
    keyword: "Michelle Vale"
    };

    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++) {
         var place = results[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 + place.rating + place.vicinity + 
          place.formatted_address + place.website );
          infowindow.open(map, this);
        });
      }

    function openInfoWindow(id){return true;}

    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
like image 977
billcbos Avatar asked May 17 '12 20:05

billcbos


People also ask

How do I get data from Google Maps Places API?

Go to APIs & Services → Dashboard → Enable APIs & Services at the top and Choose Maps Javascript API from the API Library. This will open up the Map JavaScript API page, and Enable it.

How do I put InfoWindow on marker?

To make the info window visible, you must call the open() method on the InfoWindow , passing an InfoWindowOpenOptions object literal specifying the following options: map specifies the map or Street View panorama on which to open. anchor contains an anchor point (for example a Marker ).


1 Answers

I finally located some code for formatting the infoWindow in another post where they were answering a question about removing the border for the infoWindow.

Here is my example :

 infowindow.setContent('<span style="padding: 0px; text-align:left" align="left"><h5>' + place.name + '&nbsp; &nbsp; ' + place.rating 
                            + '</h5><p>' + place.formatted_address + '<br />' + place.formatted_phone_number + '<br />' +  
                            '<a  target="_blank" href=' + place.website + '>' + place.website + '</a></p>' ) ;

I also figured out how to use the getDetails function described in the Places Library

I still don't know how to get the rating information (I'm using the tag but it gives an error), how to retrieve the image for the location, nor how to eliminate the "undefined" error from appearing.

Last element is to have the infoWindow open when the map loads... I saw a post about it but couldn't get it to work.

like image 155
billcbos Avatar answered Nov 10 '22 13:11

billcbos