1

I have a list of Latitudes and longitudes obtained from my API; this is an AngularJS application. I want the user to see a google map showing the position of these coordinates on the map.

I have looked into iFrame but it shows a blank page because I cannot update these lat and lng.

So how can I implement google maps on my application where when selected coordinates it will show a map with the marker of where those coordinates are.

Do I need a controller? With AngularJS directives how would I use them? I am completely new to AngularJS.

Graham
  • 7,431
  • 18
  • 59
  • 84
Roxci William
  • 85
  • 8

2 Answers2

1

You can use the Google maps API. Just enter the lat long coordinates, based on the user's input. This should get you started: https://developers.google.com/maps/documentation/javascript/tutorial?hl=nl

Here you can find the angular js directives to integrate google maps into your application: https://angular-ui.github.io/angular-google-maps/#!/

UPDATE

I created an example for you, I think this is what you are looking for:

google mapshttp://plnkr.co/vcx6dIUSa0MsjTWXCkIV?p=preview

Rob Angelier
  • 2,335
  • 16
  • 29
  • But how would this work? As I thought if i could find api for searching a place by lat and lng, I could simply do /URI/{{lat}},{{lng}}. Is there not any way of doing this. As I am very new to angular, I do not understand how this would work? Also if i use directive, which one will i need to use as there is no search directive on the site – Roxci William Aug 13 '14 at 13:57
  • You would need to call the api and let it return the lat long coordinates for the place your looking for. Google is your Friend to look this up, enough examples available out there. Hint: http://stackoverflow.com/questions/3617227/how-can-i-get-latitude-longitude-of-a-location-programmatically-or-using-a-api – Rob Angelier Aug 13 '14 at 15:05
  • well now I have the coordinates already. That is obtained through my own API. I need to just search them. I have managed to redirect the user to google maps by using "http://maps.google.com/?q=MY%20LOCATION@{{place.place.lat}},{{place.place.lng}}" but I want the map to be shown on the same page rather than redirecting the user. I cannot find anything like this on Google. – Roxci William Aug 13 '14 at 15:08
  • You need to bind a object with lat&long property on your controller to the google-map center directive property and update the property if somebody commits a search. – Rob Angelier Aug 13 '14 at 15:14
  • How would I do this as I don't quite understand this I am very new to Javascript/Angualr – Roxci William Aug 13 '14 at 15:15
  • so binding would be with "ng-model"? But I don't quite understand how to bind with google map center and how to update this – Roxci William Aug 13 '14 at 15:17
  • I can show you tomorrow, don't have time at the moment and i'm not behind a computer. – Rob Angelier Aug 13 '14 at 15:18
  • Okay Thanks I would really appreciate the help. Is there any way I can hold of you? – Roxci William Aug 13 '14 at 15:20
  • Are you available to help now? – Roxci William Aug 14 '14 at 08:53
  • www.chatstep.com/#Angular – Rob Angelier Aug 14 '14 at 09:13
  • I have joined the chat – Roxci William Aug 14 '14 at 09:18
  • Are you available to help today? I have a problem with the same question but cannot connect to the chat – Roxci William Aug 15 '14 at 11:44
0

its easy just

  1. Goto : https://www.google.com/maps/preview
  2. search the desired location
  3. login your google account
  4. share and embed map your google account
  5. copy paste the code you get in to you html

enter image description here

hope this helps

Itachi Sama
  • 886
  • 1
  • 6
  • 18
  • This does not help as I can do this but it would only have fixed latitude and longitude which I do not want. I have a list of coordinates every single time the user clicks on it I want the map to show that location by passing different coordinates each time. – Roxci William Aug 13 '14 at 14:02