Leslie Leslie - 1 month ago 6
Javascript Question

How to customise Info Window on multiple Polygons (Google Map V3)

I'm trying to create multiple polygons on google map api v3. Upon clicking on each polygon, an info window (customized) will pop up. Currently I'm only able to create the polygons with the info windows but able to customize it.

Currently the result looks like this.

Anyone knows how to remove the white background and the tail. I can't find the class/ID of that.

HTML

<div id="assets-map"></div>


JS

var map;
var infoWindow;



function initMap() {


map = new google.maps.Map(document.getElementById('assets-map'), {
zoom: 7,
center: {lat: 20.3344, lng: 94.8133},
scrollwheel: false,
mapTypeId: 'roadmap',
styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]

});

var mannFieldCoords = [
{lat: 20.3344, lng: 94.8133},
{lat: 20.3454, lng: 94.8539},
{lat: 20.1698, lng: 94.8856},
{lat: 20.1571, lng: 94.8903},
{lat: 20.1571, lng: 94.8833},
{lat: 20.1596, lng: 94.8820},
{lat: 20.1541, lng: 94.8736},
{lat: 20.1541, lng: 94.8695},
{lat: 20.2177, lng: 94.8352}
];

var a6Coords = [
{lat: 16.7500, lng: 93.3500},
{lat: 17.5000, lng: 93.3500},
{lat: 17.5000, lng: 94.5167},
{lat: 16.7500, lng: 94.3500}
];

var ior4Coords = [
{lat: 18.8083, lng: 95.2083},
{lat: 18.8083, lng: 95.2750},
{lat: 18.3500, lng: 95.3500},
{lat: 18.3500, lng: 95.2667}
];

var ior6Coords = [
{lat: 18.1667, lng: 95.3000},
{lat: 18.2833, lng: 95.3000},
{lat: 18.2833, lng: 95.3333},
{lat: 18.1667, lng: 95.3958}
];


var mannField = new google.maps.Polygon({
paths: mannFieldCoords,
strokeWeight: 0,
fillColor: '#374ea2',
fillOpacity: 0.8

});
mannField.setMap(map);
mannField.addListener('click', showArraysMF);


var a6 = new google.maps.Polygon({
paths: a6Coords,
strokeWeight: 0,
fillColor: '#374ea2',
fillOpacity: 0.8
});
a6.setMap(map);
a6.addListener('click', showArraysA6);


var ior4 = new google.maps.Polygon({
paths: ior4Coords,
strokeWeight: 0,
fillColor: '#374ea2',
fillOpacity: 0.8
});
ior4.setMap(map);
ior4.addListener('click', showArraysIor4);

var ior6 = new google.maps.Polygon({
paths: ior6Coords,
strokeWeight: 0,
fillColor: '#374ea2',
fillOpacity: 0.8
});
ior6.setMap(map);
ior6.addListener('click', showArraysIor6);

infoWindow = new google.maps.InfoWindow;

}




function showArraysMF(event) {

var vertices = this.getPath();

var contentString = '<div id="iw_container">' +
'<div class="iw_title">Mann Field <span>(52 sq-km)</span></div>' +
'<div class="iw_content">Performance Compensation Contract since 1996, extended for 11 years until August 2024</div>' +
"<a href='mann-field.html'><i class='fa fa-arrow-right' aria-hidden='true'></i></a>"
'</div>';

infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}

function showArraysA6(event) {

var vertices = this.getPath();

var contentString = '<div id="iw_container">' +
'<div class="iw_title">A-6 <span>(9830 sq-km)</span></div>' +
'<div class="iw_content">PSC signed in 2007, Pyi Thar-1 <strong>first gas discovery</strong> in Rakhine Foldbelt of Myanmar deepwaters</div>' +
"<a href='block-a6.html'><i class='fa fa-arrow-right' aria-hidden='true'></i></a>"
'</div>';

infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}


function showArraysIor4(event) {

var vertices = this.getPath();

var contentString = '<div id="iw_container">' +
'<div class="iw_title">IOR-4 <span>(380 sq-km)</span></div>' +
'<div class="iw_content">Brown field, re-development project governed by IPR contract</div>' +
"<a href='ior-4.html'><i class='fa fa-arrow-right' aria-hidden='true'></i></a>"
'</div>';

infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);

