Solved

Markers in Google Maps

Posted on 2016-07-31
2
169 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 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

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

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

If your app took Google’s lash recently, here are the 5 most likely reasons.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This Micro Tutorial demonstrates how to create custom reports and the secrets of determine the metrics and dimensions for your data that works best with your needs.
This Micro Tutorial will demonstrate common damaging and frequent mistakes I see in most analytic audits. Most of them are campaign tagging mistakes, so this video will break it down into simple steps.

749 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