i was using v2 of google maps. Now i shifted to v3.
In version 2, this WAS working
GEvent.addListener(map, "click", function(overlay, latlng) {
myLatitude = latlng.lat();
myLongitude = latlng.lng();
alert(myLatitude + ' data ' + myLongitude);
});
what should be the equvalant of this code in v3 ??
i searched a lot, but couldn't find any good result..
I have tried this..
google.maps.event.addListener(map, 'click', function(overlay , latlng) {
myLatitude = latlng.lat();
//myLongitude = latlng.lng();
alert('hi! ' + myLatitude);
});
but no results..
thanks
If you look at the docs:
http://code.google.com/apis/maps/documentation/v3/reference.html#Map
You'll see that the 'click' event passes a MouseEvent argument, which has a property latLng, so your method signature above is wrong, this should work:
google.maps.event.addListener(map, 'click', function(e) {
myLatitude = e.latLng.lat();
alert('hi! ' + myLatitude);
});
Related
I am using ionic to display benefits data on Google map. It works fine except on click of any marker, it opens the last markup content. Follownig is my google map js code
.controller('BenefitsMapCtrl', function ($scope, LocationBenefits, Utilities, $ionicLoading, $compile) {
$scope.init = function () {
var userId = Utilities.getUserId();
LocationBenefits.getLocationBenefits(userId, function (userBenefits) {
console.log("Got location benefits data for Google mp for user id "+userId);
$scope.userBenefits = userBenefits;
var centerLatlng;
if (typeof $scope.userBenefits !== "undefined" && $scope.userBenefits.length > 0) {
var firstBenefitLocation = $scope.userBenefits[0];
centerLatlng = new google.maps.LatLng(firstBenefitLocation.location.lat, firstBenefitLocation.location.lng);
}
var mapOptions = {
center: centerLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
$scope.markers=[];
//Loop in each benefits and place on Google map
if (typeof $scope.userBenefits !== "undefined" && $scope.userBenefits.length > 0) {
for (var i = 0; i < $scope.userBenefits.length; i++) {
var benefit = $scope.userBenefits[i];
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><div><img class='shop-icon' src='" + benefit.shopicon + "' alt='" + benefit.shopName + "'/><span class='item-text-wrap'>" + benefit.shopName + "</span></div><div class='shop-offer'>"+benefit.benefits.short_benefitText+"</div><div class='card'><img class='card-art' src='"+benefit.cardart+"' alt='"+benefit.card+"'/></div></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
//Get location
var locationLatLng = new google.maps.LatLng(benefit.location.lat, benefit.location.lng);
var marker = new google.maps.Marker({
position: locationLatLng,
map: map,
title: benefit.shopName
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
$scope.markers.push(marker);
}
}
//Finally set the map
$scope.map = map;
});
};
// google.maps.event.addDomListener(window, 'load', initialize);
$scope.centerOnMe = function () {
if (!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function (pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function (error) {
alert('Unable to get location: ' + error.message);
});
};
$scope.clickTest = function () {
alert('Example of infowindow with ng-click')
};
});
Issue: On click of any markup on Google map, it always opens the last markup.
Please help.
I had the same problem and spend a lot of time to figure out what's going on so I'd like to add the answer for the future generations,lol.
First of all it's a good idea to refer to official Google maps API docs and take a look at "Events section". I found there one interface of adding event listeners to markers that I never seen before(even after googling this issue for few hours).
marker.addListener('click', function() {});
google.maps.event.addListener(marker, 'click', function () {});
It pointed me out to the idea that when you are trying to do it in the loop using an "old" way, your marker variable is obviously equals to the last element of your markers array. And when event really can be triggered your initialization process is finished what means that your variable has always wrong value in anonymous function at the moment it can be really called. So, again, you didn't passed marker as a parameter to that anonymous event handler.
But you still can do what you want. Just use this.inside your event handler. Bellow is my code sample
marker.addListener('click', function() {
var it = this;
$scope.$apply(function() {
$scope.activeEvent = EventService.getShort($scope.events[it.id]);
});
});
I believe that you can try to use this. in "old-style" interface as well.
I had the same problem and I found the solution here. Apparently, you just have to create a function to create the markers and call that function inside the for loop:
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
$scope.map = map; //Attach the map to the scope before adding the markers
$scope.markers=[];
var infowindow = new google.maps.InfoWindow();
var createMarkers = function (benefit){
//Info window's content
var contentString = "<div><div><img class='shop-icon' src='" + benefit.shopicon + "' alt='" + benefit.shopName + "'/><span class='item-text-wrap'>" + benefit.shopName + "</span></div><div class='shop-offer'>"+benefit.benefits.short_benefitText+"</div><div class='card'><img class='card-art' src='"+benefit.cardart+"' alt='"+benefit.card+"'/></div></div>";
var compiled = $compile(contentString)($scope);
//Get location
var locationLatLng = new google.maps.LatLng(benefit.location.lat, benefit.location.lng);
//Create marker
var marker = new google.maps.Marker({
position: locationLatLng,
map: map,
title: benefit.shopName
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(compiled[0]);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
//Loop in each benefits and place on Google map
if (typeof $scope.userBenefits !== "undefined" && $scope.userBenefits.length > 0) {
for (var i = 0; i < $scope.userBenefits.length; i++) {
var benefit = $scope.userBenefits[i];
createMarkers(benefit);
}
}
I’m having problems upgrading to Google Maps v3 from v2. In particular with MarkerManager. I haven’t worked with maps before and am helping out someone whose developer abandoned them who developed the maps in v2.
The map is to show a maximum of 100 markers that when clicked on show an infobox. (There is also a telerik RadGrid bound to with the results.) It all seems to work until it gets into DisplayAllMarkers() mgr.addMarkers() (see below). It fails in ProjectionHelperOverlay.prototype.LatLngToPixel with Uncaught TypeError: Cannot call method ‘lng’ of undefined. I’ve tried putting in alerts in AddMarker if lat or lng are undefined, but none were alerted. The previous calls to MarkerManager.prototype.addMarkerBatch_ set mPoint to undefined which was then passed to getTilePoint which calls LatLngToPixel where it fails.
I’m thinking it’s a problem with listeners, but have tried various listeners without success. I would really appreciate some help with this as I have been unable to make progress for some time and am letting down the client and don’t know what to try next.
Select SearchResult.js snippet of code:
$(document).ready(function () {
InitializeMap(originalScale);
});
var map;
var batch = [];
var mgr;
var geocoder = null;
function InitializeMap(scale) {
map = new google.maps.Map(
document.getElementById('MapContainer'), {
center: new google.maps.LatLng(Latitude, Longitude),
zoom: scale,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
});
var listener = google.maps.event.addListener(map, "bounds_changed", function () {
MapMoved();
google.maps.event.removeListener(listener);
});
}
var south, west, north, east, zoom;
function MapMoved() {
zoom = map.getZoom();
//zoom = map.setZoom();
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
south = sw.lat();
west = sw.lng();
north = ne.lat();
east = ne.lng();
Search();
}
The Search(); loads up the search parameters (including the north, south, east, west co-ordinates) and calls a telerik ajax request.
C# snippet:
if (Properties.Count >= 1 || zoom == "0") //display properties
{
RadAjaxManager1.ResponseScripts.Add("ClearAll();");
Properties.ForEach(p =>
{
string script = "AddMarker(" + p.ID.ToString() + "," + p.LatitudeShort.ToString() + "," + p.LongitudeShort.ToString() + ");";
RadAjaxManager1.ResponseScripts.Add(script);
});
RadAjaxManager1.ResponseScripts.Add("DisplayAllMarkers();");
}
else //zoom out map – which will start the search process all over again.
{
string delta = "1";
RadAjaxManager1.ResponseScripts.Add("ZoomOut(" + delta + ");");
}
SearchResult.js snippet continued:
function ClearAll() {
batch = [];
}
function AddMarker(id, lat, lng) {
batch.push(CreatePropertyMarker(lat, lng, id));
}
function DisplayAllMarkers() {
mgr = new MarkerManager(map, { trackMarkers: true });
google.maps.event.addListener(mgr, 'loaded', function () {
mgr.clearMarkers();
mgr.addMarkers(batch, 3, 17); // **Failing in here!!!**
mgr.refresh();
});
}
function CreatePropertyMarker(lat, lng, id) {
var redIcon3 = {
url: '../images/HouseIcon_ForGoogleMap.png',
size: new google.maps.Size(22, 22),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 22)
};
var marker3 = new google.maps.Marker(new google.maps.LatLng(lat, lng), redIcon3);
google.maps.event.addListener(marker3, 'click', function () {
var data = "{'Id': '" + id + "'}";
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json",
url: 'searchresult.aspx/GetPropertyPopOut',
data: data,
success: function (data) {
var popout = data.d;
marker3.openExtInfoWindow(map, "custom_info_window_red", popout, { beakOffset: -1 });
},
error: function (result) {
alert('status:' + result.status + ' statusText:' + result.statusText);
}
});
});
return marker3;
}
Script order and versions:
jquery-ui-1.9.1.custom.min.css
Google Maps: v3 (I have also tried specifying particular version 3 numbers e.g. v=3.12 http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false
jquery-1.8.2.js
jquery-ui-1.9.1.custom.min.js
extinfowindow.js v2.0
MarkerManager.js v1.1
SearchResult.js
jquery-ui-1.8.16.custom.min.js
jquery-1.6.2.min.js
After tying a load of different things I eventually found out the problem was when creating the marker it needed position set. I changed the line in CreatePropertyMarker from:
var marker3 = new google.maps.Marker(new google.maps.LatLng(lat, lng), redIcon3);
to:
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
icon: redIcon3
});
I'm managing this website: http://www.gprprojecten.nl
Basically what I'm doing with is is getting a stream of data from a webservice and chaching this. Afterwards I do all kinds of things to this data, including displaying all the projects on a google map.
Problem is, that as the projectnumber grows, the (custom)pins start to overlap (not visible, not clickable).
So I want to cluster my pins.
I started working on a google maps clusterer library using A32.blog as my starting point.
But now a problem arises. As I have chosen a client side filter system called filter.js, I depend on that way of using google maps, which is with objects rather then an array of markers as used in the clusterer library.
Here is the code I use to generate my map in combination with filter.js:
var googleMap = {
center_lat_lng: [52.14, 5.3],
map: null,
markers: {},
addMarker: function (project) {
var that = this;
var image = new google.maps.MarkerImage('#Url.Content("~/Content/img/marker.png")',
new google.maps.Size(63, 27),
new google.maps.Point(0, 0),
new google.maps.Point(23, 27));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(project.loclat, project.loclong),
map: this.map,
title: project.gebouwnaam,
icon: image
});
marker.info_window_content = "<div class=\"gmapcontentwindow\"><h4>" + project.gebouwnaam + "</h4><img src=\"" + project.thumburl + "\" alt=\"" + project.gebouwnaam + "\" /><div class=\"gebouwdata\"><span class=\"date\">" + project.publicatiedatum + "</span><h5>" + project.plaats + "</h5><span>" + project.gebruiksfunctie + " | " + project.gebouwcategorie + "</span><span>" + project.licentiehouder + "</span><span class=\"stars " + project.rating + "\"></span>"
if (project.akkoorddoorexpert == "True") {
marker.info_window_content += "<span class=\"expert\"></span>"
}
var forwardUrl = '#Url.Content("~/Home/Details/")';
marker.info_window_content += "<span class=\"forward\">Lees meer >></b></span></div></div>"
this.markers[project.id] = marker
google.maps.event.addListener(marker, 'click', function () {
that.infowindow.setContent(marker.info_window_content)
that.infowindow.open(that.map, marker);
});
},
updateMarkers: function (filtering_result) {
var google_map = this;
$.each(google_map.markers, function () { this.setMap(null); })
$.each(filtering_result, function () {
google_map.markers[this.id].setMap(google_map.map);
});
},
init: function () {
var options = {
center: new google.maps.LatLng(this.center_lat_lng[0], this.center_lat_lng[1]),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(document.getElementById("gmap"), options)
this.infowindow = new google.maps.InfoWindow({
});
//var markersarray = $(this.markers).toArray();
//console.log(markersarray);
//doet het nog niet???
//http://a32.me/2012/05/handling-huge-amount-of-markers-on-google-maps-with-clusters/
//var markerCluster = new MarkerClusterer(this.map, markersarray, {
// gridSize: 10,
// minimumClusterSize: 2
//});
}
};
project is an object that is passed to the init function from filter.js
You need to add the Marker Clusterer to the global scope or keep a reference to it in your object.
I've seen several other posts about this, but the answers from those responses don't work for me.
The other responses:
How do I bind a google maps geocoder.geocode() callback function
Backbone.js with Google Maps - problems with this and listeners
My code:
var ns = namespace('camelcase.geomanager.map');
ns.Site = Backbone.Model.extend({
url: '/site'
});
ns.Sites = Backbone.Collection.extend({
model: ns.Site
});
ns.MapView = Backbone.View.extend({
initialize: function() {
this.markers = new Array();
// Create the Google Map
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.googleMap = new google.maps.Map(this.$(".mapCanvas")[0], mapOptions);
// Register events
this.collection.on('add', this.addSite, this);
this.collection.on('remove', this.removeSite, this);
},
addSite: function(model) {
// Get model attributes
var elementId = model.get('elementId');
var latitude = model.get('latitude');
var longitude = model.get('longitude');
var id = model.get('id');
var notes = model.get('notes');
var title = ""+id;
// Create icon and marker
var icon = '/resources/img/elements/' + elementId + '_marker.png';
var latLng = new google.maps.LatLng(latitude, longitude);
var marker = new google.maps.Marker({
position: latLng,
title: title,
map: this.googleMap,
icon: icon
});
// Load info window
var siteBubbleTemplate = _.template($('#siteBubbleTemplate').html());
var siteContent = $(siteBubbleTemplate({
siteId: id,
siteNotes: notes
}))[0];
var infoWindow = new google.maps.InfoWindow({
content: siteContent
});
// Show info window when clicking on marker
_.bindAll(this, this.openSite);
google.maps.event.addListener(marker, 'click', this.openSite(id));
this.markers.push({
id: id,
marker: marker,
infoWindow: infoWindow
});
},
openSite: function(id) {
var marker;
for (var c=0; c<this.markers.length; c++) {
marker = this.markers[c];
// Open the appropriate marker info window
if (marker.id == id) {
marker.infoWindow.open(googleMap, marker.marker);
}
// Close the rest
else {
marker.infoWindow.close();
}
}
}
});
The offending line:
google.maps.event.addListener(marker, 'click', this.openSite(id));
The error being reported in firebug:
TypeError: func is undefined
underscore.js (line 482)
I suspect this.marker is the problem, since you should be able to just refer to it by name.
google.maps.event.addListener(marker, 'click', this.openSite(id));
Looks like it was a scoping issue. I solved my problem with the following code:
// Show info window when clicking on marker
_.bindAll(this);
var _self = this;
var doSomething = function(event) {
_self.openSite({
event: event
});
};
google.maps.event.addListener(marker, 'click', doSomething);
I'll give the answer to whoever can best explain why this works.
In a model/collection event handler, Backbone sets 'this' to the model/collection which raised the event. If you call _.bindAll(this) in your view's initialize(), 'this' will be set to the view in your event handlers. Check out this jsfiddle: http://jsfiddle.net/9cvVv/339/ and see what happens when you uncomment _.bindAll(this);
var MyView = Backbone.View.extend({
initialize: function() {
// TODO: uncomment this line
// _.bindAll(this);
this.collection.bind('myEvent', this.onDoSomething);
},
updateCollection: function() {
this.collection.doSomething();
},
onDoSomething: function() {
if (this.models && typeof this.models.length === 'number') {
alert('"this" is a collection.');
}
else if (this.collection) {
alert('"this" is the view.');
}
else {
alert('"this" is something else.');
}
}
});
Tried the following scripts but the last section is not working. Help please.
// script type="text/javascript"
var myOptions = {
zoom: 7,
center: new google.maps.LatLng(-36.624345125527526,144.96459973437504),
mapTypeId: google.maps.MapTypeId.TERRAIN,
streetViewControl: false,
draggableCursor: 'crosshair',
draggingCursor: 'pointer'
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
map.panTo(position);
// not working
google.maps.event.addListener(marker, 'dragend', function() {
var point = marker.getPosition();
document.getElementById("latitude").getElementsByTagName("input")[0].value = point.lat();
document.getElementById("longitude").getElementsByTagName("input")[0].value = point.lng();
});
// end of script
Tried using the following but nothing happen after the marker is drag. Seems like the listener is not listening to the 'dragend' event of the marker. Any clue? Other option to get the latLng after dragging marker on map?
// JS code
google.maps.event.addListener(marker, 'dragend', function(e) {
var point = e.latLng;
alert(marker.e.latLng);
})
// end code
The input elements part is not a choice as the scripts sit in an embedded placeholder of a web based application. So can't change that part.
You should be using the MouseEvent object passed by the dragend event for the marker. Like this:
google.maps.event.addListener(marker, 'dragend', function(e) {
var point = e.latLng;
document.getElementById("latitude").getElementsByTagName("input")[0].value = point.lat();
document.getElementById("longitude").getElementsByTagName("input")[0].value = point.lng();
});
I also am not sure why you're not just naming your input elements and accessing them directly...something like this:
document.getElementById("latitude_input").value = point.lat();
document.getElementById("longitude_input").value = point.lng();