infoWindow.open(map);
}

function showArraysIor6(event) {

var vertices = this.getPath();

var contentString = '<div id="iw_container">' +
'<div class="iw_title">IOR-6 <span>(116 sq-km)</span></div>' +
'<div class="iw_content">Brown field, re-development project governed by IPR contract</div>' +
"<a href='ior-6.html'><i class='fa fa-arrow-right' aria-hidden='true'></i></a>"
'</div>';

infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);

infoWindow.open(map);
}

google.maps.event.addDomListener(window, 'load', initialize);


A codepen example of my work.

I tried following the tutorial on this but map doesn't show up.

Answer

If you want to customize the complete content of the InfoWindow, one option is to use a third party InfoWindow substitute, like InfoBox

proof of concept fiddle (from your example)

custom InfoBox on map

code snippet:

var map;
var ib;

function initMap() {
  map = new google.maps.Map(document.getElementById('assets-map'), {
    zoom: 6,
    center: {
      lat: 20.3344,
      lng: 94.8133
    },
    scrollwheel: false,
    mapTypeId: 'roadmap',
    styles: mapStyle
  });

  var mannField = new google.maps.Polygon({
    paths: mannFieldCoords,
    strokeWeight: 0,
    fillColor: '#374ea2',
    fillOpacity: 0.8
  });
  mannField.setMap(map);
  polygonClickHandler(mannField, '<div id="iw_container" class="gw_style_iw" >' +
    '<div class="iw_title">Mann Field <span>(52 sq-km)</span></div>' +
    '<div class="iw_content">Performance Compensation Contract since 1996, extended for 11 years until August 2024</div>' +
    "<a href='mann-field.html'><i class='fa fa-arrow-right' aria-hidden='true'></i></a>" +
    '</div>');

  var a6 = new google.maps.Polygon({
    paths: a6Coords,
    strokeWeight: 0,
    fillColor: '#374ea2',
    fillOpacity: 0.8
  });
  a6.setMap(map);
  polygonClickHandler(a6, '<div id="iw_container">' +
    '<div class="iw_title">A-6 <span>(9830 sq-km)</span></div>' +
    '<div class="iw_content">PSC signed in 2007, Pyi Thar-1 <strong>first gas discovery</strong> in Rakhine Foldbelt of Myanmar deepwaters</div>' +
    "<a href='block-a6.html'><i class='fa fa-arrow-right' aria-hidden='true'></i></a>" +
    '</div>');

  var ior4 = new google.maps.Polygon({
    paths: ior4Coords,
    strokeWeight: 0,
    fillColor: '#374ea2',
    fillOpacity: 0.8
  });
  ior4.setMap(map);
  polygonClickHandler(ior4, '<div id="iw_container">' +
    '<div class="iw_title">IOR-4 <span>(380 sq-km)</span></div>' +
    '<div class="iw_content">Brown field, re-development project governed by IPR contract</div>' +
    "<a href='ior-4.html'><i class='fa fa-arrow-right' aria-hidden='true'></i></a>" +
    '</div>');

  var ior6 = new google.maps.Polygon({
    paths: ior6Coords,
    strokeWeight: 0,
    fillColor: '#374ea2',
    fillOpacity: 0.8
  });
  ior6.setMap(map);
  polygonClickHandler(ior6, '<div id="iw_container">' +
    '<div class="iw_title">IOR-6 <span>(116 sq-km)</span></div>' +
    '<div class="iw_content">Brown field, re-development project governed by IPR contract</div>' +
    "<a href='ior-6.html'><i class='fa fa-arrow-right' aria-hidden='true'></i></a>" +
    '</div>')
  ib = new InfoBox();
}

function polygonClickHandler(polygon, contentString) {
  var boxText = document.createElement("div");
  boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: #bd2025; padding: 5px 10px; border-radius: 5px; font-size: 12px !important; color: #fff;";
  boxText.innerHTML = contentString;
  var myOptions = {
    content: boxText,
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
      opacity: 1.0,
      width: "200px"
    },
    closeBoxMargin: "10px 2px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
  };
  // var ib = new InfoBox(myOptions);
  polygon.addListener('click', function(evt) {
    ib.setOptions(myOptions);
    ib.setPosition(evt.latLng);
    ib.open(map);
  });

}
google.maps.event.addDomListener(window, 'load', initMap);

