What is the process for including a new button in the infowindow attached to a marker?

This is a JavaScript code snippet that initializes a map using the Google Maps API. It creates a marker at Uluru in Australia and opens an info window with some content when the marker is clicked.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '
      </p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

I am looking for assistance in adding a new button named 'Uluru' to the info window. The button should be placed next to the close button as shown in this photo.https://i.sstatic.net/kjApB.png

Answer №1

To add a button to your map, you can set the content using contentString and position it as shown in the following example.

function initMap() {
  var uluru = {
    lat: -25.363,
    lng: 131.044
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">' + '<button type="button" class="custom_button">!!!</button>' +
    '<div id="siteNotice"></div>' +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the ' +
    'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi)</p>' +
    `<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">` +
    'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' +
    '(last visited June 22, 2009).</p>' +
    '</div>' +
    '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

initMap()
#map {
  height: 90vh;
}

.custom_button {
  position: absolute;
  top: 0px;
  right: 20px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="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

Tips for choosing a single row in a table using a checkbox

I need help with a table that has multiple rows and four columns. One column is for checkboxes, while the other three are select boxes set to read-only. I want users to be able to edit only one row at a time by checking the checkbox in the first column. If ...

Android's Crosswalk browser encounters an error stating that only secure origins are permitted

I have encountered what seems to be a common issue, but I am struggling to find a clear answer. Upon integrating the Crosswalk WebView Engine for Android, I am receiving the error message: "Only secure origins are allowed" This error seems to be related ...

The tweet button feature does not give users the ability to make changes to the content

When using the "Tweet Button" feature, users will follow these steps: The user clicks on the Tweet Button If not already logged in, the user is prompted to login to their Twitter account. New users can also create an account at this stage. The Shar ...

Enhance the functionality of JavaScript for multiple images using ASP.NET

I have been searching extensively for a way to achieve the following necessary function. Initially, I successfully replicated this function in an asp.net application using VB for a single image. However, I am now attempting to apply it to multiple images. ...

I'm having trouble adding a background image, even though I have set it to static. What could be

I attempted to add a background image to my Django website, but unfortunately, it was not successful. I followed the steps provided in this Stack Overflow answer here, however, it did not work. I even made changes to the database by migrating them, but s ...

Modify content of elements by clicking on them with jQuery

Currently, there is a button that triggers the loading of an HTML page into a div with the ID "myDiv". Once loaded, I would like to be able to change the text content of specific tags when they are clicked. For example, clicking on the text within an h2 ta ...

JavaScript encountered an issue while parsing XML: the format is not well-formed

I keep seeing an error message saying "Error parsing XML: not well-formed" when I encounter this line in my javascript code: for (var i=1; i<=totalImgs; i++) If I remove the < character from the line, the parsing error goes away. However, the javas ...

Change the background image when hovering over an element with vanilla JavaScript by utilizing data attributes

I would like to be able to change the background image of a <div> when hovering over a link. Initially, the <div> should not have a background image when the page loads for the first time. This is my current setup: <div class="background"& ...

I am unable to invoke a JavaScript function from PHP code

Please Note: Despite all my efforts, I have been unable to find a solution to this issue. I have scoured numerous online resources, including Stack Overflow, without success. Surprisingly, I could not locate a relevant question on Stack Overflow addressing ...

What is the method for generating dynamic objects from configuration data with Ext JS?

Working with Ext Js to develop a dynamic web application can be quite challenging. When making an AJAX call to fetch data from the server, it's often unclear what the data will be until it is received. While some examples suggest adding dynamic object ...

Having trouble initiating NPM in a terminal

I keep encountering an issue whenever I try to start NPM using a command in the terminal. Here is the error message that appears: npm ERR! npm ERR! Did you mean one of these? npm ERR! npm star # Mark your favorite packages npm ERR! npm stars # Vi ...

Tips for personalizing the color scheme of Material UI Stepper Step?

I need help customizing the disabled Step color for Material UI Steppers. The default colors are Blue for enabled steps and Grey for disabled steps, but I want to change it to a different color as shown in this example: https://i.stack.imgur.com/HGGxp.png ...

Tips on updating pinned row information in AG Grid Vue

I have a specific row pinned to the bottom in the grid. Whenever I add or remove some rowData in the grid, I need to update that pinned row. Take a look at the code snippet below: this.gridApi.pinnedBottomRowData = rowNode.setDataValue(date, dataToPush); t ...

Is there a way to change a model attribute in JSP based on the AJAX response?

I have a JSP page that contains the following code snippet: <li id="notifications"> <c:choose> <c:when test="${empty alerts}"> <p class="text-default">There are no Service Reminders at this time</p> ...

The error message TS2304 is indicating that the name 'Set' cannot be found in electron-builder

I am trying to utilize the AppUpdater feature in electron-builder for my Electron Application. Upon importing the updater in my main.ts file: import { autoUpdater } from "electron-updater" An error is triggered when running the application: node_module ...

Setting a time delay in a RESTful service

I am currently working on a service built with node.js + express. However, I am facing issues with managing the timer functionality. My service does not maintain any state, and it consists of 2 functions in the route. route.js var timerId; exports.linkU ...

What methods do web browsers use to detect when a user has viewed a custom image on a webpage?

As I work on creating a website to sell handmade crafts, it is essential that high-quality images are displayed for each product. In order to address SEO issues, I am considering loading the images asynchronously only when the user reaches the thumbnail ...

Combining data from an API using Vue for seamless integration

I need to extract data from an API, such as imdbID, and then append ".html" to it in order to create a variable that can be placed inside the href attribute of a button. However, I am facing difficulties in achieving this. Thank you in advance for your hel ...

Switch up the position of an element every time the page is refreshed

I have a webpage containing 5 images, each measuring 48px by 48px. I would like these images to be displayed in random positions on the page every time it is loaded. While I am aware that I will need to use CSS and JavaScript for this task (specifically f ...

React typescript props not appearing as potential defined, even after implementing the '?' optional operator and '| undefined'

I've noticed that my linter has suddenly stopped flagging potentially undefined properties passed into my React components. For instance: interface BooleanTypeObject { prop1: true } interface MyComponentProps { disable ...