How to name Google Map Marker Icon types using two words?

Question

I'm developing a Google map to display job locations using custom Marker Icons.

Here's a snippet of the code that I am using to set up the variable 'markerIcon' and the 'type' name ( Administrative ):

BEFORE

 var markerIcon = { Administrative: { url: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png' // scaledSize: new google.maps.Size(80, 80), // origin: new google.maps.Point(0, 0), // anchor: new google.maps.Point(32,65), // labelOrigin: new google.maps.Point(40,33) } };

This is fine, so here's a snippet that doesn't work with the var 'type' name Administrative and Clerical :

AFTER

 var markerIcon = { Administrative and Clerical: { url: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png' // scaledSize: new google.maps.Size(80, 80), // origin: new google.maps.Point(0, 0), // anchor: new google.maps.Point(32,65), // labelOrigin: new google.maps.Point(40,33) } };

This is the problem I am experiencing. The use of more than one word and with spaces.

Below is the function that creates the marker:

 function createMarker(latlng, name, company, address, type, jobdesc) { var jobButton = "<a class='btn btn-success btn-sm mt-2' role='button' href='/public/job_details_demo.php?" + "title=" + name + "'" + "target='_blank'>View Job" + "</a>"; var html = "<h5 class='mb-0'>" + name + "</h5>" + "<h6 class='mb-0'>" + company + "</h6>" + "<p><b>" + address + "</b></p>" + "<b>Job Details:</b></br>" + jobdesc + "</p>" + jobButton; var icon = markerIcon[type] || {}; var marker = new google.maps.Marker({ map: map, position: latlng, icon: icon.url }); google.maps.event.addListener(marker, 'click', function () { infoWindow.setContent(html); infoWindow.open(map, marker); }); markers.push(marker); }

To display the icons, I query the database to retrieve the 'jobsector_name' AS type using SQL. This works fine and the Marker Icons show up.

However, I need to use more than one word for the jobsector names, for example, 'Administrative and Clerical'. When I change the type to this name in the database and the Marker Icon name, the markers don't show, and no errors are shown in the Chrome console.

My question is, how do I solve the problem of using two or more words for the Marker Icon type names?

I've tried special characters like %20, but unsurprisingly the code hates any special characters. I've also tried referencing numbers, but they don't show and I've tried concatenating two variables, but don't know how to reference a variable inside another variable for this type of operation.

Answer 1

SOLVED: I added '_' underscores between each word (both in the MarkerIcon type and database column values) and then used PHP command 'str_replace', when displaying the name on the page.

$jobsector = str_replace("_", " ", $row['jobsector_name']);

PHP Manual - str_replace — Replace all occurrences of the search string with the replacement string