var mannFieldCoords = [{
  lat: 20.3344,
  lng: 94.8133
}, {
  lat: 20.3454,
  lng: 94.8539
}, {
  lat: 20.1698,
  lng: 94.8856
}, {
  lat: 20.1571,
  lng: 94.8903
}, {
  lat: 20.1571,
  lng: 94.8833
}, {
  lat: 20.1596,
  lng: 94.8820
}, {
  lat: 20.1541,
  lng: 94.8736
}, {
  lat: 20.1541,
  lng: 94.8695
}, {
  lat: 20.2177,
  lng: 94.8352
}];

var a6Coords = [{
  lat: 16.7500,
  lng: 93.3500
}, {
  lat: 17.5000,
  lng: 93.3500
}, {
  lat: 17.5000,
  lng: 94.5167
}, {
  lat: 16.7500,
  lng: 94.3500
}];

var ior4Coords = [{
  lat: 18.8083,
  lng: 95.2083
}, {
  lat: 18.8083,
  lng: 95.2750
}, {
  lat: 18.3500,
  lng: 95.3500
}, {
  lat: 18.3500,
  lng: 95.2667
}];

var ior6Coords = [{
  lat: 18.1667,
  lng: 95.3000
}, {
  lat: 18.2833,
  lng: 95.3000
}, {
  lat: 18.2833,
  lng: 95.3333
}, {
  lat: 18.1667,
  lng: 95.3958
}];

var mapStyle = [{
  "featureType": "water",
  "elementType": "geometry",
  "stylers": [{
    "color": "#e9e9e9"
  }, {
    "lightness": 17
  }]
}, {
  "featureType": "landscape",
  "elementType": "geometry",
  "stylers": [{
    "color": "#f5f5f5"
  }, {
    "lightness": 20
  }]
}, {
  "featureType": "road.highway",
  "elementType": "geometry.fill",
  "stylers": [{
    "color": "#ffffff"
  }, {
    "lightness": 17
  }]
}, {
  "featureType": "road.highway",
  "elementType": "geometry.stroke",
  "stylers": [{
    "color": "#ffffff"
  }, {
    "lightness": 29
  }, {
    "weight": 0.2
  }]
}, {
  "featureType": "road.arterial",
  "elementType": "geometry",
  "stylers": [{
    "color": "#ffffff"
  }, {
    "lightness": 18
  }]
}, {
  "featureType": "road.local",
  "elementType": "geometry",
  "stylers": [{
    "color": "#ffffff"
  }, {
    "lightness": 16
  }]
}, {
  "featureType": "poi",
  "elementType": "geometry",
  "stylers": [{
    "color": "#f5f5f5"
  }, {
    "lightness": 21
  }]
}, {
  "featureType": "poi.park",
  "elementType": "geometry",
  "stylers": [{
    "color": "#dedede"
  }, {
    "lightness": 21
  }]
}, {
  "elementType": "labels.text.stroke",
  "stylers": [{
    "visibility": "on"
  }, {
    "color": "#ffffff"
  }, {
    "lightness": 16
  }]
}, {
  "elementType": "labels.text.fill",
  "stylers": [{
    "saturation": 36
  }, {
    "color": "#333333"
  }, {
    "lightness": 40
  }]
}, {
  "elementType": "labels.icon",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "transit",
  "elementType": "geometry",
  "stylers": [{
    "color": "#f2f2f2"
  }, {
    "lightness": 19
  }]
}, {
  "featureType": "administrative",
  "elementType": "geometry.fill",
  "stylers": [{
    "color": "#fefefe"
  }, {
    "lightness": 20
  }]
}, {
  "featureType": "administrative",
  "elementType": "geometry.stroke",
  "stylers": [{
    "color": "#fefefe"
  }, {
    "lightness": 17
  }, {
    "weight": 1.2
  }]
}];
html,
body {
  height: 100%;
}
#assets-map {
  height: 100%;
  width: 100%;
}
.gm-style-iw {
  text-align: center;
  max-width: 200px;
  border-radius: 5px;
  background: #bd2025;
  padding: 5px 10px;
  color: #fff;
  top: 0 !important;
  left: 0 !important;
  font-size: 12px !important;
  a {
    color: #fff;
    margin-top: 10px;
    display: block;
  }
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="assets-map"></div>