Obtain marker icons from a text column in a fusion table using the Google Maps API

I am currently working with javascript and the v3 version of the maps API to retrieve data from a Fusion Table. I have been able to add custom markers to specific points successfully, but now I am attempting to set default icons for the markers I create based on the 'Icon' column in my table. Instead of using a fusion tables layer, I am generating markers in a loop using the data. The 'Icon' column in my table contains entries like 'poi', 'star', etc...

Is there a way to use a string name to access those default icons similar to how it is done with a fusion table layer? Alternatively, does anyone know where I can locate the absolute paths for the default fusion table icons (such as POI and Star) so that I can define them in my script?

Below is some example code. If anybody knows the exact URLs for the icons on Google, I could write a function to dynamically insert them based on the string from the 'Icon' column.


// Check if there is an image available for the marker, otherwise use default
if(row[3] != ''){
    // Create the marker
    var marker = new google.maps.Marker({
        map: map, 
        position: coordinate,
        icon: new google.maps.MarkerImage(row[3])
    });      
} else {
    // Create the marker
    var marker = new google.maps.Marker({
        map: map, 
        position: coordinate

        //icon: row[2] (row[2] represents the Icon column)
        // I assume I need to implement a conditional statement to check for the name (e.g. 'poi') and then insert the absolute URL accordingly.
        // However, I lack information on the absolute URLs of these icons. Thank you.
    });
}

Answer №1

My approach was very similar to this process. In my Fusion Table, I used the column to describe different markers, like "Poi," "Star," etc. Instead of photo, video, and song, I had different descriptors like these. Then, I coded it as shown below:

  var image = new google.maps.MarkerImage('img/CF_Orange.png',
  new google.maps.Size(25, 25),
  new google.maps.Point(0,0),
  new google.maps.Point(12.5,12.5));

  var image2 = new google.maps.MarkerImage('img/CF_Purple.png',
  new google.maps.Size(25, 25),
  new google.maps.Point(0,0),
  new google.maps.Point(12.5,12.5));

  var image3 = new google.maps.MarkerImage('img/CF_Green.png',
  new google.maps.Size(25, 25),
  new google.maps.Point(0,0),
  new google.maps.Point(12.5,12.5));

if(row[5] == 'photo'){
  var marker = new google.maps.Marker({
    map: map, 
    position: coordinate,
    icon: image
  });      
} else if(row[5] == 'video'){
  var marker = new google.maps.Marker({
    map: map, 
    position: coordinate,
    icon: image2
  });
} else {
  var marker = new google.maps.Marker({
    map: map, 
    position: coordinate,
    icon: image3
  });
    }

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

Hide the first dot indicator on the carousel when it is clicked

I've been experiencing a strange issue with my carousel - whenever I click on any of the dots, dot1 disappears. Upon inspecting the CSS, I found out that when clicking on a dot, it receives a display:none property from somewhere. Here is the code for ...

using Javascript to eliminate necessary tags from concealed tabs

My goal is to dynamically remove the required tag from fields in hidden tabs when a tab is clicked using JavaScript. The presence of the required tag on unused fields causes issues with form submission, preventing data insertion into the database. Here&apo ...

The closure in question received an undefined Angular parameter

