CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
user2731223
user2731223

Reputation: 114

Add infowindow for existing markers in google maps API

I am working with Google Maps API in javascript. I am able to find a route from one point to another. However, I need to edit the infowindow that is shown for the markers on the locations. The default info that is shown shows you the name of the place, is there a way to change that info to show something else?

Upvotes: 0

Views: 742

Answers (1)

Olivercodes
Olivercodes

Reputation: 1058

Yes you can do all kinds of things with info windows:

See https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple for reference.

An example of some custom html in an infowindow :

var infoWindowContent = '<div id="map-player-info-content">' +
    '<img class="player-pic" ng-src="' + (playerList[i].profilePic || 'img/smash-app-icon.png') + '">' +
    '<p><span class="text-bold">Player:</span> ' + playerList[i].tag + '</p>' +
    '<p><span class="text-bold">Game(s):</span> ' + playerList[i].games + '</p>' +
    '<p><span class="text-bold">Main(s):</span> ' + playerList[i].mains + '</p>' +
    '</div>';

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

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Uluru (Ayers Rock)'
});

google.maps.event.addListener(marker, 'click', function () {
    infowindow.open(map, marker);
});

Upvotes: 2

Related Questions