CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Kvasha
Kvasha

Reputation: 37

Custom Google Maps Layer for Markers and Polygons?

I have a question about the googleMaps Javascript API. Is it possible to create a custom Layer that you can show/hide like the given layers such as traffic and bicycle layer?

I would like to have a own Layer for my Markers and another Layer for polygons.

thanks in advance

Upvotes: 0

Views: 1268

Answers (1)

SphynxTech
SphynxTech

Reputation: 1849

I understood of your question that you would like to create a custom layer on your web site. You also need to change the layer informations at any time.

Google maps api provides KML and GeoRSS data formats for "displaying geographic information".

We are going to introduce KML format.

You may create a KML file witch provides the informations for your layer. You can find an example of KML file here. Of course, you can edit this file any time on your server.

This is an example of editing a file on php:

$file = file_get_contents($_SERVER['DOCUMENT_ROOT']."/yourKLMFile.txt");
$file= str_replace("OldValue", "NewValue", $file);
echo ($file);

You also can provide personal data for your users or simply update your layer.

Next, JS.

Google maps api provides the KmlLayer() constructor witch creates your layers and display it on the map (since you have created it).

The constructor takes two important parameters:

  • The URL of your KML file (probably on your server);
  • The map in witch you want to display the layer.

This is a sample example:

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
    map: map
  });

This is a sample code spinnet wich resume all this:

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 11,
          center: {lat: 41.876, lng: -87.624}
        });

        var ctaLayer = new google.maps.KmlLayer({
          url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
          map: map
        });
        }
        
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
<div id="map"></div>

<script async defer
    src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>

Remember that you can always update your data file in php.

You may consult the documentation about KML layer and generally google maps' layers on google maps web site.

Tell me a comment if you have some questions

Upvotes: 1

Related Questions