GoogleMapView

The GoogleMap view

Description

The GoogleMap view binds a Google map to a search that interprets geographic data and displays it on a map. To display markers on your map, be sure to include lat and lng fields in your search results.

Documentation

Library path

Properties

Name

Default value

Description

id Required. The unique ID for this control.
Google Map propertiesGoogle Map properties. Must be set in JavaScript. For a list of possible properties, see the google.maps.MapOptions object specification.
manageridnullThe ID of the search manager to bind this view to.
datasource "preview"The type of data to retrieve from the search results (results | preview | events | summary | timeline | properties).

Fields

Name

Description

mapA hook to the Google Map object wrapper, which is created on-demand by the render method if it does not already exist. See the Google Map API for more information.

Methods

Name

Description

renderDraws the control to the screen. Called only when you create the control manually in JavaScript.

Example (Django tag)

This example uses search results from a sample earthquakes lookup table, and includes lat and lng fields in the search query. To try it for yourself, download earthquakes.csv to a /lookups directory under $SPLUNK_HOME/etc/apps/your_app_name.

{% block content %}
    {% googlemap id="example-googlemap" managerid="example-search" zoom=6 %}
{% endblock content %}
     
{% block managers %}
    {% searchmanager 
        id="example-search" 
        search="| inputlookup earthquakes.csv | search Region=Washington | rename Lat as lat, Lon as lng | stats count by lat, lng" 
    %}
{% endblock managers%}

Example (JavaScript)

This example uses search results from a sample earthquakes lookup table, and includes lat and lng fields in the search query. To try it for yourself, download earthquakes.csv to a /lookups directory under $SPLUNK_HOME/etc/apps/your_app_name.

<script>
    var deps = [
        "splunkjs/ready!",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/googlemapview"
    ];
    require(deps, function(mvc) {
        var SearchManager = require("splunkjs/mvc/searchmanager");
        var GoogleMapView = require("splunkjs/mvc/googlemapview");

        // Create managers
        new SearchManager({
            id: "example-search",
            search: "| inputlookup earthquakes.csv | search Region=Washington | rename Lat as lat, Lon as lng | stats count by lat, lng" 
        });

        // Instantiate components
        new GoogleMapView({
            id: "example-googlemap",
            managerid: "example-search",
            zoom: 6, // This is a google.maps.MapOptions property
            el: $("#mygooglemapview")
        }).render();
    });
</script>

Code examples