Google Maps drawing lines are not showing up at all

I am having an issue with displaying polylines while using Javascript generated through the googleVis package for R. I have tested it on different browsers but encountered the same problem. Below is a snippet of R code that generates the error, followed by the resulting HTML/Javascript output. Can someone help me identify any mistakes and suggest a solution?

The R code

 require(googleVis)
 df <- data.frame(Postcode =      c("77003","08540","80545"),Tip=c("Houston","Princeton","Red Feather Lakes"))
 M <- gvisMap(df, "Postcode", "Tip",
          options=list(showLine=TRUE,lineWidth=20,lineColor='red'))
 plot(M)
 cat(unlist(M))

The resulting HTML/Javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MapID88977a251b2</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
.
.
. (Content continues) . 
 .
javascriptrgoogle-mapsgoogle-visualization

Answer №1

It appears that there is a discrepancy in the documentation:

lineWidth

If showLine is set to true, this parameter determines the line width (in pixels).
Type: number
Default: 10

The lineWidth option seems to be ineffective, instead there is an unmentioned lineWeight parameter (which does not default to 10, so it needs to be explicitly defined... as a number greater than zero)

google.load("visualization", "1", {packages:["map"]}); 
google.setOnLoadCallback(drawMap); 
function drawMap() { 
var arr = [ ['postcode','name'], [ "77003", "Houston" ], [ "08540", "Princeton" ], [ "80545", "Red Feather Lakes" ] ] 
var data = google.visualization.arrayToDataTable(arr); 
var map = new google.visualization.Map(document.getElementById('map_div')); 
map.draw(data, { showLine: true, lineWeight:20, lineColor:'red', enableScrollWheel:true}); 
}
html,body,#map_div{ height:100%;padding:0;margin:0; }
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="map_div"></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

Time picker in Bootstrap - Ensuring end time is not earlier than start time validation

How to prevent users from selecting a past time for the end time in Bootstrap time picker with start time validation <html> <head> </head> <body> <link href="https://maxcdn.bootst ...

javascriptangular

Transitioning to utilizing Bootstrap through npm

I am currently working on a project that utilizes Bootstrap. However, the Bootstrap files are being loaded into a subdirectory. I would like to transition to using npm for easier maintenance and updates. Within our existing style folder, we have subfolder ...

javascripttwitter-bootstrapnpm

What is the process for assigning an element to a specific URL ID?

