I am working on an Ionic app in which I need to plot some markers. I referred to the below tutorial for setting markers and the markers appear as expected
The problem that I am facing is that, when the map loads by default it shows my current location. So, if the markers are in a different location, user has to zoom in ti view the location where the markers are located. I want the the markers to appear as soon as the map is loaded.
I think this problem is due to the following code but can't make out what would be the alternative
.factory('GoogleMaps', function($cordovaGeolocation, Markers){ var apiKey = false; var map = null; function initMap(){ var options = {timeout: 10000, enableHighAccuracy: true}; $cordovaGeolocation.getCurrentPosition(options).then(function(position){ var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var mapOptions = { center: latLng, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map"), mapOptions); //Wait until the map is loaded google.maps.event.addListenerOnce(map, 'idle', function(){ //Load the markers loadMarkers(); }); }, function(error){ console.log("Could not get location"); //Load the markers loadMarkers(); }); } function loadMarkers(){ //Get all of the markers from our Markers factory Markers.getMarkers().then(function(markers){ console.log("Markers: ", markers); //var records = markers.data.result; var records = markers.data; for (var i = 0; i < records.length; i++) { var record = records[i]; var markerPos = new google.maps.LatLng(record.lat, record.lng); // Add the markerto the map var marker = new google.maps.Marker({ map: map, animation: google.maps.Animation.DROP, position: markerPos }); var infoWindowContent = "<h4>" + record.name + "</h4>"; addInfoWindow(marker, infoWindowContent, record); } }); }
here's your function with 3 lines I've added - /*this line*/ denotes the added lines
function loadMarkers(){//Get all of the markers from our Markers factoryMarkers.getMarkers().then(function(markers){console.log("Markers: ", markers);//var records = markers.data.result;var records = markers.data;for (var i = 0; i < records.length; i++) {var record = records[i];var markerPos = new google.maps.LatLng(record.lat, record.lng);var bounds = new google.maps.LatLngBounds();/*this line*/// Add the markerto the mapvar marker = new google.maps.Marker({ map: map, animation: google.maps.Animation.DROP, position: markerPos});bounds.extend(markers[i].getPosition());/*this line*/var infoWindowContent = "<h4>" + record.name + "</h4>";addInfoWindow(marker, infoWindowContent, record);}});map.fitBounds(bounds);/*this line*/}
Open in new window