The marker fails to display on the Google Maps API V3

I can't figure out why my marker isn't showing up. I even tried removing the line "marker.show", but it still won't appear.

<html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Custom Control</title>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">    </script>
<script type="text/javascript" src="ZoomPanControl.js"></script>
<script type="text/javascript">
function initialize() {  
    var myOptions = {  
        zoom: 10,  
        center: new google.maps.LatLng(47.3732589, 8.2382168),  
        mapTypeId: google.maps.MapTypeId.ROADMAP,  
        navigationControl: true }  
    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);  
    var marker = new google.maps.Marker({ position: google.maps.LatLng(47.3732589, 8.2382168), title: 'x', map:map});  
    marker.show;  
};
</script></head>  
<body style="margin:0px; padding:0px;" onload="initialize()">  
<div id="map_canvas" style="width:100%; height:100%"></div>  
</body></html>  

Answer №1

Here's a solution that should work:

const customMarker = new google.maps.Marker();
customMarker.setPosition(new google.maps.LatLng(47.3732589, 8.2382168));
customMarker.setMap(map);

Answer №2

Almost there! Just a small detail, don't forget to include the new keyword when setting the position. Here's the corrected code:

var marker = new google.maps.Marker({ position: new google.maps.LatLng(47.3732589, 8.2382168), title: 'x', map:map});

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

The npm package for @azure/storage-blob doesn't seem to play nice with the Azure Blob storage modules for IoT Edge

Currently, I am developing an edge module using Node.js to interact with Azure Blob storage modules on IoT Edge platform. To achieve this, I am following the documentation available at https://www.npmjs.com/package/@azure/storage-blob. The npm package ut ...

using http to handle a 404 error

This specific function is designed to fetch data under normal circumstances and to return a value of 0 in the event of a 404 error. function retrieveData(url) { if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); ...

Exploring the concepts of closure and scope

It seems that the function inResult always returns false and the loop is not being executed, probably due to a lack of understanding of closures. However, I can confirm that the result variable contains the correct properties. function hasId() {return ...

Populate an HTML table using a JavaScript array containing objects

Greetings, fellow coders! I am new to the coding world and this community, and despite my efforts in searching for a solution, I couldn't find exactly what I was looking for. So, here is my question: I have an array structured as follows: const arr ...

Generating a three-dimensional sphere from flat coordinates with the help of sine and cosine functions

I am trying to achieve mapping a set of 2D coordinates to a 3D surface of a sphere. To accomplish this, I am starting with an array of xy coordinates. Using the following loops, I am generating 20*20 xy coordinates ranging from 0 to 1 on each axis: var p ...

Issue with TinyMCE Editor: Inoperative

<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: "textarea", theme: "modern", plugins: [ "advlist autolink li ...

JS code not functioning properly when echoed with PHP outputs

After clicking the send button on my form, an Ajax POST request is triggered. The form is then replaced with a processing graphic while the data is sent to my PHP script for validation. If everything checks out, a thank you message replaces the processin ...

Incorporating multiple colors into a div with jQuery: A guide

I am looking for a way to create a legend by merging a specified number of colors within a div. I came across this useful Sample code that I have referenced. $.each(Array(50), function() { $("<div>").appendTo(document.body); }); var divs = $(&a ...

Spinning html/css content using JavaScript

Greetings! I am currently working on a demo site using just HTML, CSS, and JavaScript. Typically, I would use Ruby and render partials to handle this issue, but I wanted to challenge myself with JavaScript practice. So far, I have created a code block that ...

Having trouble decoding invalid JSON received from the Twilio API

For the past 4 hours, I've been struggling to parse a basic JSON from Twilio. The process is as follows: A text message containing a magnet link is sent Twilio forwards the request to my serverless function in the cloud I attempt to parse the reques ...

Creating a personalized script in ReactJS: A step-by-step guide

If I have already built a component with Google Chart in ReactJS, and I want to implement a feature that allows the Legend to show/hide data using a JavaScript script provided here, how and where should I integrate this code to work with my chart? Here is ...

Updating a marker's latitude and longitude using Laravel, Google API, and Ajax: A step-by-step guide

I'm struggling with sending the marker coordinates to a controller using ajax. I have named my routes 'update-marker-position' and included csrf_token(), but I am still seeing an error message in the logs. In my web.php file: Route::post(&a ...

Checking at the end of a loop node in JavaScript by reading a file synchronously

const fileSystem = require("fs"); const data = fileSystem.readFileSync("./mytext.txt").toString('utf-8'); const lines = data.split("\n"); while(!data.atEnd()) ^ I'm trying to create a loop that continues until reaching the end of the ...

Broadcasting real-time video from a webcam on an HTML website that is accessible locally through a Raspberry Pi device

My goal is to stream live video from a USB camera connected to my Raspberry Pi device onto a simple HTML site that is only visible on localhost. The site will be hosted on the Raspberry Pi itself and will only need to display the video streamed by the Ra ...

Intersection Observer is functioning properly as elements vanish once they finish appearing

New to this forum and looking forward to receiving assistance and making some fantastic connections! Currently working on my personal portfolio with the goal of getting it online for job hunting purposes, but encountering some challenges along the way. T ...

What exactly is an instance in React?

class WOW extends React.Component { render() { return <h1>WOWZA!</h1>; } } class Zany extends React.Component { render() { return <WOW />; } } within the above code snippet, the Crazy class's render method returns a ...

Unveiling Parameters from a Function Transferred as an Argument to Another Function in JavaScript

I'm just getting started with JavaScript and I've encountered a small program where a function takes another function as an argument. My goal is to figure out how to extract or access the arguments of that passed in function. Here's a specif ...

What is the reason for both the d3 line chart and bar chart being shown simultaneously?

On my website, I have implemented both a d3 bar chart and a line chart. You can view examples of them here: line_chart and bar_chart. However, in certain situations only one of the charts is displaying instead of both. Can anyone provide guidance on how ...

What is the procedure for updating a state property's value?

Currently, I am in the process of developing a small application that has the ability to fetch data, display it in the DOM, and allow users to select an item to view detailed information about the chosen user. To manage all these functionalities, I am util ...

How can I reset the mousemove event in jQuery?

I need to create a mechanism where I can move a div by clicking on it, and then click again to stop the div in that position. However, encountering an issue when trying to move the div again as the mousemove event does not get activated. How can this be ...