1. How To Embed The Image Map Coderesponsive Image Map Creator Software
2. How To Use Image Map Generator
3. Image Map Responsive

There have been a lot of requests from the community about the ability to display a map in PowerApps. While we don’t yet have a Maps Control in PowerApps, we can use the Image Control to display maps – thankfully to Bing Maps OR Google Maps via the Bing Maps Imagery API & Google Static Maps API respectively.

Questions: I have an existing image map in a responsive html layout. Images scale according to browser size, but the image coordinates are obviously fixed pixel sizes.

1. This plugin is designed to easily create image maps (aka 'hotspots') on any image that you have inserted in CKEditor. After selecting an image you can draw over it the active areas that you want to link in that image, and you can use rectangles, circles or free form drawing.
2. Now I’m hunting down a responsive image map generator online. But as years have rolled by and my Dreamweaver or Adobe subscriptions have run out, the one thing I really miss is a good replacement for my trusty Dreamweaver image map generator software. Since HTML 3.2 image maps have been really useful for an alternative navigation.

Map scenarios

Here are the scenarios that we will build today using the Image Control:

1. Display a map for a given named location or address
2. Display a map for the current GPS location of the device
3. Zoom In / Zoom Out using a Slider
4. Navigate to the Maps app or Web Page when clicked

Preparation

Get the Bing Maps API Key by visiting this URL OR the Google Static Maps API Key by visiting this URL. Note down the Key for use later in the tutorial.

In the PowerApps Studio or Web, Create a New Blank app (pick either Phone or Tablet layout as per your need).

Add a Configuration Screen

We’ll first create a Configuration Screen to store some information which can be used by other screens in the app. Rename the Screen1 to ConfigurationScreen from the Tree view on the left side.

Insert a Text input control from the Insert Tab > Text > Text input

Rename the control from TextInput1 to txtBingMapsKey (If you want to use the Bing Maps API) or txtGoogleMapsKey (if you want to use Google Maps API). ChangeHintText to “Enter Maps Key here” and the Default to the ACTUAL KEY value from the Bing Maps or the Google Maps site from the first step of this tutorial.

Insert another Text input control from the Insert tab > Text > Text input. Rename this control to txtImageWidth, change Hint Text to “Enter Maps Image Width here”, change Default to “600” (if phone layout) or “1200” (if tablet layout), change Format to Number from the Properties pane on the right.

Copy the txtImageWidth (CTRL + C) and Paste (CTRL + V) in the same screen to create a copy. Rename the control to txtImageHeight, change the Hint Text to “Enter Maps Image Height here”, change Default to “300” (for phone layout) and “600” (for tablet layout).

Add the Main Screen

Insert > New Screen > Blank layout.

Rename the Screen2 to MainScreen.

Move the MainScreen Up by clicking on the Move Up icon in the context menu

Insert > Media > Image control to add a new Image to the screen.

Rename the control from Image1 to imgMapControl. Set the Width to txtImageWidth and Height to txtImageHeight.

Scenario 1: Display a map for a given named location or address

Let’s insert a Text input control to enter the location or address for the map: Insert Tab > Text > Text input. Rename the control to txtLocation. Move it to a location in the screen where appropriate.

Change Hint Text as “Enter a location or address” and keep Default as an empty string “” or your favorite location – for e.g. Times Square, New York, Seattle etc…

For rendering the Map, use the following formula in the Image property of the imgMapControl :

For Bing Maps Use:

Bing Maps: Refer to the Get a Static Map article for examples and other parameters.

For Google Maps Use:

Google Maps: Refer to examples and parameters in the Google Static Maps Developer Guide.

Here are the screenshots for the Location: Space Needle, Seattle using Bing Maps:

And here is the same location using Google Maps (note the size is restricted to 640×640 in Google Maps, as I am using a Free version of the API):

Playing with some of the options

Changing ImagerySets (Bing Maps) and Map Types (Google Maps):

Bing Maps supports multiple imagerySets. Lets add a dropdown to see the effect of changing these imagerySets.

Insert > Controls > Dropdown to add a dropdown. Rename the control to drpBingImagerySets. Set the Items property to the following:

Change the formula in the Image property of the imgMapControl to include the imagerySet option :

Google Maps supports four types of maptypes. Lets add a dropdown to see the effect of changing these types.

Insert > Controls > Dropdown to add a dropdown. Rename the control to drpGoogleMaptypes. Set the Items property to the following:

Change the formula in the Image property of the imgMapControl to include the maptype option :

These Map APIs are pretty powerful and I am sure, you will be tempted to try out other options available for customization. For now let’s move on to the next scenario:

Scenario 2: Display a map for the current GPS location of the device

PowerApps provides native access to Device Signals such as Location (GPS), Acceleration, Compass, etc. Let’s use the Location signal to show the current location on a map.

For that, we shall use the same txtLocation Text input to display the GPS coordinates if we select a Toggle to use GPS Location.

Insert > Controls > Toggle to insert a Toggle control on the screen. Rename it to tglGPSLocation.

Insert > Label to insert a Label control on the screen. Move it next to the Toggle and rename it to lblGPSLocation. Change the Text to “Use GPS Location:”.

