logo
down
shadow

Combine listeners in Google Maps api v3 with google charts


Combine listeners in Google Maps api v3 with google charts

By : atte
Date : November 17 2020, 04:28 AM
To fix the issue you can do Finally I did it.
I just had to define a empty global variable outside functions like this
code :
var new_map;
var new_map = new google.maps.Map(document.getElementById('new-map'), mapOptions);


Share : facebook icon twitter icon
Google maps and Google charts on the same page

Google maps and Google charts on the same page


By : Vijaya Karthik
Date : March 29 2020, 07:55 AM
With these it helps You can perform load before of event listener like in updated fiddle
code :
google.load('visualization', '1.0', {'packages':['corechart']});

document.addEventListener('DOMContentLoaded', function () {
    //google.load('visualization', '1.0', {'packages':['corechart']});
    google.setOnLoadCallback(function () {
        window.map = new google.maps.Map(
        document.querySelectorAll('#map')[0], {
            zoom: 2,
            center: new google.maps.LatLng(0, 0),
            mapTypeId: google.maps.MapTypeId.TERRAIN
        });
    });
});
Google Maps Marker Listeners

Google Maps Marker Listeners


By : user192576
Date : March 29 2020, 07:55 AM
help you fix your problem You have a trivial error in your code. In function function setMarkers(load), your markers are configured not to respond to click events:
code :
clickable: false,
clickable: true,
Javascript / Google Charts - Add marker filters to google maps

Javascript / Google Charts - Add marker filters to google maps


By : Jonson
Date : March 29 2020, 07:55 AM
around this issue You forgot two things:
1.You forgot to add categorybs to the marker, you only added category:
code :
marker1 = new google.maps.Marker({
        title: title,
        position: pos,
        category: category,
        categorybs: categorybs, //add this line
        map: map
    });
filterMarkersBS = function (categorybs) {
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];
        // If is same category or category not picked
        if (marker.categorybs == categorybs || categorybs.length === 0) {
            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
        }
    }
}
var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
    content: ''
});

// Our markers
markers1 = [
    ['0', 'Cascade Park - 130 Lynn Dr, Hudson, OH 44236', 41.234830, -81.453479, 'KIDS', 'BSNO'],
    ['1', 'Hudson Springs Park - 7095 Stow Rd, Hudson, OH 44236', 41.250798, -81.407120, 'BABIES', 'BSYES'],
    ['2', 'Middleton Park - 1708 Middleton Rd, Hudson, OH 44236', 41.268963, -81.450649, 'ALL', 'BSNO']
];

/**
 * Function to init map
 */

function initialize() {
    var center = new google.maps.LatLng(41.234830, -81.453479);
    var mapOptions = {
        zoom: 12,
        center: center,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    for (i = 0; i < markers1.length; i++) {
        addMarker(markers1[i]);
    }
}

/**
 * Function to add marker to map
 */

function addMarker(marker) {
    var category = marker[4];
    var categorybs = marker[5];
    var title = marker[1];
    var pos = new google.maps.LatLng(marker[2], marker[3]);
    var content = marker[1];

    marker1 = new google.maps.Marker({
        title: title,
        position: pos,
        category: category,
        categorybs: categorybs,
        map: map
    });

    gmarkers1.push(marker1);

    // Marker click listener
    google.maps.event.addListener(marker1, 'click', (function (marker1, content) {
        return function () {
            console.log('Gmarker 1 gets pushed');
            infowindow.setContent(content);
            infowindow.open(map, marker1);
            map.panTo(this.getPosition());
        }
    })(marker1, content));
}

/**
 * Function to filter markers by category
 */

filterMarkers = function (category) {
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];
        // If is same category or category not picked
        if (marker.category == category || category.length === 0) {
            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
        }
    }
}

filterMarkersBS = function (categorybs) {
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];
        // If is same category or category not picked
        if (marker.categorybs == categorybs || categorybs.length === 0) {
            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
        }
    }
}

// Init map
initialize();
#map-canvas {
    width: 500px;
    height: 500px;
}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript">
        google.load("maps", "3",{other_params:"sensor=false"});
      </script>
<div id="map-canvas"></div>
<select id="type" onchange="filterMarkers(this.value);">
    <option value="">BEST FOR (SHOW ALL)</option>
    <option value="BABIES">BEST FOR BABIES</option>
    <option value="TODDLERS">BEST FOR TODDLERS</option>
    <option value="KIDS">BEST FOR KIDS</option>
    <option value="ALL">BEST FOR ALL</option>
</select>
<br>
<select id="type" onchange="filterMarkersBS(this.value);">
    <option value="">BABY SWINGS (SHOW ALL)</option>
    <option value="BSYES">HAS BABY SWINGS</option>
    <option value="BSNO">DOES NOT HAVE BABY SWINGS</option>
</select>
Google Charts: setting up multiple listeners in a loop overwrites the previous ones

Google Charts: setting up multiple listeners in a loop overwrites the previous ones


By : user3513715
Date : March 29 2020, 07:55 AM
wish helps you Alright so I found out was the issue was. It wasn't that I declared the event listeners in a loop, but that the data I passed to the selectHandler was overwritten with every iteration.
This post helped me understand closures within JS, and helped me fixed the loop I used to create the listeners:
code :

for (i = 0; i < {{ length }}; i++){
(function () {
    var chart = arrayChart['chart' + i];
    var data = arrayData['data' + i];

//    console.log("Container id: " + chart.container.id);

    google.visualization.events.addListener(arrayChart['chart' + i], 'select', function () {
                                          selectHandler(chart, data);
                                          }, false);
  }());
}
react-google-maps and google event listeners - how to catch events?

react-google-maps and google event listeners - how to catch events?


By : Marymnar
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further The only way I was able to prevent clicks through to the map (stop propagation) and still be able to click items in the in InfoBox is by setting "enableEventPropagation: false" and then adding listeners for the items in the InfoBox on the "onDomReady" prop. This makes sure that the listeners are attached after the InfoBox is rendered. Not sure if thats the best solution, but it did work. Hope that helps someone.
Related Posts Related Posts :
  • angular 6 Please add a @NgModule annotation
  • Trying to cast element ID to class selector in jQuery
  • Swipe JS - Display 3 Slides at a time
  • Jasmine test to call function when value is null
  • Redux reducer gets string instead of object
  • Keep chrome javascript running even if page reload
  • The event.target.value is not insert the userinput into a variable
  • Exporting HTML tables to Excel (.xls) in a separate sheet
  • Jquery tooltip on dialog close button
  • access variable inside anonymous function from outside
  • How come func is called from a function?
  • How to change add and remove active class in JavaScript
  • how to toggle a specific div in javascript
  • How to get all the values from multiple keys of an array of object?
  • jQuery bind() unbind() and on() and off()
  • regular expression to find DD Month YYYY from a string
  • How to upload files from web client (HTML/jQuery form) to your Dropbox folder
  • Backbone history and require.js issue
  • Confusion over Classical and Prototypal Inheritance Javascript
  • How to take screen shot of current webpage using Javascript/JQuery?
  • Store meridiem in a variable
  • class declared inside closure vs standard class without closure
  • javascript confirm box always return true
  • dynamically changing the size of font size based on text length using css and html
  • Node.js - Getting the host IP address while on Amazon EC2
  • Confusing CSS, can anyone explain please
  • How to install v8-profiler on Windows 8 (64 bit) using npm?
  • Resolve promise based on another promise
  • google maps adding overlay layer above UI and markers
  • Style specific letter?
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org