Image map doesn't work good


Hi all,

I trying to create an image map with ionic but this image map is not responsive, everyone know a plugin or similar that allow me to create an image map responsive? I tryed this one but it doesn’t work.

Please help me :smile:

Integrating angularjs plugin in ionic

I’d like this too, for navigation in some sections of apps.


I just used this tool but if I install my app on my tablet the responsive of tool doesn’t work. probably I do some mistakes in my code?

So lets look it


<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta name="msapplication-tap-highlight" content="no" />

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/" rel="stylesheet">

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- cordova Native Audio plugin js-->
<script src="js/cordovaNativeAudio.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>

<!-- image map angular js -->
<script src="js/angular-rwdImageMaps.min.js"></script>

in my template.html

<img class="rwdimgmap" src="img/image.png" style="margin-top:10%;width:100%;height:auto;" usemap="#hangdrum">
    		<map name="hangdrum">
    			<area class="drum" id="A" shape="circle" coords="268,100,27" ontouchstart="'A');" ontouchend="audio.touchEnd(event);" onFocus="this.blur()">

in app.js

angular.module('starter', ['ionic', 'starter.controllers', 'rwdImageMaps'])

and finish… I don’t add no others lines of code for using this feature…


I think this is the integration with the ionic plugin for angularjs which is causing the problem. I copied past the example of the plugin utilisation. Everything worked fine until I added the ionic plugin to the module.

This work :

angular.module('map', ['rwdImageMaps']);

This is not working :

angular.module('map', ['rwdImageMaps', 'ionic']);

Looks like the ionic integration with angularjs is flawed.


There is only one line which is causing problems.




element.bind('load', my_resize());

And the image will be resized, as well as the map, on loading.

I failed to make it be resized every time the window is resized.

First impression with ionic

What is my_resize()?


use this plugin and simple code

     <img usemap="#image-map" src="/img/new/3.jpg" style="height:640;width: 100%;">
     <map name="image-map">
       <area shape="poly" alt="blue" title="blue" onclick="selectRegion('blue')"
       <area shape="poly" alt="yellow" title="yellow" onclick="selectRegion('yellow')"
       <area shape="poly" alt="pink" title="pink" onclick="selectRegion('pink')"
       <area shape="poly" alt="orange" title="orange" onclick="selectRegion('orange')"
       <area shape="poly" alt="orange" title="orange" onclick="selectRegion('orasssnge')"
       <area shape="poly" alt="orange" title="orange" onclick="selectRegion('owefwerasssnge')"


       function selectRegion(srt) {