Unique Google Map Marker Description customization

Question

Unique Google Map Marker Description customization

I need assistance with customizing the description portion of the Google Maps marker description parameter.

        "title": '<%# Eval("country") %>',
        "lat": '<%# Eval("Latitude") %>',
        "lng": '<%# Eval("Longitude") %>',
        "description": 'Location : <%# Eval("City") %>,<%# Eval("country") %>,<%# Eval("Latitude") %>,<%# Eval("Longitude") %>'

For each data, I would like the following output displayed on the next line -

Location: Name of a city
Country : Name of a Country
Latitude:
Longitude:

Your help is greatly appreciated! Thank you!

javascript mysql asp.net google-maps

Answer 1

Answer №1

Do you require an InfoWindow? These act as holders for HTML content that appear at a specific location on the map.

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(0,0)
});
marker.content = new google.maps.InfoWindow({
  content:"Insert your HTML Content here"
});
google.maps.event.addListener(marker, 'click', function(){
  this.content.setPosition(this.getPosition());
  this.content.open(map); //map where it will be displayed
});

Create a marker with desired properties.
Set up the "content" window for the marker, utilizing HTML content styled in CSS within the containing div.
Add an event listener to show the InfoWindow on the map when the marker is clicked, positioned where the marker is placed.

Answer 2

Do you require an InfoWindow? These act as holders for HTML content that appear at a specific location on the map.

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(0,0)
});
marker.content = new google.maps.InfoWindow({
  content:"Insert your HTML Content here"
});
google.maps.event.addListener(marker, 'click', function(){
  this.content.setPosition(this.getPosition());
  this.content.open(map); //map where it will be displayed
});

Create a marker with desired properties.
Set up the "content" window for the marker, utilizing HTML content styled in CSS within the containing div.
Add an event listener to show the InfoWindow on the map when the marker is clicked, positioned where the marker is placed.

Unique Google Map Marker Description customization

Answer №1

Similar questions

Creating a Popup Window 2: Tips and Tricks

SQL - residual / non-inclusive

Query to extract working days from a pair of date columns in a SQL database

"Enhance your gaming experience with Three JS special effects

Encountering the "Component resolution failed" error in Vue 3 when using global components

What is the best way to display an AngularJS expression using a ternary operator?

"Improving website visuals with an HTML helper method for displaying

Angular click directive

A step-by-step guide on linking an ASP.NET website on IIS with its SQL Server database

Wait for another user keypress event in jQuery after a 0.5 second delay

Implementing Authorization token management with Axios in a Node.js environment

Troubleshooting problems with production builds in Angular 5 using Node.js Express

Sending a Single Input Field value to a Controller in Laravel using JQuery

Guide to creating a vertical handler that can be resized

Most effective method for organizing time series data per product within a single row in MySQL

React: Component failing to re-render despite update in array state (distinct from other cases)

Find all the different ways that substrings can be combined in an array

There is a discrepancy in the behavior of SignalR and UploadFromStreamAsync between IIS Express and Azure Free Websites

How to invoke a function in an isolated scope of AngularJS using JavaScript

Is it possible to insert a character before a particular word, while also replacing a character in the middle of that word using the .replace method in JavaScript?