Question

I am trying to load a custom icon for Google Maps API v3. The code I have is as follows:

 $(function(){

  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(42.2542586, -83.8873974),
      zoom: 10
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);


   $('.valley').on('click', function(){

      var myLatlng = new google.maps.LatLng(42.000, -83.0073974);
      var mapOptions = {
       zoom: 14,
       center: myLatlng
      }
      var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
      var iconMarker = 'pin2.jpg'
      var marker = new google.maps.Marker({
       position: myLatlng,
       animation: google.maps.Animation.DROP,
       icon: iconMarker,
       map: map,
       title:"Hello"
      });
  });

});

The following script is in the 'application.html.erb' file (i've taken out my apikey) <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=false"></script>

Pretty straight forward and the actual map loads, but for some reason the rails app is not finding the .jpgfor the icon. I've placed it in various locations, currently it is in the root folder. For some reason it is trying to load the file as a text/html file instead of an image. I replaced the image with another image that is loading properly on the web page, and I still get a 404 with the browser trying to load it as an text/html loading as a text/html

Here is the error in the console 404 error

Was it helpful?

Solution

Try with:

var iconMarker = '/assets/pin2.jpg';
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top