Here is something similar to what I have: $scope.fetchData = function(path, save_to) { $http({method: 'GET', url: 'http://localhost:8001/www-root/' + path}). success(function(data, status, headers, config) { ...

Discovering a specific value within a JSON stringified array

I am looking for a specific value within a JSON stringify array [{"id":"432","temperature":"1","humidity":"1","createat":"0000-00-00 00:00:00"},{"id":"433","temperature":"22.00","humidity":"48","createat":"2015-10-11 19:49:57"},{"id":"434","temperature":" ...

Is it possible to anticipate a particular word following a route parameter in Node.js?

My current route setup looks like this: router.get('/:board/:threadId', function(req, res, next) { // performing actions here }); When users visit /a/1, it triggers the route with board = a and threadId = 1. Now, I want users to have to vis ...

Can a before hook ever run after a test in any situation, Mocha?

My before hook runs after the initial test and at the conclusion of the second test. Here is the code for my before hook: before(function () { insightFacade.addDataset("courses", content) .then(function (result: InsightResponse) { ...

Struggling to save a signature created with an HTML5 Canvas to the database

I've been on the hunt for a reliable signature capture script that can save signatures to MySQL, and I finally found one that fits the bill. However, there are two issues that need addressing: The canvas doesn't clear the signature when the c ...

Tips for refreshing a page in Vue.js

I am facing an issue with updating a table on my page after deleting a row. Each row in the table has a delete button and I have tried using window.location.reload() but it didn't work. </va-card> <br/> <va-card > ...

Tips for sending multiple pieces of data to an Arduino with NodeJS's serialport library

I am having trouble writing multiple data using the same port, but I see that node-serialport allows for reading multiple data functions simultaneously. How can I also write multiple data at the same time? This is how I have attempted it: - index.js- con ...

Oops! Looks like the table you're trying to reference hasn't been defined yet

Whenever I attempt to create a table using the Google Visualization API, with PHP & MySQL in the background, I encounter this error message. The database connection is established without issues Generating JSON from the PHP array works correctly The JSON ...

Socket.io: sending signals without receiving any responses

I've been working on a real-time socket.io project that involves a collaborative whiteboard app. I'm facing some issues with emitting data. server.js const express = require('express') const app = express(); const http = require(&apos ...

Error Found in Electron webview: Unexpected token causing SyntaxError

While using my Electron application on Windows (no issues observed on Mac), I encountered an error with certain external URLs loaded into a <webview> tag: Uncaught SyntaxError: Unexpected token ... (I suspect it has to do with spread syntax). Findi ...

Ways to dynamically assign a name to a div using AngularJS

Currently, I am in the process of developing a download function for an Android app using Angularjs based on this tutorial: Utilizing the Progress event in PhoneGap file transfers Everything seems to be working efficiently as planned; I can successfully d ...

What is the best way to combine Bootstrap and custom CSS, specifically the home.module.css file, in a React project?

I'm currently experimenting with utilizing multiple classes to achieve an elevated button effect and a fade animation on a bootstrap card. Here's the code snippet I've been working on: import Head from 'next/head' impo ...

Is there a way to seamlessly transition to a new scene or page in my project while still having the option to easily navigate back to the previous

This is just the beginning of a series of scenes that I have in mind. As I move on to scene 2, I realize that my current method of fading to black and loading a new html file is becoming monotonous. I am looking for a more creative approach where the user ...

When I use Ajax to update my HTML, it causes Javascript to malfunction

Encountering an issue with a web application I've been developing recently, specifically related to ajax reloading causing javascript to fail. The following Ajax Call is in place $.ajax({ type: "POST", url: "/sortByI ...

I would like to split a string of characters using spaces XY XYZ XYZ

As a young developer, I am facing a challenge and seeking a solution. The user enters a number in a format like XX XXX XXXX, but I need it to be separated differently. Currently, the numbers are being grouped as XXX XXX XXX, which is not the desired outp ...

Implementing a method for JQuery event handlers to access variables within a module pattern

var MODULE = (function() { var app = { hi: "hi dad", // How can I retrieve this value? onSubmitClick: function() { $('button').click(function() { console.log(hi); // Is there a way to access ...

Is there a way to programmatically simulate clicking on the "Cancel search" button?

I have a text input field with type "search". In order to perform UI testing, I need to simulate clicking on the "cancel search" button: https://i.sstatic.net/ahcwQ.png The code for this specific input field is as follows: <input type="search" value= ...

Enhancing Bootstrap Carousel with various effects

My exploration of the web revealed two distinct effects that can be applied to Bootstrap Carousel: Slide and Fade. I'm curious if there are any other unique effects, such as splitting the picture into small 3D boxes that rotate to change the image? ...