Google map info window

[alec]

Hello comunity! I have made google map info window with image inside. But I have problem with image folders. In MarkupGoogleMap.js i have added code bellow. Now, problem is when I add new image, it goes to another folder, here I have made route to "1023" folder, but PW generate every time new folder for images. So, my route to "1023" folder, works only for some images. Is there solutions for images url?

// info window
        var contentString = '<div class=\"chapter-bubble\">' + 
                    '<div class=\"chapter-bubble-title\">' + title + '</div>' +
                    
                    '<img width="200" src="/process/site/assets/files/1023/' + map_name + '"/>' +
                    '<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 });
 

[ryan]

You've got a hard-coded page assets URL in your javascript there, and the 1023 in it is referring to the page ID. Somehow you'd need to replace that with the ID of the page you are referring to, or better yet, call the $page->filesManager->url() to get the entire URL to it, rather than trying to construct your own.

Getting either of those things will be fairly simple if your javascript here lives in one of your template files, as you would just refer to $page->id, or $page->filesManager->url() directly, and insert that value into the javascript. If this JS instead lives in an external JS file then you'll need to communicate that to the javascript somehow. One good way to do it is to use data attributes in your markup generated by your template file. Example:

<div id='map' data-page='<?=$page->id?>' data-files='<?=$page->filesManager->url?>'>
</div>

Then from Javascript (jQuery), you can pull those values easily:

var pageID = $('#map').attr('data-page'); 
var filesURL = $('#map').attr('data-files'); 

[alec]

I have found one solution for adding images to infowindow.

In google map module I have add variable field called images, which is field of page images. Then i assing that variable into java script. I have wrote on modules page all process: http://processwire.com/talk/topic/690-map-marker-fieldtype/?p=56159

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'); ";
}