seti123/map-controller (angular)

## map-controller (angular)
// this is snipped inside the angular controller, which got geo positions after loading data from a REST source ...
for (var i=0; i<list.length; i++)
{
  var opts = {"title": list[i].title};
  var marker={};
  if (list[i].latitude  && list[i].longitude )
  {
  	// this is not a google marker, just save pos/title in an object
  	marker = {lat: list[i].latitude,
  			  lon: list[i].longitude,
  			  title: opts.title};
  	tmpMarkers.push(marker);
  }
}
// Here is the trick to pass marker information to Google Map page embedded in <iframe id="mapFrame" src="map.html">
// in HTML file
if (window.frames['mapFrame'])
 window.frames['mapFrame'].setMarkers(tmpMarkers);
$scope.markers= tmpMarkers; // just if we need it in other parts of the angular app ..

## map.html
<html>
<head>
  <script src="common/lib/jquery.min.js"></script>
	<script src="https://maps.google.com/maps/api/js?sensor=false&key=MYAPIKEY"></script>
	<script type="text/javascript" src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>
	<style>
	.map-canvas { height: 100%; height:100%}
	</style>
</head>

<div id="map-canvas" class="map-canvas"> </div>

</body>
<script>
var map=null; // make it accesible in setMarkers, init in initialize ()
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 // window.alert('map init'); // check if function is called from angular controller :)
 google.maps.event.trigger( map, 'resize' );
}
google.maps.event.addDomListener(window, 'load', initialize);

// Removes the overlays from the map
var markersArray = [];
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
  markersArray = [];
}

function setMarkers(markers)
{
	// avoid adding only markers, we reset the overlays
	if (markersArray.length>0)
		clearOverlays();
	// add markers to map
	if (markers.length>0)
	{
		var newMarkers = markers.map (function (e) {
			 var latLng = new google.maps.LatLng(e.lat, e.lon);
			 var marker = new google.maps.Marker({
			 		map: map,
	            	position: latLng,
	            	title: e.title});
			 return marker;
			});
			map.panTo (newMarkers[0].position);
		var markerCluster = new MarkerClusterer(map, newMarkers);
		// save it to clean
		markersArray = newMarkers;
	}
	//window.alert ('got new marker');
}
</script>
<body>
<html>
	// this is snipped inside the angular controller, which got geo positions after loading data from a REST source ...
	for (var i=0; i<list.length; i++)
	{
	var opts = {"title": list[i].title};
	var marker={};
	if (list[i].latitude && list[i].longitude )
	{
	// this is not a google marker, just save pos/title in an object
	marker = {lat: list[i].latitude,
	lon: list[i].longitude,
	title: opts.title};
	tmpMarkers.push(marker);
	}
	}
	// Here is the trick to pass marker information to Google Map page embedded in <iframe id="mapFrame" src="map.html">
	// in HTML file
	if (window.frames['mapFrame'])
	window.frames['mapFrame'].setMarkers(tmpMarkers);
	$scope.markers= tmpMarkers; // just if we need it in other parts of the angular app ..
	<html>
	<head>
	<script src="common/lib/jquery.min.js"></script>
	<script src="https://maps.google.com/maps/api/js?sensor=false&key=MYAPIKEY"></script>
	<script type="text/javascript" src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>
	<style>
	.map-canvas { height: 100%; height:100%}
	</style>
	</head>

	<div id="map-canvas" class="map-canvas"> </div>

	</body>
	<script>
	var map=null; // make it accesible in setMarkers, init in initialize ()
	function initialize() {
	var mapOptions = {
	zoom: 8,
	center: new google.maps.LatLng(-34.397, 150.644),
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	// window.alert('map init'); // check if function is called from angular controller :)
	google.maps.event.trigger( map, 'resize' );
	}
	google.maps.event.addDomListener(window, 'load', initialize);

	// Removes the overlays from the map
	var markersArray = [];
	function clearOverlays() {
	if (markersArray) {
	for (i in markersArray) {
	markersArray[i].setMap(null);
	}
	}
	markersArray = [];
	}

	function setMarkers(markers)
	{
	// avoid adding only markers, we reset the overlays
	if (markersArray.length>0)
	clearOverlays();
	// add markers to map
	if (markers.length>0)
	{
	var newMarkers = markers.map (function (e) {
	var latLng = new google.maps.LatLng(e.lat, e.lon);
	var marker = new google.maps.Marker({
	map: map,
	position: latLng,
	title: e.title});
	return marker;
	});
	map.panTo (newMarkers[0].position);
	var markerCluster = new MarkerClusterer(map, newMarkers);
	// save it to clean
	markersArray = newMarkers;
	}
	//window.alert ('got new marker');
	}
	</script>
	<body>
	<html>