?
Solved

Markers in Google Maps

Posted on 2016-07-31
2
Medium Priority
?
225 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
2 Comments
 
LVL 25

Accepted Solution

by:
dgrafx earned 2000 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

Put Machine Learning to Work--Protect Your Clients

Machine learning means Smarter Cybersecurity™ Solutions.
As technology continues to advance, managing and analyzing massive data sets just can’t be accomplished by humans alone. It requires huge amounts of memory and storage, as well as high-speed processing of the cloud.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
With the rapid rise in mobile usage, mobile devices are here to stay and have become an integral part of doing business. Here are 9 great apps for your BYOD environment.
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 using Google Doc how to import live data to another spreadsheet in Google Spreadsheets using the IMPORTRANGE function.
Suggested Courses
Course of the Month10 days, 9 hours left to enroll

765 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