Trouble with the icon URL in AngularJS Google Map (ng-map) functionality

Whenever I switch from using a relative URL to an absolute one, my markers mysteriously disappear.

In the view, I have the following code:

<marker ... icon="{url: '{{markerSrc}}'}"></marker>

When I set this in my controller:

$scope.markerSrc = "/images/marker.png";

everything works perfectly and the icon is displayed

However, if I change it to:

$scope.markerSrc = "http://complete/path/to/marker/images/marker.png";

I encounter an error:

GET http://localhost:9000/%7Burl:%20'http://complete/path/to/marker/images/marker.png'%7D 404 (Not Found)

I've tried various approaches like

<marker ... icon="{url: "'{{markerSrc}}'" }"></marker>
<marker ... icon="{url: "{{markerSrc}}" }"></marker>
<marker ... icon="{url: {{markerSrc}} }"></marker>

but none of them seem to solve the issue...

javascriptangularjsgoogle-mapsng-map

Answer №1

Consider modifying the icon attribute syntax in the marker directive from:

<marker ... icon="{url: '{{markerSrc}}'}"></marker>

to

<marker ... icon="{{markerSrc}}"></marker>

Example

var app = angular.module('appMaps', ['ngMap']);
app.controller('mapCtrl', function ($scope) {
    

    $scope.cities = [
       { id: 1, name : "Brisbane", location: [-33.867396, 151.206854] },
        { id: 2, name: "Sydney", location: [-27.46758, 153.027892] },
        { id: 3, name: "Perth", location: [-31.953159, 115.849915] }
    ];


    $scope.markerSrc = "http://maps.google.com/mapfiles/marker.png";

});
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="appMaps" ng-controller="mapCtrl">
        <map center="[-24.667856, 133.630694]" zoom="4">
            <marker id='ID{{city.id}}' ng-repeat="city in cities" position="{{city.location}}" icon="{{markerSrc}}"   >
            </marker>
            
        </map>
</div>

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

What function does this array serve following the object that was returned?

Could someone explain the usage of [this.props.currency] at the end of the return object, or direct me to a resource where I can learn more about this coding pattern as it is unfamiliar to me. I am not inquiring about the definition of this.props.currency ...

javascriptarraysreactjsobjectecmascript-6

Tips for evaluating the build size of a Create React App and ways to minimize it

Currently, I've been following the steps outlined in this helpful guide: https://create-react-app.dev/docs/analyzing-the-bundle-size/ and I'm gearing up to execute the analyze command to assess my app's size. Is this approach the most effect ...

javascriptreactjsbundle

What is the best way to extract the JSON value from my API website and assign it to a new variable

Currently, I am in need of a way to convert a username into an ID. To accomplish this task, I will utilize the following API link: (where "username" is replaced by the variable name.) The main objective here is to extract the ID value from the provided li ...

javascriptjqueryjson

Place the text within the contenteditable body of a frame at the specific caret position

Within my iframe object, there is a contenteditable body. I am trying to paste text or HTML elements at the caret position. However, when I attempted this code snippet, I encountered an error message saying Cannot read property 'createRange' of u ...

javascriptjqueryhtmlcontenteditable

The 'fn' argument passed is not a valid function, instead it is a string

I am encountering an issue while trying to retrieve data from my server. The console doesn't provide any specific information about the error. My objective is to fetch JSON data from the server and use it to display the required information. I am util ...

javascriptphpangularjsjsonionic-framework

Mysterious Node JS Errors that Defy Explanation: "Cannot POST/GET"

My NodeJS SPA is displaying some strange behavior and I had to resort to using "brute force" to get express.static() to function properly: app.use('*/images', express.static(path.join(__dirname + '/public/images'))); Now, I am encounte ...

javascriptnode.jsexpressroutes

Ascending to the Peak within a div

<script type="text/javascript"> $(document).ready(function(){ updateContent(); }); function updateContent(){ $('#mainDiv').load('home.php', function(){ scrollToTop(); }); } ...

