I'm using google maps v3, and my issue is that I have 200+ polygons on one map, they are all editable, and I need to make an ajax call in the event listeners for change which use path instead of the polygon to detect the changes.
so in the callback function this = polygon.getPath(), how can I get the polygon that it belongs to. In the polygon I use set to set the info I require for the ajax call.
poly1.set('name', 'poly1');
poly1.set('id', 1);
google.maps.event.addListener(poly1, 'dragend', setNewArea);
google.maps.event.addListener(poly1.getPath(), 'insert_at', setNewArea);
google.maps.event.addListener(poly1.getPath(), 'remove_at', setNewArea);
google.maps.event.addListener(poly1.getPath(), 'set_at', setNewArea);
so in setNewArea, I can easily check this to see if it's the poly or the path, but if it's the path I have no way to get the parent poly for it. I don't want to have 200 custom callbacks just to hardcode the poly, there has to be an other cleaner way.
One way to do this is to add the object reference to poly1 to your assigned callback. Here is some code I wrote using the maps API that adds a listener for a click event on a specific marker that opens an info window.
var latLng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: latLng,
map: window.map,
title: pinName
});
var infoWindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(window.map, marker);
});
So for your example, you might want to do something like what's below. That will ensure that your callback function is getting a reference to the poly object, even if the triggering event is related to the path.
poly1.set('name', 'poly1');
poly1.set('id', 1);
google.maps.event.addListener(poly1, 'dragend', function() {
setNewArea(poly1);
});
google.maps.event.addListener(poly1.getPath(), 'insert_at', function() {
setNewArea(poly1);
});
You can make circular reference among objects.
var thePath = poly1.getPath();
thePath.parent = poly1;
google.maps.event.addListener(thePath, 'set_at', function () {
console.log('My parent is the polygon', this.parent);
}.bind(this);
Related
I am trying to get a Google Maps instance setup, where I can have the marker icons change into a larger image on hover. I am loading the larger image within arrays and then trying to pass those values into the callback event function. For some reason I only get a default map marker showing on hover, and not the image.
You can see where I am doing this below by using the "testVar".
https://jsfiddle.net/sj1zv02a/
for (i = 0; i < locations_programs.length; i++) {
var id = 'programs' + i;
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
map: map,
id: id,
icon: 'http://www.christielakekids.com/_images/new/blue_circle.png',
url: locations_programs[i][5],
image: locations_programs[i][4],
zIndex: 100
});
var testVar = locations_programs[i][4];
google.maps.event.addListener(marker, 'mouseover', function (event, testVar) {
this.setIcon(testVar);
});
google.maps.event.addListener(marker, 'mouseout', function (event) {
this.setIcon('http://www.christielakekids.com/_images/new/blue_circle.png');
});
I would also like to know how to attach a URL to the larger image so it will redirect there when clicked. I have the "URL" parameter set in the marker code, but that doesn't seem to do anything.
I have found this solution (the sample is for //**** PROGRAMS only but is easly extendible for the other section.
the JSFiddle for test
And the code for a better explanation
In the marker attributes add a altIcon attribute and assign to this the image you need.
In mouseover listener set the icon using this.setIcon(this.altIcon)
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
map: map
,id: id
,icon: 'http://www.christielakekids.com/_images/new/blue_circle.png'
,url: locations_programs[i][5]
,image: locations_programs[i][4]
,zIndex:100
,altIcon: locations_programs[i][4]
});
google.maps.event.addListener(marker, 'mouseover', function(event) {
this.setIcon(this.altIcon);
});
I met some difficulties to display images in the array. (the site says file not found) so inside jsfiddle I used icons with different colors.
I have a function that loops an array of markers and assigns click events to all of them.
for(var key in markers){
clickEvent(markers[key], sekolah[j].show, sekolah[j].hide, key);
}
function clickEvent(mark, showArr, hideArr, key){
var listener = google.maps.event.addListener(mark, 'click', function() {
//does a lot of stuff
});
}
What I would like to do is to remove/disable all click events when any marker has been clicked (so that no two markers can be clicked sequentially without resetting the map first). The click events would be enabled again when the user resets the map.
This is the function to reset the map:
google.maps.event.addListener(map, "click", function(){
setAllMap(map); //Shows all markers
//and a lot of stuff
});
I have tried using addListenerOnce, but that didn't work. I have also tried this suggestion from another post, but the result was the same as using addListenerOnce.
Is there a way to achieve this?
Thank you.
PS this is how I created markers:
var newMark = new google.maps.Marker({
map: map,
position: pos,
id: ids,
title: name,
icon: "res/schoolf.png"
});;
markers[ids] = newMark;
Im looping and placing some markers, but when i click a marker, they all respond with the same value
Here is my code
for(a=0; a < prod.length; a++){
// we add marker to map
var myLatlng = new google.maps.LatLng(prod[a]['lat'],prod[a]['lon']);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: prod[a]['name']+" \n"+prod[a]['description'],
icon: image
});
google.maps.event.addListener(marker, "click", function() {
show_details(a);
});
}
function show_details, a always has the same value
I have looked at the other answers here but that didnt solve my problem.
Tipical problem in async programming/scripting. The a variable passing, when the click event runs, so , the value of that is what is after the for loop finishes.
You should create an inner function scope, and save the value of a in a variable, what lives only in that scope.
The solution:
(function(z){
google.maps.event.addListener(marker, "click", function() {
show_details(z);
});
})(a);
The a variable lives outside the callback function too. So if you modify the value of a ( or the for loop modify that) and when the event handler is called, it see the modified a.
Help link: http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/ .
I have the following function to add one single marker but I want to add multiple markers by clicking on the map. I have Googled but I can't get any straight answer on how I can solve this problem.
function placeMarker(location) {
if(marker) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
map: gm_map,
draggable: true
});
}
}
I know I need to use Array() but I don't know exactly how. How can I solve my problem?
DEMO: removed because the problem has been solved.
Do you need to use the marker variable outside of the placeMarker function? Your function is not deleting the marker, it is checking to see if the marker variable exists and moves the marker using the setPosition function. You need to remove that line if you want multiple markers to exist.
function placeMarker(location) {
//marker variable will only exist inside this function
var marker = new google.maps.Marker({
position: location,
map: gm_map,
draggable: true
});
}
Here is an example: http://jsfiddle.net/bryan_weaver/aEyfW/
Ok, you need to have an event listener for the 'click' event on the map. And this needs to pass the currently-clicked location to your placeMarker function. Try this (add this event listener in the same place where you initialise your map)
google.maps.event.addListener(gm_map, 'click', function(event) {
placeMarker(event.latLng);
});
And modify your placeMarker function, so instead of having one global variable marker which you update with each click, create a new marker each time:
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: gm_map,
draggable: true
});
}
I am attempting to create a google map with markers on my page. I have an unordered list where each item has data attributes for latitude, longitude and title. Using JQuery I pull these values and produce a marker on the map for each item in the list. Everything seems to work OK except google maps will not load tiles as you pan around the map.
This is how I initialize the map:
var map;
// initialize google map
$(function () {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(CoordinatesLat, CoordinatesLong),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
}
// initiate map
map = new google.maps.Map($("#map")[0], myOptions);
// when map is loaded, add events and behaviors to it
google.maps.event.addListenerOnce(map, 'tilesloaded', addEventsToMap(".event")); //commenting this line prevents GMAP problems
});
FYI - before I was using maps.event.addListener() and the map would work momentarily and then become completely unresponsive. Changing it to maps.event.addListenerOnce() stopped the freezing but still has the tile loading problem.
And this is the callback, where evidently I've done something wrong:
//add events from event list to map. add behavior to events ie. mouseover
function addEventsToMap(selector) {
$(selector).each(function (i, $e) {
$e = $($e);
var latlng;
if ($e.attr("data-geo-lat") && $e.attr("data-geo-long")) {
latlng = new google.maps.LatLng($e.attr("data-geo-lat"), $e.attr("data-geo-long"));
$e.marker = new google.maps.Marker({
position: latlng,
map: map,
title: $e.attr("data-title")
});
google.maps.event.addListener($e.marker, 'click', function () { window.location = $e.attr("data-href"); });
google.maps.event.addListener($e.marker, 'mouseover', function () { $e.addClass("event-hover"); });
google.maps.event.addListener($e.marker, 'mouseout', function () { $e.removeClass("event-hover"); });
//when mouse hovers over item in list, center map on it's marker
$e.mouseenter(function () {
map.panTo(latlng);
});
}
});
}
Any idea what could be causing this?
I see a problem, though I'm not sure if it's the issue here. If you examine this line:
google.maps.event.addListenerOnce(map, 'tilesloaded', addEventsToMap(".event"));
What you are intending to do is call your 'addEventsToMap' once the map is loaded, but instead what you are doing is calling the function and then assigning the return value of that as a listener.
You need this instead, and I think it shouldn't crash anymore.
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
addEventsToMap(".event");
});
If that doesn't work, I would recommend looking at the Javascript Console of whatever browser you are using, to see what error is happening to make the map crash.