i'm trying to create a custom marker using google maps.

var iconBase = //some url;
var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: iconBase + 'marker.png'
});

This basically works. I host my images in a google drive. It's good, but a little slow, takes about 500-700ms to load the image for the first time upon clicking to a map and rendering the marker. So I'm trying to add the image locally, sadly, I can't seem to find resources regarding this one. How do I use local (in my project directory) images?

Assuming I put it in a folder "icons" within the same directory level as my php file where I call google maps services, if that helps. Thank you!

Update!

I tried:

maker = new google.maps.Marker({
              position: location,
              map: globalMap,
              icon : "pubIcons/male-2.png"
            }); 

where pubIcons is a folder in the same directory as the php file where I render the map. and I get this error :

GET http://localhost/bims-2.0/index.php/location/view/pubIcons/male-2.png 404 (Not Found) 

It sort of behaves like pubIcons/male-2.png is an action in my controller "view", i'm using Yii btw.

i'm trying to create a custom marker using google maps.

var iconBase = //some url;
var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: iconBase + 'marker.png'
});

This basically works. I host my images in a google drive. It's good, but a little slow, takes about 500-700ms to load the image for the first time upon clicking to a map and rendering the marker. So I'm trying to add the image locally, sadly, I can't seem to find resources regarding this one. How do I use local (in my project directory) images?

Assuming I put it in a folder "icons" within the same directory level as my php file where I call google maps services, if that helps. Thank you!

Update!

I tried:

maker = new google.maps.Marker({
              position: location,
              map: globalMap,
              icon : "pubIcons/male-2.png"
            }); 

where pubIcons is a folder in the same directory as the php file where I render the map. and I get this error :

GET http://localhost/bims-2.0/index.php/location/view/pubIcons/male-2.png 404 (Not Found) 

It sort of behaves like pubIcons/male-2.png is an action in my controller "view", i'm using Yii btw.

• javascript
• google-maps
• google-maps-api-3

• omg leaflet was so much better – Nikhil VJ Commented Jul 29, 2020 at 10:22
• it's working to me get the baseURL window.location.origin ++ append your image path from local path – Anupam Maurya Commented Sep 29, 2023 at 7:18

3 Answers 3

Try this code :)

var image = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q";
var marker = new google.maps.Marker({
        position: location,
        map: globalMap,
        icon: image
});

Update

var image  = "http://yourdomain.com/image/image.php";

or

icon : "/pubIcons/male-2.png"

I also came across this issue but resolved it a different way. I use Django for my web framework and Django makes use of a directory called static. Don't know if this dir can be used outside of Django. I loaded the pic into my static file and in my webpage's body tag, had the code

<div style="display:none">

    `<img src="{% static 'map/CrocMarker_45.png' %}" alt="Croc Marker" id="crocMark">`

</div>

In this case, I set the display to none because I don't want to render the pic in the body tag, just want to load it so that I can access it in my maps scripts.

In my function initMap() I create the variable var crocMark=document.getElementById("crocMark").src;.

Later, when you're creating your markers, you can just set the icon to this variable. For example:

var XMarker=new google.maps.Marker({ position: location, map: map_name, icon: crocMark });

This may not be the best way, but it worked great for me and I hope it does for you as well.

Edit: Just a note, here's my project structure if it wasn't clear.

Project Root "Django">Django Root "Django_Project">My apps e.g. "map">static>map

The icon parameter of google.maps.Marker expects a URL. By specifying "pubIcons/male-2.png", you were providing a relative URL, relative to the page you are on.

If you want to specify a file from the local file system, you need to use a file URL, for example: "file:///var/www/pubIcons/male-2.png" or wherever your file lives on the local file system. Of course you'll only be able to access local files if you are loading the javascript from your local machine.

Complete example:

maker = new google.maps.Marker({
              position: location,
              map: globalMap,
              icon : "file:///var/www/pubIcons/male-2.png"
            });