CODEWITHSUNDEEP
javascriptgoogle-mapsionic-frameworkionic3google-maps-markers
Myung
Myung

Reputation: 41

Add multiple markers on map on ionic 3

Does anyone know how to edit the code to show multiple markers on the map?

DisplayMap(){

  const location = new google.maps.LatLng('1.330110','103.854800');

  const options = {
    center:location,
    zoom:10,
    streetViewControl:false,
    mapTypeId:'satellite'

  };

  const map = new google.maps.Map(this.mapRef.nativeElement,options);

  this.addMarker(location,map);
}


addMarker(position,map){
  return new google.maps.Marker({
    position,
    map
  });
}

Upvotes: 1

Views: 156

Answers (2)

oividiosCaeremos
oividiosCaeremos

Reputation: 728

I assume you will be adding more and more markers on the map using a JSON file in the future. So this answer can stay here for when you need it.
First, if you are using this in a .NET project you can call a method from the controller side and use the returned data to add markers on the map;

But remember you must add jQuery into the page before using ajax to be able to use AJAX

$.ajax({
type:'GET',
url:'ControllerName/ActionName', // or you could specify an unique route from the routeconfig and use it
dataType: 'json',
success: function (data){
    // the data will be your json file, to use it in an array format
    // use JSON.parse(data)
    let resultArray = JSON.parse(data);
        for(let i = 0; i < resultArray.length; i++){
            var marker = new google.maps.Marker({
                  position: new google.maps.LatLng(resultArray[i].LATITUDE,
                      resultArray[i].LONGITUDE),
                  map: map
            });
        }
    }
});

And your controller should look like this;

[HttpGet]
public JsonResult GetAgencies()
{
    using (StreamReader reader = new StreamReader(@"yourJsonFilePath"))
    {
        return Json(reader.ReadToEnd(), JsonRequestBehavior.AllowGet);
    }
}

Or you could use fetch method that can be used without needing jQuery;

fetch(jsonUrl).then(function (response) {
        response.json().then(function (results) {
        for(let i = 0; i < results.length; i++){
            var marker = new google.maps.Marker({
                  position: new google.maps.LatLng(results[i].LATITUDE,
                      results[i].LONGITUDE),
                  map: map
            });
        }
   });
});

Upvotes: 1

evan
evan

Reputation: 5691

To add another marker, first create a second location const location2 = google.maps.LatLng('1.328120', '103.849639') and then add a new marker for that location this.addMarker(location2, map). Please see the code below:

DisplayMap() {

    const location = new google.maps.LatLng('1.330110', '103.854800');

    const options = {
        center: location,
        zoom: 10,
        streetViewControl: false,
        mapTypeId: 'satellite'

    };

    const map = new google.maps.Map(this.mapRef.nativeElement, options);

    this.addMarker(location, map);

    // this is a new, 2nd location
    const location2 = google.maps.LatLng('1.328120', '103.849639');

    // add 2nd marker for location2
    this.addMarker(location2, map);
}


addMarker(position, map) {
    return new google.maps.Marker({
        position,
        map
    });
}

Hope this helps!

Upvotes: 0

Related Questions