Trouble with displaying a custom marker on Google Maps API v3

I have been struggling to replace the default marker with a custom icon in my Google Maps code. Despite my efforts and thorough research, I cannot seem to get it to work correctly. Below is the snippet of my code:

<script type="text/javascript">

function initialize() {
var myLatlng = new google.maps.LatLng(43.041936,-88.044523);
var mapOptions = {
    center:myLatlng,
    zoom:15,
    disableDefaultUI:true,
    mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("milwaukeeMap"), mapOptions);

var marker = new google.maps.Marker();
    marker.setPosition(myLatlng);
    marker.setMap(map);
    marker.setIcon('/images/map-marker.png');
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Despite ensuring that the image path is correct and accessible, the custom icon still fails to display. I have checked repeatedly but cannot pinpoint what may be causing the issue. Unfortunately, I am unable to provide a live example for troubleshooting purposes.

javascriptgoogle-maps

Answer №1

<script type="text/javascript">

function initialize() {
var myLatlng = new google.maps.LatLng(43.041936,-88.044523);
var mapOptions = {
        center:myLatlng,
        zoom:15,
        disableDefaultUI:true,
        mapTypeId:google.maps.MapTypeId.ROADMAP
        }
var map = new google.maps.Map(document.getElementById("milwaukeeMap"), mapOptions);

var markerImage = 'images/map-marker.png';

var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        icon: markerImage
        });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Give this a try, I altered the way the marker is created.

I swapped out the image URL to test it, and it appears to be functioning properly: 

<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">

function initialize() {
var myLatlng = new google.maps.LatLng(43.041936,-88.044523);
var mapOptions = {
        center:myLatlng,
        zoom:15,
        disableDefaultUI:true,
        mapTypeId:google.maps.MapTypeId.ROADMAP
        }
var map = new google.maps.Map(document.getElementById("milwaukeeMap"), mapOptions);

var markerImage = 'http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/bar_coktail.png';

var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        icon: markerImage
        });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="milwaukeeMap" style="height:400px;width:400px;"></div>
</body>
</html>

View the code on JSFiddle http://jsfiddle.net/iambnz/NGja4/160/

Answer №2

After conducting a test, I can confirm that your Javascript code is working fine as my marker displays correctly. Therefore, the issue may lie elsewhere in your HTML file. Have you checked if the PNG file actually exists and if it's truly a PNG format? It might be beneficial to try using a different image for troubleshooting purposes.

Sincerely, Ron

Answer №3

Upon further investigation, I discovered that certain situations require externally hosted icons to include an additional parameter such as:

images/location-icon.png?download=true

Answer №4

Initially, I utilized Firefox 57.0.4 on Ubuntu but later decided to switch to Chromium Version 63.0.3239.84, which surprisingly resolved the issue. I had the ?raw=true setting toggling back and forth.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JavaScript to transform base64 encoded strings into images

I'm currently working on an app using Titanium and I have a base64 string that I need to convert into an image from JSON data. Any assistance you can provide would be much appreciated. Thank you! ...

javascriptjsonimagetitaniumencode

Connecting one property of a JavaScript object to another property within the same JavaScript object

