troubleshooting Question

Markers in Google Maps

Avatar of ank5
ank5Flag for India asked on
MobileGoogle WorkspaceJavaScriptAngular
2 Comments1 Solution358 ViewsLast Modified:
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

http://www.joshmorony.com/part-1-using-the-http-service-in-ionic-to-dynamically-load-google-map-markers/

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

$cordovaGeolocation.getCurrentPosition(options).then(function(position){

Code for loading the markers is as  follows

 .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);
        }
      });
    }
ASKER CERTIFIED SOLUTION
dgrafx

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros