Maps API v3 Single infowindow

by Ryan Brackett

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=weather&amp;sensor=false"></script>
<div id="map_canvas"></div>

CSS

html, body {
    height:100%;
}
#map_canvas {
    width:100%;
    height:100%;
}

JavaScript

var map = null;
var infowindow = new google.maps.InfoWindow();

function initialize() {

    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(43.907787, -79.359741),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

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

    // Add markers to the map
    // Set up three markers with info windows
    
    var point;
    var points = [
		["Point 1", 43.65654, -79.90138],
		["Point 2", 43.91892, -78.89231],
		["Point 3", 43.82589, -79.10040]
		
		
		];
    point = new google.maps.LatLng(43.65654, -79.90138);
    createMarker(point, 'This is point 1');

    point = new google.maps.LatLng(43.91892, -78.89231);
    createMarker(point, 'This is point 2');

    point = new google.maps.LatLng(43.82589, -79.10040);
    createMarker(point, 'This is point 3');
		
		
		
		
		
		
		
		
}


function createMarker(latlng, html) {

    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });

    google.maps.event.addListener(marker, 'click', function () {

        infowindow.setContent(html);
        infowindow.open(map, marker);
    });
}

initialize();