javascript checking if file exists with google maps api

Question

I am trying to check and see if an image exists so I can adjust my contentString accordingly. However, when I try to do this, only one pin shows up on the map (the first one).

  var checkins = <?php echo $json; ?>;
  function imageExists(url, callback) {
    var img = new Image();
    img.onload = function() { callback(true); };
    img.onerror = function() { callback(false); };
    img.src = url;
  }
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: {lat: 39.8282, lng: -98.5795}
    });
    setMarkers(map);
  }
  function setMarkers(map) {
    var infowindow = new google.maps.InfoWindow({
      content: ""
    });
    for (var i = 0; i < checkins.length; i++) {
      var checkin = checkins[i];
      var marker = new google.maps.Marker({
        position: {lat: parseFloat(checkin[2]), lng: parseFloat(checkin[3])},
        map: map,
        title: checkin[1]
      });
      var imageUrl = 'http://rjbogz.ddns.net/pictures/'+checkin[0]+'.jpg';
      imageExists(imageUrl, function(exists) {
        if (exists){
          contentString = '<b>'+checkin[6]+'</b><br><b>'+checkin[4]+'</b> by <b>'+checkin[5]+'</b><br>At <b>'+checkin[1]+'</b><br><img src="pictures/'+checkin[0]+'.jpg" style="width:300px;height:300px;">';
          bindInfoWindow(marker, map, infowindow, contentString);
        } else {
          contentString = '<b>'+checkin[6]+'</b><br><b>'+checkin[4]+'</b> by <b>'+checkin[5]+'</b><br>At <b>'+checkin[1]+'</b>';
          bindInfoWindow(marker, map, infowindow, contentString);
        }
      });
    }
  }
  function bindInfoWindow(marker, map, infowindow, description) {
      marker.addListener('click', function() {
          infowindow.setContent(description);
          infowindow.open(map, this);
      });
  }

As you can see by the imageExists function, I tried adding a check to see if the image exists, but then it only plots one pin on the map. The website is currently published to http://rjbogz.ddns.net/map.php if you want to take a look at what it looks like. An example of what I want to fix would be if you click on the icon in Bermuda (there is no image file associated with it).

What javascript errors do you see in the console? Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates your issue. — geocodezip, Feb 24 '16 at 16:07
I do not get any errors in the javascript unfortunately. It is just not displaying correctly. Above is the code that works (what is currently on the website) and the two pieces below are what I replace and what I replace it with, respectively, to make it only put the first pin. — rjbogz, Feb 24 '16 at 16:10
Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates your issue, including any required data/HTML/CSS. — geocodezip, Feb 24 '16 at 16:14
Have you got something in a JS Fiddle? Your domain is not accessible where I am. — Adam Konieska, Feb 24 '16 at 16:15
Unfortunately not. The code contains a bit of php which is required to allow it to run. I haven't quite figured out jsfiddle to work with that. — rjbogz, Feb 24 '16 at 16:21
Just take the generated HTML and JS and place it in the fiddle. — Adam Konieska, Feb 24 '16 at 16:23
@user1911612 Your code to check the image only work when the image has already been downloaded/failed before calling the function `ImageExist`, `img.height` will always be 0 at the first call because the image has not been downloaded yet. you should see this thread : http://stackoverflow.com/questions/14651348/checking-if-image-does-exists-using-javascript . — Hacketo, Feb 25 '16 at 08:56
@Hacketo thanks for the info. I took a look at the thread, but I might be doing something wrong. I have the images local on my webserver too, if that makes a difference. I have updated the code to reflect the changes. — rjbogz, Feb 25 '16 at 17:11
@user1911612 as `imageExists` is now a function that use async callback to check if the image exists, you need to call `bindInfoWindow` at the end of the `imageExists` callback. because atm `bindInfoWindow` is called before `contentString` is filled. — Hacketo, Feb 25 '16 at 17:17
@Hacketo Well silly me. That's all good now and all the plots are there, however, the whole `addListener('click') function doesn't seem to be working. I updated the code above again. Thanks a lot for the help! — rjbogz, Feb 25 '16 at 17:37
@Hacketo I just published the site to the link above. You can see there that when you click the pins, the info window doesn't show up. Where are you trying it? — rjbogz, Feb 25 '16 at 18:19
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/104566/discussion-between-hacketo-and-user1911612). — Hacketo, Feb 25 '16 at 18:45

Adam Konieska · Answer 1 · 2016-02-24T20:07:26.650

2

You're pretty close, there's just a couple issues with if (ImageExists(image) != 0) {

First, you've declared the function as ImageExist, so you'd need to fix that typo. Second, you probably want to change if(ImageExists(image) != 0) { to if(ImageExists(image)) { since your function is going to return a boolean value.

And finally, you've got some unclosed HTML in your contentString.

Making those adjustments to your code should fix it, it would look something like this:

if (ImageExist(image)) {
    contentString = '<b>'+checkin[6]+'</b><br><b>'+checkin[4]+'</b> by <b>'+checkin[5]+'</b><br>At <b>'+checkin[1]+'</b><br><img src="pictures/'+checkin[0]+'.jpg" style="width:300px;height:300px;">';
} else {
    contentString = '<b>'+checkin[6]+'</b><br><b>'+checkin[4]+'</b> by <b>'+checkin[5]+'</b><br>At <b>'+checkin[1]+'</b>';
}

You can see it working in the JS Fiddle here: https://jsfiddle.net/igor_9000/ts9udgn7/4/

And an updated fiddle that shows it working with images from placehold.it: https://jsfiddle.net/igor_9000/ts9udgn7/6/

Hope that helps!

edited Feb 24 '16 at 20:07

answered Feb 24 '16 at 16:44

Adam Konieska

2,805
3
14
27

Worked like a charm. Thanks. Had to be something silly, of course. – rjbogz Feb 24 '16 at 18:28
Okay, so I implemented this, and it worked, but now it just stopped working. Even in your jsfiddle. Any ideas there? The `ImageExists()` function seems to always be returning false now. – rjbogz Feb 24 '16 at 19:43
It looks like its still working in the fiddle. The `ImageExists()` function has always return false in the JS Fiddle for me, because your domain is blocked by my ISP. If I use images from placehold.it, using the data from your array as image sizes, it works. I updated the fiddle to show that: https://jsfiddle.net/igor_9000/ts9udgn7/6/ – Adam Konieska Feb 24 '16 at 20:06
I see your updated code, but it is still only making it into the else statement for me. I am not sure why. http://i.imgur.com/ml1cKmi.png – rjbogz Feb 24 '16 at 20:18
@AdamKonieska this work only because your browser already downloaded the image, ImageExist will always return false for new images. – Hacketo Feb 25 '16 at 17:46

javascript checking if file exists with google maps api

1 Answers1