CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Hari kris
Hari kris

Reputation: 49

How to mark each area with polygon in google map?

I am trying to create a map using google map or any other services.

In this map i want to draw each area inside the city and it's details.

This is similar to the following link.

How could i create it using Google map API? Or is there any way same as i did in the mymaps option by google maps?

Please advice me.

enter image description here

Upvotes: 0

Views: 1474

Answers (1)

geocodezip
geocodezip

Reputation: 161384

You can use KmlLayer to display the polygons (etc) from your MyMap on a Google Maps Javascript API v3 map (you will need an API key).

The URL was obtained by exporting the KML ("Download KML") from your MyMap, checking both of the options:

  • Keep data up to date with network link KML (only usable online).
  • Export to a .KML file (for full icon support, use .KMZ).

Then using the content of the <href> in the resulting file (and removing the HTML entity encoding):

<href>http://www.google.com/maps/d/kml?forcekml=1&amp;mid=1yrtH76JreHzs8bU1-XOoVsEeRS0</href>

code snippet:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var kmlLayer = new google.maps.KmlLayer({
    url: "https://www.google.com/maps/d/kml?forcekml=1&mid=1yrtH76JreHzs8bU1-XOoVsEeRS0",
    map: map
  });
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

Upvotes: 1

Related Questions