3

Iam working on an Ionic project where the requirement is to add google map in an ionic page with multiple markers. I followed some of the youtube tutorials and got succeeded in adding google map with one location marker. I want to add multiple location markers with different latitude and longitude values.

Below is the code i tried.

HTML:

<ion-content>
<div #mapElement class="map"></div>
</ion-content>

TS:

import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 declare var google;

 @Component({
 selector: 'app-test',
 templateUrl: './test.page.html',
styleUrls: ['./test.page.scss'],
})
export class TestPage implements OnInit {
 @ViewChild('mapElement', {static:true}) mapRef: ElementRef;
 constructor() { }

  ngOnInit() {
  }

   ngAfterViewInit() {
  const location = new google.maps.LatLng(17.385044,
  78.486671);

    const options = {
   center:location,
   zoom:10,
   streetViewControl:false,
   mapTypeId:'hybrid'
   };

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

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

}

Please help me how can i add diffent markers for bangalore, chennai, mumbai locations with their latitude and longitude values.

thank you.

Improve this question
3
  • If you are using Ionic I recommend you use the native Google Maps plugin instead of the plain JavaScript API. See here for how to install and here for an example with markers Commented Sep 20, 2019 at 5:31
  • thank you @ andypotato, i will try this and let u know Commented Sep 20, 2019 at 5:38
  • Hi @andypotato, its not working for me. iam newbie to ionic. can you please help with some ounces of code. thank you Commented Sep 20, 2019 at 6:24

1 Answer 1

Reset to default
1

As has been advised, your best bet is to get the ionic native component working as it is angular/ionic-aware and will avoid issues, like you have already experienced trying to get the

The first thing you need to be sure of though, with the way that you are trying, is that you have

  1. added the snippet to include the script
  2. got yourself a proper key setup

Add the snippet

Look in index.html, you should put this right before the end of </body>

<!--Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
-->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Taken from these docs.

Get an API Key

Google Maps is only partially free these days. You get something like $300 of usage a month but:

  • you must have an API Key,
  • you must have a credit card / billing method on the account,
  • and you should restrict the API key to only work with your website / app so that others cannot take your api key and use it on their own website

This is all explained in detail in these docs.

Adding multiple markers

Make some locations:

const locations: any[] = [];
locations.push(new google.maps.LatLng(17.385044, 78.486671));
locations.push(new google.maps.LatLng(17.384412, 78.486671));
locations.push(new google.maps.LatLng(16.312344, 78.486671));
locations.push(new google.maps.LatLng(18.385010, 78.486671));

Loop the locations and add them:

for(let i = 0; i < locations.length; i++) {
  this.addMarker(locations[i],map);
}

Still having problems?

Then you need to explain more clearly what the specific error is.

It's not respectful to just vaguely say it doesn't work and leave us to spend our time guessing what could possibly be wrong out of a million things.

People are happy to help, but you have to make it easy for them.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Hi @ rtpHarry, thank you for your answer. As described in your answer i used google maps api and generated an api key. Its working fine with displaying the map in the ionic page with one location marker. now i want to add multiple markers in the same map. please assist me on this. thank you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.