Imagine having an array of objects structured like this: [{ details: {id: 7}, type: minigame1, ...(more values that need to be accessed later) }, { details: {id: 8}, type: minigame1, ...(more values that need to be accessed later) }, { details: {id: ...

javascriptreactjs

What is the process for utilizing a custom plugin within the <script setup> section of Vue 3?

//CustomPlugin.js const generateRandomValue = (min, max) => { min = Math.ceil(min); max = Math.floor(max); const random = Math.floor(Math.random() * (max - min + 1)) + min; console.log(random); }; export default { install(Vue) { Vue.conf ...

javascriptvue.jsvuejs3

Having trouble with deploying Node.js to Heroku? Feel like your 'git push her

After successfully running my app locally, I encountered an issue when trying to deploy it to Heroku. The deployment process just hangs indefinitely and only displays one public file on the website with an error message stating: "https://analogy-alley.hero ...

javascriptnode.jsherokuwebpackbundle

Translating a few lines of JavaScript into C#

I'm looking to convert some code from JavaScript to C#, but I'm having trouble grasping a certain section... function getHisto(pixels) { var histosize = 1 << (3 * sigbits), histo = new Array(histosize), inde ...

javascriptc#

How can JSON attribute/value pairs be rearranged using JavaScript?

Looking at the JSON data below: [ { 'Album': 'Dearest', 'Artist': 'Theresa Fu', 'Year': '2009'}, { 'Album': 'To be Free', 'Artist': 'Arashi', &apo ...

javascriptjson

Adjust the position of elements to prevent overlap

I'm facing a problem with elements overlapping on my website. The navbar is sticky, meaning it slides down the page when scrolling. Additionally, I have a "to-top" button that automatically takes you to the header when clicked. I want the "to-top" but ...

javascriptjqueryhtmlcss

Converting a C array into an Rcpp NumericVector

Currently, I am faced with a dilemma while working on C arrays. My task involves converting them to Rcpp::NumericVector within my code. I attempted a certain code snippet for this purpose, but it unfortunately resulted in an error message indicating that ...

carraysrrcpp

Incorporate incomplete data post random sampling in R (combine vectors and insert missing values as zero)

My current objective is to conduct numerous random sampling trials, where not every element may be included in each sampling. The method I am using currently is as follows: test <- sample(rownames(data), size=10000, replace=T, prob=data$refFraction) ...

r

Using JS to switch between text and state in ToneJS

I am facing an issue with the text not displaying in the "play-stop-toggle" element, despite my limited experience with JS. My desired outcome includes: [SOLVED] The text in <div id="play-stop-toggle" onclick="togglePlay()">Play ...

javascripthtmlcsstone.js

Using CSS height 100% does not function properly when the content overflows

Here's what's going on with this code snippet: HTML <div class="one"> <div class="will-overflow"> </div> </div> CSS html, body { width: 100%; height: 100%; } .one { height: 100%; background: r ...

javascripthtmlcss

A custom JavaScript function designed to facilitate the downloading of a file that includes the user's input directly to the user

Is there a way to use javascript to generate a file based on user input and provide it as a download without storing it on the server? For instance, imagine a scenario where a user is using an application and they want to download their work by clicking ...

javascriptajaxdownload

ObjectID is failing to store the hexadecimal values properly

Initially, the ObjectID in my Sails/Mongo database was stored like this: "_id" : ObjectId("557077fb836bdee256004232") However, something changed or happened, and now new records are stored differently: "_id" : { "_bsontype" : "ObjectID", "id" : ...

javascriptnode.jsmongodbsails.jswaterline

Update the CAPTCHA, while also refreshing the entire registration form

JavaScript Snippet <script language="javascript" type="text/javascript"> function updateCaptcha() { $("#captchaimage").attr('src','new_captcha_image.php'); } </script> New Image Code <img src="new_ ...

javascriptphphtmlcss

Substitute the symbol combination (][) with a comma within Node.js

Currently, I am utilizing Node JS along with the replace-in-file library for my project. Within a specific file named functions.js, I have implemented various functions. Furthermore, in another file named index.js, I have added code to call these functio ...

javascriptjson

Menu is not functioning properly as it is not staying fixed in place

I am trying to create a fixed menu that sticks to the browser window as it scrolls. However, I am encountering an issue where the transition from sticky to fixed is not smooth when I remove position: relative; from navbar__box. window.onscroll = functio ...

javascriptjqueryhtmlcsscss-position

How can I permanently disable a Bootstrap button on the server side using PHP after it has been clicked once?

I am in search of a way to disable a bootstrap button permanently after it has been clicked once. While I am aware of how to achieve this on the client side using JavaScript, the button becomes enabled again after the page is refreshed. I am now looking ...

javascriptphphtmlbootstrap-4

Guide to setting up R language version 4 on AWS EMR using Amazon Linux 2

We currently have an AWS EMR cluster running on Amazon Linux version 2 with R version 3.4.3. However, I would like to upgrade to the latest R version 4. I attempted the following steps: yum -y install https://dl.fedoraproject.org/pub/epel/epel-release-lat ...

ramazon-web-servicesamazon-emramazon-linux

Attempting to retrieve an image from the database using ajax within a PHP script

I'm facing an issue with my code where I am attempting to retrieve an image from a database using AJAX, but it's not working as expected. Can someone please help me out? Image uploading works fine when trying to fetch the image using an anchor ta ...

javascriptphpajax