Gene Gene - 7 months ago 146
Javascript Question

Ionic 2: Map markers not appearing

I'm trying to display a map marker with no avail.

Constructor:

constructor(navController, platform, app) {
this.navController = navController;
this.platform = platform;
this.app = app;

platform.ready().then(() => {
this.initializeMap();
});
}


Logic:

initializeMap() {

Geolocation.getCurrentPosition().then((resp) => {
console.log("Lat: ", resp.coords.latitude);
console.log("Long: ", resp.coords.longitude);
});

let locationOptions = {timeout: 30000, enableHighAccuracy: true};
navigator.geolocation.getCurrentPosition(

(position) => {

let options = {
// /new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
setMyLocationEnabled: true
}

this.map = new google.maps.Map(document.getElementById("map_canvas"), options);

},

(error) => {
console.log(error);
}, locationOptions
);

var myLatLng = new google.maps.LatLng(1.290270,103.851959);

var marker = new google.maps.Marker({
position: myLatLng,
title: 'Hello World!',
});
var map = google.maps.Map(document.getElementById("map_canvas"));
marker.setMap(map);

}


Everything works fine just the map marker is not appearing.

I tried to create a new instance of the map and setting the other map's z-index to 1 but it's not appearing too.Even putting the whole marker function inside the inner function doesn't work too.

I'm guessing it might have to do with my "var map" is unable to locate map_canvas. How do I do it in this case?

Update:
Even after following Will's suggestion and trying with or without setInterval, the marker does not appear too.

var myVar = setTimeout(myFunction, 5000);
function myFunction(){
var myLatLng = new google.maps.LatLng(1.290270,103.851959);

var marker = new google.maps.Marker({
position: myLatLng,
title: 'Hello World!',
});

console.log("poof");
marker.setMap(this.map);
}


Update 2:
In my css, I add the following lines of code which cause my markers not to appear.

div{
max-width:100%;
max-height:100%;
}


Removing it with Will's answer works.

Answer

I haven't used Google Map like this in Ionic 2 but this is where it looks like you are going wrong...

What you are doing is:

  1. Getting the geolocation (asynchronously)
  2. Creating the map and assigning it to this.map in the geolocation callback
  3. Creating the marker and assigning it to var map;

The first problem with this is point 2 only happens when the asynchronous callback of point 1 is finished. At this point step 3 has already fired so you are technically adding the marker to nothing.

The second problem is you are setting the marker to a different variable than what you set the map to so it wouldn't display the marker anyway.

What you need to do is:

  1. Initialise the Google map
  2. Make your asynchronous geolocation call
  3. Set your geolocation callback result to center the map
  4. Create your map marker and set it to this.map

This way regardless of whether step 3 runs before step 4 (because of the asynchronous geolocation call) your map is already initialised and the marker will appear.

So your code should look more like this (may not be completely correct but the order of doing things should be right)...

 initializeMap() {
   Geolocation.getCurrentPosition().then((resp) => {});

   //initialise map
   let options = {
     zoom: 16,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     disableDefaultUI: true,
     setMyLocationEnabled: true
   }    
   this.map = new google.maps.Map(document.getElementById("map_canvas"), options);

   //get geolocation and set center
   let locationOptions = { timeout: 30000, enableHighAccuracy: true };       
   navigator.geolocation.getCurrentPosition((position) => {
     //setCenter should be a method to let you dynamically change the center of the map
     this.map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
   }, (error) => {}, locationOptions);

  //create marker and set to initialised map
  var myLatLng = new google.maps.LatLng(1.290270, 103.851959);
  var marker = new google.maps.Marker({ position: myLatLng, map: this.map, title: 'Hello World!'});
 }
Comments