Thanks to nghi's post in http://processwire.com/talk/topic/690-map-marker-fieldtype/page-9#entry50956 I have made Google map info window with image inside.I have changed Nghi's (and Ryans's, or Ryans's and Nghi's ) code in MarkupGoogleMap module like this:
foreach($pageArray as $page) {
$marker = $page->get($fieldName);
if(!$marker instanceof MapMarker) continue;
if(!$marker->lat) continue;
$url = $options['markerLinkField'] ? $page->get($options['markerLinkField']) : '';
$title = $options['markerTitleField'] ? $page->get($options['markerTitleField']) : '';
$images = $page->images->first->url ? $page->images->first->url : '';
$phone_number = $page->phone_number ? $page->phone_number : '';
$out .= "$id.addMarker($marker->lat, $marker->lng, '$url', '$title', '','$images','$phone_number'); ";
}
Where $page->images->first->url.... takes your first image from page where you have map field.
Second code that I changed is in MarkupGoogleMap.js, where I have add info window:
on line 96 I have add map_image to marker, which represent $images field.
this.addMarker = function(lat, lng, url, title, icon, map_image, map_number)
after, from line 122 i have comment, or you can delete this part of code. This part of code when marker is clicked directly goes to page. We dont need that for infobox, cause when marker is clicked infowindow needs to open.
/**
if(marker.linkURL.length > 0) {
google.maps.event.addListener(marker, 'click', function(e) {
window.location.href = marker.linkURL;
});
} */
next is infowindow code. I have add this part of code near line 130
// info window
var contentString = '<div class=\"chapter-bubble\">' +
'<div class=\"chapter-bubble-title\">' + title + '</div>' +
'<img width="200" src="' + map_image + '"/>' +
'<div class=\"chapter-bubble-number\">' + map_number + "</div>" +
'<div class=\"chapter-bubble-url\">' + '<a href=\"' + url + '\">Visit Chapter Site</a></div>';
var infowindow = new google.maps.InfoWindow({ content: contentString });
google.maps.event.addListener(marker, 'click', function() { infowindow.open(this.map,marker); });
it creates info window with our fields, here I have add image width 200px, "map_image" of course is our first image from page, that will be shown in infowindow.
This is minor change of Ryan's code, but it can be very useful, I have used it in my project, for infowindow. Of course, this can be implement in Info box also.
Next thing that I need is custom icons for markers. So if someone knows solution for marker icons please write here.
P.S. Thanks Ryan and all comunity for this amazing CMF and quick response for all my questions I have asked.
