Search code examples
javascriptphpgoogle-mapsgoogle-maps-api-3geojson

Getting marker from map.data class use geojson google maps


first of all I was initiate marker from geojson, and how I can get the marker if i want use marker for listener/action?

this is my script

var map;

function initMap() {
    //makes map
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -6.9034482, lng: 107.6081381},
        zoom: 9,
        styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}]
        });

    //load marker from geojson
    map.data.loadGeoJson('<?php echo base_url().'index.php/json_site/geojsongetmap'?>');

    // set style marker
    map.data.setStyle(function(feature){
        var tit = feature.getProperty('nm_site');
        return{
            title: tit,
            icon: '<?php echo base_url()?>assets/images/mark3.png'
        };
    });

    //marker event
    map.data.addListener(marker, 'click', function(event) {
       map.setZoom(11);
       map.setCenter(marker.getPosition());  // I need to get the position of the marker who i clicked

    });
}

how I can make action listener if I initiate marker from geojson? and how I can get the marker who existing in my map?

please help me, any suggest would be appreciated

thanks


Solution

  • Instances of the google.maps.Data.Point class are not exactly a drop-in replacement for traditional google.maps.Marker objects. For starters, they are abstract data, not tied to a particular representation. It's up to the parent google.maps.Data layer to decide how to draw them.

    However, you can still capture events, with the caveat that the click happens on the Data layer, which receives a mouseEvent as argument. This argument contains the feature over which you just clicked.

    This means you need to declare:

    google.maps.event.addListener(map.data,'click',function(mouseEvent) {
        var clickedFeature = mouseEvent.feature,
            featureGeometry = clickedFeature.getGeometry(),
            featurePosition = featureGeometry.get();
    
        map.setCenter(featurePosition); 
    
    });
    

    Please take into consideration that ingesting geoJson with the Data layer can result not just in Point geometries. If you get a mix of points, polygons and linestrings, anything different from a point won't return a latLng object when you call its get method.