New for Google Maps, not an expert script. Thanks in advance for any help you can provide.
I put a google map on the stores page. I managed to display a map to display the marker that I want for the location of the store using search. Now I want infoWindow to be populated to look like a standard google window. But using the code that I could find in the place library, the results are displayed unformatted without line breaks and show errors if part, if information is missing, etc. .... I searched and did not find anything that helped - Please forgive me, if they already answered about this - and I read the google places library many times, so either I'm dense or just do not consider this specific question.
The user will click on the store address indicated on the page, and I want to show them a map with one marker (through the search, I think I can do it), and I want the store information to be displayed in infoWindow when they click on the marker (preferably , I would like the info window to be already open, but I could not find anything on this). Since I'm new to the site, I cannot post the infoWindow image, so I hope it is not needed. Like google map, I want a beautifully formatted name, reputation stars, formatted address, phone number and website, as well as a photo of the business, if one exists. The example I use below is for a business where all this information exists on Google. The code that I have for the card is included.
Please do not answer simply to direct me back to the library of places; if that’s all you have, then that doesn’t help. I need clarification and ideally an example. Thank you
<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>