javascriptjqueryhtmlcss

Tips for retrieving the most recent UI updates after the container has been modified without the need to refresh the browser

Currently, I have developed a micro frontend application in Angular using module federation. This application is hosted in production with Docker containers. My main concern revolves around how to update the UI changes for the user without them needing to ...

javascriptangularmicro-frontendwebpack-module-federation

In React's contextApi, the this.context object is constantly devoid of any values

sample.js export default class SampleComponent extends React.Component { static contextType= AppProvider; componentDidMount() { console.log('sample',this.context); } render() { return ( <AppConsumer> ...

javascriptreactjs

Is there a way to ensure that the function within the 'for loop' is executed prior to sending the response in NodeJS?

Utilizing bluebird for this task, my main goal is to ensure that the function `get_like_status(email, results[i].id)` located at the end of the for loop runs before sending out the headers. Currently, I am encountering an issue where the array list retur ...

javascriptnode.jspromise

Update the displayed number on the input field as a German-formatted value whenever there is a change in the input, all while maintaining

In German decimal numbers, a decimal comma is used. When formatting, periods are also used for grouping digits. For example, the number 10000.45 would be formatted as 10.000,45. I am looking to create an input field (numeric or text) where users can input ...

javascripthtmlinputsvelte

Angular - Steps to Display $http Response

I need to transform the output of my $http request into a different model so that the transformation can be applied globally within the service call. In simple terms, the response I receive from my http/api call does not match the specific model I require ...

angularjsangularjs-http

Add a value in front of switchMap along with a Promise

Whenever a new value is emitted by this.selectedLanguage$, I need to emit a value that is calculated asynchronously. My current approach to this requirement involves the following code: public readonly languageCategories$ = this.selectedLanguage$.pipe( ...

javascripttypescriptrxjsreactive-programmingreactive

Is it possible to inject JavaScript into the DOM after it has been loaded using an AJAX call?

I have a specific div element identified by the id #id1 that contains clickable links. Upon clicking on these links, an AJAX call is made to retrieve additional links from the server. My current approach involves replacing the existing links within #id1 w ...

javascriptjqueryhtmlajax

Why is React failing to render after state change in a functional component?

import React, {useState, useEffect} from 'react'; import MakeCard from './MakeCard.js'; export default function DisplayCards(props) { const [images, setImages] = useState([{}]); // Display component after images are fetched use ...

javascriptreactjsreact-functional-component

Nested scrolling bars within each other

Currently, I am importing photos from a Facebook page and displaying them on my jQuery mobile webpage using the photoSwipe plugin. However, there seems to be an issue with the final appearance of the images. Pay attention to the image where the red arrow ...

javascriptjqueryhtmlscrollbar

jQuery struggles to properly interpret JSON data retrieved from a PHP file

I have successfully encoded WordPress data as JSON for a store locator page, however, I am encountering an issue where the page fails to parse the returned JSON. Even though the file is present and it indeed returns the correct JSON data, I receive a 404 N ...

javascriptphpjqueryjsonwordpress

Conditionally display content based on the existence of a specific value within an array

Is there a way in AngularJS to display a value using ng-show, such as ng-show = "role in ['admin', 'user', 'buyer']" I want to display a div if the role matches any of the elements in the array. ...

javascriptangularjs

Sending information to a child component causes the parent's data to be modified as well

Transferring information from the parent to the child component has always been easy for me. However, I recently encountered an issue where updating the data in the child component also updates the data in the parent component simultaneously. Now, I am loo ...

javascriptvue.js

What is the best way to send information from ng-repeat items in one view to another view when both views are controlled by a single controller?

There are two views (2 html templates) that share a common controller. In view 1, which contains ng-repeat items, For example: In "view 1": ng-repeat = "monthid in years" It displays: month 1, month 2, ... month 12 Now I want to click on "mo ...

angularjsindexingcontrollerangularjs-ng-repeat