CODEWITHSUNDEEP
angularjsgoogle-mapsngcordova
user1536396
user1536396

Reputation: 499

ngcordova angularjs geolocation google maps (no ionic)

I would like to learn how to display a Google map with some custom markers using ngcordova angularjs but no ionic framework.

Could you point me to a comprehensive tutorial for beginners (no missing steps) that explains how to do it, please?

Thank you very much

Upvotes: 1

Views: 152

Answers (2)

Anurag Pandey
Anurag Pandey

Reputation: 744

its work in app as well as browser. 1. add google map script in in index.html

 <script type="text/javascript" src="http://maps.google.com/maps/api/js">
</script>

  1. in html side

    < div align = "center" > < div id = "map" style = "width:100%;height:200px" > < /div> < /div>

3 in script side 

var latlng = {
lat: 12.34343,
lng: 34.12313
 };
var map;

 function initMap(latlng) {
   var map = new google.maps.Map(document.getElementById('map'), {
    center: latlng,
    scrollwheel: false,
    zoom: 14,
    dragging: false,
    scrollwheel: false,
    draggable: false,
    zoomControl: false,
    disableDoubleClickZoom: true,
    keyboardShortcuts: false,
    panControl: false,
    streetViewControl: false,
    disableDefaultUI: false
  });
   var cityCircle = new google.maps.Circle({
    strokeColor: '#F2F2F2',
    strokeOpacity: 0.7,
    strokeWeight: 2,
    fillColor: '#0DCCC0',
    fillOpacity: 0.7,
    map: map,
    center: latlng,
    radius: Math.sqrt(5) * 100
   });
 }

4. call initMap(latlng)

its work fine in my app and browser. and best benefit its design on marker. just like a Circle.

Upvotes: 1

vp-platform
vp-platform

Reputation: 601

You have several alternatives:

  • you can simply use an Angular module such as ngMap, and in this case you don't need a tutorial but their documentation. There you can find all kind of example.

  • you can adopt a Cordova Plugin like cordova-plugin-googlemaps which has a specific tutorial in the documentation

  • search also here on SO for example: angular-js-and-google-maps

Upvotes: 1

Related Questions