Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>Info windows</title>
    <style type="text/css">/* 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;
      }
    </style>
</head>
<body>
<div id="map"></div>
<script>
​
      // This example displays a marker at the center of Australia.
      // When the user clicks the marker, an info window opens.
​
      function initMap() {
        var hc = {lat: 40.4512, lng: -85.3700};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: hc
        });
​
        var rawData = '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"info-window-header":"Hartford City","info-window-content":"Display Weather Data Here!"},"geometry":{"type":"Point","coordinates":[-85.37029266357422,40.45138852013111]}}]}';
​
        var data = JSON.parse(rawData);
​
        var contentString = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">' + data.features[0].properties['info-window-header'] + '</h1>'+
            '<div id="bodyContent">'+
            '<p><b>'+ data.features[0].properties['info-window-content'] + '</p>'+
            '</div>'+
            '</div>';
​
        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });
​
        var marker = new google.maps.Marker({
          position: hc,
          map: map,
          title: 'Hartford City'
        });
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
      }
    </script><script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCz672JUYjod6zzfxnBg_rzBNsBfbbjpJc&callback=initMap">
    </script></body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ivdekovpro
0viewers