0

I am using Ngmap in angular js , it works fine but there is requirement to have Image map in my html

Html Image Map : 

    <img class="map" src="demo_usa.png" width="960" height="593" usemap="#usa" usemap="#usa">
    <map name="usa">
        <area href="#" title="HI" shape="poly" coords="225,521, 227,518, 229,517, 229,518, 227,521, 225,521" ng-click="StateSelect(1)">
    </map>

the above tag show image map but it also show google map , i used ng-non-bindable on map tag , it solved the issue but it also disable ng-click="StateSelect(1)" on area tag .

Angular Ng-map

            <ng-map center="{{House.Latitude}},{{House.Lonitude}}">

                <shape name="circle" no-watcher="true"
                       stroke-color="#23b079"
                       stroke-opacity="0.8"
                       stroke-weight="2"
                       fill-color="#23b079"
                       fill-opacity="0.35"
                       center="{{House.Latitude}},{{House.Lonitude}}"
                       radius="300">
                </shape>

                @*<marker position="[{{House.Latitude}},{{House.Lonitude}}]"></marker>*@

            </ng-map>

Angular Ng-map work fine the problem is html Image map , it also show google map rather than html image map .

any solution ?

thank you .

Arash
  • 3,458
  • 7
  • 32
  • 50
  • [The reference documentation I found](https://ngmap.github.io/) indicates that you should likely be using the `ng-map` element and *not* the [`map` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map). – Makoto Mar 13 '16 at 08:29
  • i am using ng-map for google map . – Arash Mar 13 '16 at 08:31
  • Yes, you mentioned that, but I don't actually see you using `ng-map` anywhere. I see you using `map`, but *not* `ng-map`. – Makoto Mar 13 '16 at 08:31
  • above is actually an html image map .and i dont intend to show google map with that. – Arash Mar 13 '16 at 08:32
  • So what is the actual problem here? What you're showing us has nothing to do with ng-map directly. I would encourage you to post the more code so that we can help with the context of your actual use case. Without it, we're kind of lest grasping at straws. – Makoto Mar 13 '16 at 08:35

1 Answers1

0

I have got the same problem as you have got. You can terminate the map directive on your module config:

.directive('map', function(){
    return {
        priority: 99,
        terminal: true,
    };
})

Notices: by doing this, <map> will loss the ng-map capability and you have to use <ng-map> for google-map.

Pine Ng
  • 1