I'm attempting to use the Google Maps API to get a location provided by the user. To do this I'm setting a marker that moves based on 'click' events. The code is as such:
function initialize_google_map(div_id) {
var map = new GMap2(document.getElementById(div_id));
map.setCenter(new GLatLng(45, -105), 2);
map.setUIToDefault();
return map;
}
$(document).ready(function() {
// configure the google maps api
var map = initialize_google_map("map_canvas");
var marker = google.maps.Marker({map: map, title:"Location"});
google.maps.event.addListener(map, "click", function(evt) {
alert("got click event");
marker.setPosition(evt.latLng);
});
$(document).unload(function() {
// unload the google map
GUnload();
});
});
The "got click event" alert is never firing, and my Javascript console (Google Chrome) says this:
Uncaught TypeError: Cannot call method 'addListener' of undefined
The API is included like this:
<script src="http://maps.google.com/maps?file=api&v=3&sensor=true" type="text/javascript"></script>
The problem here is that you are mixing Google Maps version two objects with Version 3. In your initialize_google_map function you are creating and returning a GMap2 object (a version 2 object). You are then passing this object into a google.maps.Marker object constructor (a version 3 object).
You just need to modify your initialize_google_map function to instantiate a google.maps.Map object.
The event is generated before function and it does not recognize, you change this code:
$(document).ready(function() {
google.maps.event.addListener(map, "click", function(evt) {
alert("got click event");
marker.setPosition(evt.latLng);
});
});
for this code:
$(window).load(function(){
google.maps.event.addListener(map, "click", function(evt) {
alert("got click event");
marker.setPosition(evt.latLng);
});
});
Related
I'm loading the googlemaps api
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=oxD34DBEEF_KbuMvCv3koum4ntaRia8GdIUwE&callback=initMap">
</script>
to draw a map
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
...
});
}
</script>
and then I define a listener to register the latitude/longitude of any clicks on the map.
function getLatLon() {
listener1 = google.maps.event.addListener(map, 'click', function (event) {...})
}
...
getLatLon();
This works fine on Firefox but on Chromium and IE I get an error "google is not defined". I tried repositioning the script that loads the api but no success. Making it load synchronously results in the map not being displayed.
Thanks for helping.
google APIs can only be used until the callback is called so you need to put the getLatLon() method inside the initmap() to avoid "google is not defined" error.
it has to be something like the code below
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
....
});
getLatLon();
}
</script>
Is there any way to add an click event with zoom? I am able to perform both individually, but when I use zoom together with a click event it is not working properly.
google.maps.event.trigger(gmarkers[count], "click");
map.setZoom(parseInt(k));
Please refer this jsfiddle: http://jsfiddle.net/Uw9Qy/
An example found here: http://www.geocodezip.com/v3_MW_example_map3_clustered.html
In your fiddle, you have defined the myClick function (which gets triggered as you click one of the text links), but that function doesn't contain any zoom code.
Try this:
Change the onclick on your <b> tags, add a zoomlevel to it
<b onclick="myclick(0, 11)">Berlin</b>-<b onclick="myclick(1, 8)">Paris</b>-<b onclick="myclick(2, 9)">Rome</b>
Then, add a paramter to your myclick function so you can zoom in:
this.myclick = function (i, zoomlevel) {
google.maps.event.trigger(gmarkers[i], 'click');
map.setZoom(zoomlevel);
};
function createMarker() {
var marker = new google.maps.Marker({
position: z,
map: map,
title: title,
html: contentstring
});
google.maps.event.addListener(marker, 'click', function () {
map.setCenter(marker.getPosition());
map.setZoom(10);
infowindow.setContent(this.html);
infowindow.open(map, marker);
});
//google.maps.event.addListener(marker,'click',function(){
//window.location.href = marker.url;
//});
gmarkers[ids] = marker;
};
Specify your desired zoom level in setZoom() :)
I want to use method getPosition in this code :
alert("Tap location in this map");
google.maps.event.addListener(map, 'click', function(event) {
mArray[count] = new google.maps.Marker({
position: event.latLng,
map: map
});
});
mArray[count].getPosition();
But I cannot call getPosition.
Uncaught TypeError: Cannot call method 'getPosition' of undefined
count is a global variable.
var count=0;
var mArray = [];
Can someone explain it ?
The way your question has it, mArray[count].getPosition() executes before the click event runs (but after it has been defined), that code doesn't execute until the 'click' happens. This should work (but not sure why you would want to do it this way):
alert("Tap location in this map");
google.maps.event.addListener(map, 'click', function(event) {
mArray[count] = new google.maps.Marker({
position: event.latLng,
map: map
});
mArray[count].getPosition();
});
Using Maps API v3. As per Google documentation, if the map container is resized programmatically, the map resize event must be triggered manually.
Resize event: Developers should trigger this event on the map when the div changes size.
Therefore I am using:
google.maps.event.trigger(map, 'resize');
Which listener should I be using to update my markers based on the new bounds of the resized map container?
google.maps.event.addListener(map, 'resize', function() {
console.log(map.getBounds());
});
The above still shows the bounds before resizing.
Whenever the map is resized, the bounds will chage. Therefore, you can use the bounds_changed event:
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
});
It has the following description:
This event is fired when the viewport bounds have changed.
If you only want the event to be called after the map is resized, you can use a boolean variable to track whether the map has just been resized, like so:
var mapResized = false;
Then, whenever you trigger the resize function, you can set the mapResized variable to true. You can do so using a function:
function resizeMap(map) {
google.maps.event.trigger(map, 'resize');
mapResized = true;
}
Then, in the bounds_changed event, you can only react to call if mapResized is true, and afterwards set mapResized to false:
google.maps.event.addListener(map, 'bounds_changed', function() {
if (mapResized) {
// react here
}
mapResized = false;
}
If you want to know when the bounds change, you need to listen for the "bounds_changed" event
google.maps.event.addListener(map, 'bounds_changed', function() {
console.log(map.getBounds());
});
If you only want the first bounds changed event after you trigger the resize event, you can use:
google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
console.log(map.getBounds());
});
right before you trigger the resize event.
On Angular.js and IONIC I solved by insering this code after the **
declaration of var map = new google..... :
google.maps.event.addListenerOnce(map, 'bounds_changed', function () {
google.maps.event.trigger(map, 'resize');
var bounds = map.getBounds();
});
Using Google Maps API v3 for the first time and I've got a map with a bunch of markers. I wanted to make it so when you click one, a specific InfoWindow will display (specific to the marker you clicked). I was really surprised that the click event doesn't tell you the actual marker that was clicked!
I know there is a solution using a separate method to create a closure but that seems like a hack to me. Is there a better way to do it? Or, is there a way to ask the map "what markers exist at this position" and pass in the position from the event argument?
I expected events to work like this:
google.maps.event.addListener(marker, 'click', function(event, obj)
{
//Now I can work with "obj" - the thing that was clicked.
});
You should just refer to 'this' in the event listener.
google.maps.event.addListener(marker, 'click', function(e) {
// this == marker;
// e == MouseEvent
});
let mousemoveDraw = this.mousemoveDraw.bind(this);
let mousedown_event_DrawPolygonByFinger = this.mousedown_event_DrawPolygonByFinger.bind(this);
let mouseup_event_DrawPolygonByFinger = this.mouseup_event_DrawPolygonByFinger.bind(this);
this.mapInst.addEvents([
{ type: 'mousedown', event : mousedown_event_DrawPolygonByFinger },
{ type: 'mousemove', event: mousemoveDraw },
{ type: 'mouseup', event : mouseup_event_DrawPolygonByFinger }
]);
mapInst - is wrapper on google and yandex map. It is may use this way in callbacak
//event drawing event
mousemoveDraw(event : any){
console.log('mousemoveDraw')
console.log(this)
console.log(this.stateDrawing)
try{
if (this.stateDrawing != 1){
console.log(this.stateDrawing)
let lat = event.latLng.lat();
let lng = event.latLng.lng();
console.log(lat,lng)
this.polyLine.pushCoord({ lat, lng });
}
}catch(e){
console.log('error Polyline.mousemoveDraw : ',e.message);
}
}
How is that a hack when it's provided by the API? What you are describing is a hack. When you click on the marker, it will pass an event which contains the lat & lng.
google.maps.event.addListener(marker, 'click', function(e) {
console.log(e); // { x: 0, y: 0 }
});
I think it would be a mistake to try and hunt down the marker object based on the position of the click event. Using closures to associate the event with a particular marker seems like a valid solution to me. I would create a function that looks something like this:
function createMarker (point, map)
{
var marker = new google.maps.Marker({
position: point,
map: map,
title: "blah"});
marker.stuffOnTheMarker = "Some interesting stuff";
var content = buildSomeContentForThisMarker ();
google.maps.event.addListener(marker, 'click', function() {
infowindow.close ();
infowindow.setContent(content);
infowindow.open(map,marker);
// access the marker than caused this event
alert (marker.stuffOnTheMarker);
});
}