Change the Default of the txtLocation Input text to this formula:

For Bing Maps, change the formula in the Image property of the imgMapControl to include the centerpoint & pushpin options (Note we have to add the zoomLevel as well):

For Google Maps, change the formula in the Image property of the imgMapControl to include the center & markers options (Note we have to add the zoomLevel as well):

Scenario 3: Zoom In / Zoom Out using a Slider

Moving the final scenario, lets add a Slider control to control the Zoom level. Insert > Controls > Slider. Rename the Slider1 to slZoom. Change Default to 15, Min to 1 & Max to 21.

Add a Label next to the slider to denote the zoom level. Insert > Label. Rename the Label to lbZoom. Change Text to : “Zoom (1-21):”.

For Bing Maps, change the formula in the Image property of the imgMapControl to include the zoomLevel from the slider.

For Google Maps, change the formula in the Image property of the imgMapControl to include the zoomLevel from the slider.

Scenario 4: Navigate to the Maps app or Web Page when clicked

How To Embed The Image Map Coderesponsive Image Map Creator Software

Lastly, lets add the navigation step when clicked on the image to open up the respective web page or app.

For Bing Maps, add the following Formula in the OnSelect for the imgMapControl:

Refer to this article for details: https://docs.microsoft.com/en-us/windows/uwp/launch-resume/launch-maps-app

For Google Maps, add the following Formula in the OnSelect for the imgMapControl:

Refer to this article for details: https://developers.google.com/maps/documentation/urls/guide

Download the Sample App

Download the Sample App from here. Rename the downloaded zip file to SampleMapsApp.msapp and open using PowerApps Studio. Enjoy !

Give your website, event, or blog post the impact it deserves with an interactive location map. Readers can make much more sense of geography when it’s plotted visually. Think through your own experiences navigating a festival, a tour, or just across town. It’s just easier to understand how places relate to one another when you can see them spatially.

View Santa Monica Mechanics (Location Names) in a full screen map

The good news is it’s easier than ever to be able to create these maps. In this tutorial we’ll create one like above, complete with clickable markers that show infowindow boxes and even have custom images inside.

Include a Description and Other Text in Your Pop-up

The easiest way to get started is to use an Excel spreadsheet (Numbers, Google Sheets, and others work, too) containing all of your locations. You can use separate columns for parts of the address, or include everything in one. The geocoding technology will figure out what you mean.

Let’s say you operate a website about Santa Monica mechanics. You might have them listed in your spreadsheet like this:

If you copy and paste that into our mapping tool, you’ll have a custom map without any other input. It’s almost magic.

View Santa Monica Mechanics (Location Names) in a full screen map

What if you want more information besides the shop’s name in the infowindow? Easy! Just add more columns to your spreadsheet. For example, let’s say you had written a short review and gave a rating to each mechanic. So far you’ve kept your genius in a spreadsheet. Let’s share it with the world!

Copy and paste that data here and then choose “Validate and Set Options.” This gives you a list of settings that you can change.

You also can preview how the infowindow will look. Advanced Options show even more ways to determine how your map and locations work. In this example, I’ve stuck with what was pre-chosen, except that I want to group by ratings. I got fancy and made the ratings actual stars using emoji, but this could be a letter grade, a decimal number, or anything you want. The map will adjust its grouping settings accordingly.

View Santa Monica Mechanics (with Ratings) in a full screen map

Now readers can click the markers as they browse the map, or use the legend at the bottom to filter what they see. The colors of the markers are also determined by what group they’re part of, which allows for a quick visual indicator of data within the map. This becomes more apparent when there are hundreds or even thousands of markers.

Go ahead and play around with this to get your custom interactive map working the way you want. When you add additional columns to your spreadsheet, they become part of the info window description. Many of these will also be added as grouping options, if you’ve enabled the feature.

Add Images to Your Pop-up

An image is worth 1,000 words—and now you can get your maps there in a single click. Include logos, icons, photos, or other imagery in your infowindow box. Adding additional visuals to your maps can make them appear even more customized and useful.

Let’s go with one more example spreadsheet:

How To Use Image Map Generator

Copy and paste that into the map generator and you’ll see that each marker’s infowindow now includes an icon!

View Santa Monica Mechanics (With Images) in a full screen map

Image Map Responsive

You can include a single small image with every location on your map. Two important things to keep in mind here are:

1. Size: you want to keep it small, not more than 150 pixels in either direction.
2. Hosting: you need to upload your image somewhere, such as a blog or image provider.

Find the URL for every image and include that in your data, as I did with the mechanic icons above. Then you can select the spreadsheet column in the advanced settings, or BatchGeo will discover it automatically with a name like “Image.'

Add StreetView to Your Pop-up

One final type of imagery you can use is StreetView. These are pictures gathered by Google’s many 360 degree cameras driving all over the world. If there is a StreetView image available, we can include a thumbnail in the marker’s infowindow. Need a bigger view? Just click the image and you don’t even need to leave the map to see the location expanded.

StreetView is only available with BatchGeo Pro. Make maps with more locations, faster geocoding, and advanced features. Find out more today.