Last active
December 23, 2015 00:39
-
-
Save seti123/6555632 to your computer and use it in GitHub Desktop.
Google Maps marker update from angular controller, iframe embedded in bootstrap tab (which cause normally "trouble" in repainting map
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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 .. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment