Solved

Markers in Google Maps

Posted on 2016-07-31
2
160 Views
Last Modified: 2016-08-27
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){

Open in new window


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);
        }
      });
    }

Open in new window

0
Comment
Question by:ank5
  • 2
2 Comments
 
LVL 25

Accepted Solution

by:
dgrafx earned 500 total points
ID: 41738090
Incorporate this concept
var markers = [];//some array
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
 bounds.extend(markers[i].getPosition());
}

map.fitBounds(bounds);

Open in new window

0
 
LVL 25

Expert Comment

by:dgrafx
ID: 41757280
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 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);
var bounds = new google.maps.LatLngBounds();/*this line*/
// Add the markerto the map
var 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

0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Ensuring effective and secure communication in the age of healthcare BYOD.
Ransomware is a growing menace to anyone using a computer or mobile device. Here are answers to some common questions about this vicious new form of malware.
Along with being a a promotional video for my three-day Annielytics Dashboard Seminor, this Micro Tutorial is an intro to Google Analytics API data.
This Micro Tutorial will demonstrate how to use comments in Google Docs. You will learn how to create, edit, and delete a comment.

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question