0

I am trying to embed a Google MyMaps iFrame into a website. To keep things simpler for the website users, I want to disable the selection of custom features (polygons) in the MyMap.

I played around with different options, in the snippet below I tried adding

&ctrl=false

into the source, this gives:

<iframe src="https://www.google.com/maps/d/embed?mid=1_oHvw6cNxTcQdsVcW7jw-BJh1hhRtM5l&ctrl=false" width="640" height="420" ></iframe>

but does not work.

Is there a way to have a map that contains my custom polygon, without allowing selection of that polygon?

Martijn.A
  • 11
  • 1

1 Answers1

0

Going to expand on this with a quick example:

Yes, if you want to implement the feature you described, you will need to create a map through the JavaScript API.

In order to draw on the map, you will need to define the lat and lng of EACH point of your shape on the map.

For the sake of example, I created a simple map which draws a square shape over Wyoming and Colorado, encapsulating the state in the highlighted area.

Here is the code approach. First, you need to define the bounds by marking the coordinates of your shape. I did this by creating the variables COborder and WYborder. 

 var COborder = [
      {lat: 41.00244, lng: -102.05165},
      {lat: 41.00056, lng: -109.05016},
      {lat: 36.99909, lng: -109.04521},
      {lat: 36.99295, lng: -102.04204},
    ]

    var WYborder = [
      {lat: 40.99752, lng: -111.04705},
      {lat: 41.00477, lng: -104.05151},
      {lat: 44.99831, lng: -104.057},
      {lat: 45.0017, lng: -111.05255}

After your shapes are defined, you will want to display them on your map as a polygon. 

 map.data.add( {geometry: new google.maps.Data.Polygon([COborder])})
 map.data.add( {geometry: new google.maps.Data.Polygon([WYborder])})

If you want to see a live example, I set up a JSFiddle here.

Cole Huffman
  • 300
  • 2
  • 12