I am working with a JavaScript Object and I want to use the map() function to match the Id with another id in the same JavaScript Object. Here is the schema for my JavaScript Object: var items = [ { BossId: "03", DateOfBirth: "1966-09-27T00:00:0 ...

javascriptreactjs

Tips for accessing the value from an input field in an AngularJS application

Looking at my DOM structure below, <input class="k-textbox ng-pristine ng-untouched ng-valid ng-valid-required" type="text" placeholder="" ng-blur="controller.isDirty=true" ng-change="controller.isDirty=true" ng-model="controller.model.value" ng-requir ...

javascriptjqueryangularjsselenium-webdriver

Implementing setState in React with nested objects and dynamic keys

Here is how my state appears: state = { basic: { entry: 'index.js', output: { path: 'dist', filename: 'bundle.js', } } } An onChange event callback for input has been defined as follows: handleU ...

javascriptreactjs

Unhook, add at the beginning, and set requirements jQuery

There are two clickable div elements that can switch classes when clicked. If the first one contains "1", it will be given a class of "active". If the second one contains "2", it will have the class "active" while removing the class from the first one. &l ...

javascriptjqueryhtmlcss

Tips for conducting a simultaneous test on several devices

Struggling to execute a single test script on multiple devices, regardless of efforts. There is one test apk and script obtained from a website as a sample. The script locates a textbox in the application, enters "Hello World!" into it, then completes the ...

javascriptnode.jswebdriver-ioappium-android

Is it possible to update the page title with JQuery or JavaScript?

Is it possible to modify the page title using a tag inside the body of the document with jQuery or JavaScript? ...

javascriptjqueryhtmlcssdom

Retrieve the most recently added child from the Firebase cloud function

Seeking assistance in retrieving the most recently added child in a cloud function. Below is the code snippet I am using and I'm curious if there is a specific function or query I can utilize to achieve this task without having to iterate through each ...

javascriptfirebasegoogle-cloud-functions

Trying to decide between using a Javascript or HTML5 PDF Editor?

I am in need of a solution that enables users to edit PDF files directly on an ASP.NET web page. This functionality is intended for creating templates and adding blocks/form fields to existing PDFs, complete with rulers and other necessary features. Desp ...

javascriptasp.nethtmlpdf-generation

Unable to update state in my React app when clicking on a button

There is a requirement for a button click to filter the job-card array by one specific category. For example, clicking on the button "Marketing" should only show jobs from the array that have the property "jobstags: Marketing". I followed a similar procedu ...

javascriptarraysreactjsstate

Is it possible to configure Express.js to serve after being Webpacked?

I am currently in the process of setting up a system to transpile my Node server (specifically Express) similar to how I handle my client-side scripts, using webpack. The setup for the Express server is quite straightforward. I bring in some node_modules ...

javascriptnode.jsexpresswebpack

Creating a flexible parent tag for grouping child elements using Angular 2

My Objective I am determined to develop an Angular 2 button component that can dynamically render as either an <a /> tag or an <input /> tag based on the value of a property called type. Furthermore, this button component should be able to acc ...

javascriptangular

Field for user input featuring a button to remove the entry

I am attempting to add a close icon to a bootstrap 3 input field, positioned on the top right of the input. Here is what I have tried so far: https://jsfiddle.net/8konLjur/ However, there are two issues with this approach: The placement of the × ...

javascriptjqueryhtmlcsstwitter-bootstrap

Setting up NextJS on Vercel for website deployment can encounter a common error known as ENOENT Error, which is caused by the absence of a specific file or

Everything works perfectly on my local machine: import fs from 'fs' import path from 'path' export default function createNewDirectory (tokenSignature: string) { const directoryPath = path.join(process.cwd(), 'notes', to ...

javascriptnext.jsdeploymentvercel

best practices for sending multiple requests using node js

I have a list of 4 URLs, each containing JSON data. How can I iterate through these URLs? Example: URLs = [ "", "", "", ""]; Each URL contains JSON data for one student as follows: { date: 08/05/2014 stude ...

javascriptnode.js

Guide on creating a JSONP request

My goal is to perform cross-site scripting. The code snippet below shows the jsonp method, which appears to fail initially but succeeds when switched to a get request. I am trying to achieve a successful response using the jsonp method. I have confirmed th ...

javascriptjsonangularjs

Challenges with exporting dynamically generated divs using jspdf in an Angular 2 project

I have been utilizing the jspdf library to print div elements in my current project. But I recently discovered an issue where dynamic content within a div is not being printed correctly. Specifically, when incorporating simple Angular if statements, jspdf ...

javascripthtmlangulartypescriptjspdf

Failure to highlight items when using the multiple select function

After adding a select all button to a multiple select, I encountered an issue. Although all the items are being selected, they are not highlighted when clicking on the select all button. Below is the code snippet: <div class="label_hd">Profiles* {{ ...

javascripthtmlcssangularjs

Issue with parsing JSON data for heatmap in Mapbox

Here's the code I'm using: heat = L.heatLayer([], { maxZoom: 12 }).addTo(map); $.getJSON("js/example-single.geojson", function(data) { var geojsosn = L.geoJson(data, { onEachFeature: function (feature, layer) { console.log(f ...

javascriptjqueryajaxjsonmapbox

Issues arise with tabbed content as default content fails to display and classes are not added upon clicking

I'm currently working on a tabbed module that consists of three tabs. Here's how it operates: When the user clicks on a carousel_element, it reveals carousel_hidden-text within that div and displays it in another div called carousel_quote. I&ap ...

javascriptjqueryhtmlcss