Skip to content

Instantly share code, notes, and snippets.

Created March 15, 2018 01:35
Show Gist options
  • Save anonymous/63e92aa31952bf299df3f26375090181 to your computer and use it in GitHub Desktop.
Save anonymous/63e92aa31952bf299df3f26375090181 to your computer and use it in GitHub Desktop.
Info window with <code>maxWidth</code> (source: https://jsfiddle.net/fyhack/apsdrsyd/26/)
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
// The maximum width of the info window is set to 200 pixels.
function initMap() {
var elc = {
lat: 22.742148,
lng: 113.852663
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: elc
});
var contentString = '<div id="content">' +
'<h1 id="firstHeading" class="firstHeading">Elclcd</h1>' +
'<div id="bodyContent">' +
'<p>Founded in 2007,Electron is a leader manufacture in providing trusted advertising,self-service,DPF product width high-quality,high-perfermance.</p>' +
'<p>Offers <b>Hardware,Firmware,Software ID/ME</b> design service.</p>' +
'<p>Website: <a href="http://www.elclcd.com">' +
'http://www.elclcd.com</a> </p>' +
'</div>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 240
});
var marker = new google.maps.Marker({
position: elc,
map: map,
title: 'Elclcd'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment