<style>
body{
padding:20px
font-family: Arial;
font-size: 16px;
}
#map-canvas, #side-bar {
height: 500px;
width: 600px;
}
pre {
border:1px solid #D6E0F5;
padding:5px;
margin:5px;
background:#EBF0FA;
}
/* fix for unwanted scroll bar in InfoWindow */
.scrollFix {
line-height: 1.35;
overflow: hidden;
white-space: nowrap;
}
table{
border-collase:collapse;
}
table td {
border:1px solid lightgrey;
padding:5px;
}
td.clSidebar{
vertical-align: text-top;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
"use strict";
$( document ).ready(function() {
// variable to hold a map
var map;
// variable to hold current active InfoWindow
var activeInfoWindow ;
// array to hold copy of markers
var gmarkers = [];
// ------------------------------------------------------------------------------- //
// initialize function
// ------------------------------------------------------------------------------- //
function initialize() {
// map options - lots of options available here
var mapOptions = {
zoom : 10,
draggable: true,
center : new google.maps.LatLng(44.9600, -93.1000),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map in div called map-canvas using map options defined above
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// define three Google Map LatLng objects representing geographic points
var stPaul = new google.maps.LatLng(44.95273,-93.08915);
var minneapolis = new google.maps.LatLng(44.97994,-93.26630);
var falconHeights = new google.maps.LatLng(44.9917,-93.1664);
// place markers
fnPlaceMarkers(stPaul,"St Paul",'../img/icon-1.png');
fnPlaceMarkers(minneapolis,"Minneapolis",'../img/icon-2.png');
fnPlaceMarkers(falconHeights,"Falcon Heights",'../img/icon-3.png');
}
// ------------------------------------------------------------------------------- //
// create markers on the map
// ------------------------------------------------------------------------------- //
function fnPlaceMarkers(myLocation,myCityName,myIcon){
var marker = new google.maps.Marker({
position: myLocation,
icon: myIcon
});
// Renders the marker on the specified map
marker.setMap(map);
// create an InfoWindow - for mouseover
var infoWnd = new google.maps.InfoWindow();
// create an InfoWindow - for mouseclick
var infoWnd2 = new google.maps.InfoWindow();
// add content to your InfoWindow
infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + '</div>');
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// adds city name on left bar
$('.clSidebar').append("<a href='#' data-marker='" + parseInt(gmarkers.length-1) + "'>"+myCityName+"</a><br/>");
//$('.clSidebar').append('<p><a href="javascript:launchInfoWindow(' + (gmarkers.length-1) + ')">' + myCityName + '<\/a></p>');
// -----------------------
// LISTENER - ON MOUSEOVER
// -----------------------
// add listener on InfoWindow for mouseover event
google.maps.event.addListener(marker, 'mouseover', function() {
// Close active window if exists - [one might expect this to be default behaviour no?]
if(activeInfoWindow != null) activeInfoWindow.close();
// Close info Window on mouseclick if already opened
infoWnd2.close();
// Open new InfoWindow for mouseover event
infoWnd.open(map, marker);
// Store new open InfoWindow in global variable
activeInfoWindow = infoWnd;
});
// -----------------------
// LISTENER - ON MOUSEOUT
// -----------------------
// on mouseout (moved mouse off marker) make infoWindow disappear
google.maps.event.addListener(marker, 'mouseout', function() {
infoWnd.close();
});
// --------------------------------------------
// LISTENER - ON CLICK EVENT
// --------------------------------------------
// add content to InfoWindow for click event
infoWnd2.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + '. <br/>This Infowindow appears when you click on marker</div>');
// add listener on InfoWindow for click event
google.maps.event.addListener(marker, 'click', function() {
//Close active window if exists - [one might expect this to be default behaviour no?]
if(activeInfoWindow != null) activeInfoWindow.close();
// Open InfoWindow - on click
infoWnd2.open(map, marker);
// Close "mouseover" infoWindow
infoWnd.close();
// Store new open InfoWindow in global variable
activeInfoWindow = infoWnd2;
});
// ----------------------------------------------------------------
// LISTENER - when user clicks the name name, show the infowindow
// ----------------------------------------------------------------
$( "table#mytable a" ).on( "click", function(event) {
// to do: for some reason when clicked, we atriggering this listener multiple times...
var myMarker = $(this).data('marker');
google.maps.event.trigger(gmarkers[myMarker], 'click')
});
}
// ------------------------------------------------------------------------------- //
// programmatically launch Infowindow - if we used function
// ------------------------------------------------------------------------------- //
function launchInfoWindow(x) {
google.maps.event.trigger(gmarkers[x], "click");
}
// ------------------------------------------------------------------------------- //
// initial load
// ------------------------------------------------------------------------------- //
google.maps.event.addDomListener(window, 'load', initialize);
});
</script>
<a href="../index.php">BACK</a><br>
<br/>
<h3>Simple Google Map with three markers displaying InfoWindows when text in sidebar is clicked</h3>
<p>This example illustrates a technique to add listener on text, that when clicked will trigger infoWindow</p>
<br/>
<table id='mytable'>
<tr>
<td>
<div id="map-canvas"></div>
</td>
<td class='clSidebar'></td>
<table>