Check DistanceWidget's marker dragend - google-maps

DistanceWidget:
function DistanceWidget(map,markers) {
this.set('map', map);
this.set('position', map.getCenter());
this.set('markers',markers);
// MARKER CENTER
var marker = new google.maps.Marker({
draggable: true,
icon: {
url: "/public/img/move.png",
size: new google.maps.Size(20, 20),
anchor: new google.maps.Point(10, 10)
},
title: 'Di chuyển'
});
marker.bindTo('map', this);
marker.bindTo('position', this);
var me = this;
var radiusWidget = new RadiusWidget(markers);
this.bindTo('circle', radiusWidget);
radiusWidget.bindTo('map', this);
radiusWidget.bindTo('markers', this);
radiusWidget.bindTo('center', this, 'position');
this.bindTo('distance', radiusWidget);
this.bindTo('bounds', radiusWidget);
this.bindTo('radius', radiusWidget);
}
RadiusWidget:
RadiusWidget.prototype.center_changed = function() {
var bounds = this.get('bounds');
if (bounds) {
var lng = bounds.getNorthEast().lng();
var position = new google.maps.LatLng(this.get('center').lat(), lng);
this.set('sizer_position', position);
}
};
RadiusWidget.prototype.checkCenterDragend = function(){
//TODO SOMETHING HERE
}
I move (drag) MARKER CENTER in DistanceWidget, center_changed prototype will update. That's great.
Question: How can I check event dragend of MARKER CENTER to update something in checkCenterDragend prototype.
Thank for your time.

Simply call the method in the dragend-handler:
place this after the line var radiusWidget = new RadiusWidget(markers);
google.maps.event.addListener(marker, 'dragend', function() {
radiusWidget.checkCenterDragend.call(radiusWidget,this.getPosition());
});
The first argument passed to the function will be the marker-position(the center)

Related

Google Maps API - Activating the infowindow of a custom marker

I am trying to activate the infowindow for a custom marer, yielding a small description about the marker, I'm having some trouble at the moment, I have the custom marker working but I can't get the infowindow to show.
I tried calling the listener for the marker and storing it in a variable "customMarker", then calling another mouseover listener to activate the infowindow, but I'm having no luck, can anyone help me out?
var map;
//Creates a custom icon to be placed on the map
var goldStar = 'https://cdn2.iconfinder.com/data/icons/august/PNG/Star%20Gold.png';
function initialize() {
//Sets the zoom amount for the map, the higher the number, the closer the zoom amount
var mapOptions = {
zoom: 18
//center : myLatLng
};
//The map object itself
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var contentString = 'This is a custom toolTip';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
// Tries to find user location using HTML 5
if(navigator.geolocation)
{
//sets the map to the position of the user using location
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
var customMarker = google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng, map);
});
//This listener is not working
//google.maps.event.addListener(customMarker, 'mouseover', function() {
//infowindow.open(map,customMarker);
//});
}
function placeMarker(location, map)
{
var marker = new google.maps.Marker({
position: location,
icon: goldStar,
map: map,
title: "custom marker",
draggable:true
});
map.panTo(location);
}
The google.maps.event.addListener function does not return a marker. This won't work:
var customMarker = google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng, map);
});
Assign the event listener in your placeMarker function to the marker you create (also gives the advantage of maintaining function closure on the marker):
function placeMarker(location, map) {
var marker = new google.maps.Marker({
position: location,
icon: goldStar,
map: map,
title: "custom marker",
draggable: true
});
var contentString = 'This is a custom toolTip';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map,marker);
});
map.panTo(location);
}
working fiddle

Make geocoding map zoom on scroll

I am looking at two different geocode examples I found and I am looking to get the best of both features. I have not had much experience with geocoding and I find the google docs hard to follow
This one does everything I want except scroll in when the user uses the mouse wheel. http://jsfiddle.net/Ep7Rr/
I would like this one if I could get the marker to move as the user drags the map like in the first one.http://jsfiddle.net/AjeTc/
I know there are different ways such as new GMap2 and new google.maps.Geocoder
The first one works with this code
<script>
function load() {
if (GBrowserIsCompatible()){
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var center = new GLatLng(54.18173, -6.35284);
map.setCenter(center, 15);
geocoder = new GClientGeocoder();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
document.getElementById("lat").innerHTML = center.lat().toFixed(5);
document.getElementById("lng").innerHTML = center.lng().toFixed(5);
GEvent.addListener(marker, "dragend", function(){
var point = marker.getPoint();
map.panTo(point);
document.getElementById("lat").innerHTML = point.lat().toFixed(5);
document.getElementById("lng").innerHTML = point.lng().toFixed(5);
}); /*END GEvent.addListener(marker, "dragend", function(){*/
GEvent.addListener(map, "moveend", function() {
map.clearOverlays();
var center = map.getCenter();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
document.getElementById("lat").innerHTML = center.lat().toFixed(5);
document.getElementById("lng").innerHTML = center.lng().toFixed(5);
GEvent.addListener(marker, "dragend", function() {
var point =marker.getPoint();
map.panTo(point);
document.getElementById("lat").innerHTML = point.lat().toFixed(5);
document.getElementById("lng").innerHTML = point.lng().toFixed(5);
}); /*END GEvent.addListener(marker, "dragend", function() {*/
}); /*END GEvent.addListener(map, "moveend", function() {*/
} /*END if (GBrowserIsCompatible()){*/
} /*END function load*/
And the second uses this
<script type="text/javascript">
function showAddress() {
var map = new GMap2(document.getElementById("map"));
var address = document.getElementById('fullAddress').value;
return false;
} /*END function showAddress*/
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(54.18173, -6.35284);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Catch the event when the map is dragged.
Update the position of the marker by getting the map center
Geocode the position of the marker
google.maps.event.addListener(map, 'dragend', function() {
updateMarkerStatus('Drag ended');
marker.setPosition(map.getCenter());
geocodePosition(marker.getPosition());
});
like this : http://jsfiddle.net/ZYV9N/

How to show info window?

Hi guys been trying my best to solve this problem. I can't see info window even after clicking the marker
<script type="text/javascript">
function initialize() { //Initalize JS after onload
var map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
var randomPoint0 = new google.maps.LatLng(18.9750, 72.8258); //First Location
var marker0 = new google.maps.Marker({ //Set up marker
position: randomPoint0,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid0'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker0.getPosition());
});
var randomPoint1 = new google.maps.LatLng(19.8833, 76.7833); //First Location
var marker1 = new google.maps.Marker({ //Set up marker
position: randomPoint1,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid1'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker1.getPosition());
});
var randomPoint2 = new google.maps.LatLng(25.6000, 85.1167); //First Location
var marker2 = new google.maps.Marker({ //Set up marker
position: randomPoint2,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid2'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker2.getPosition());
});
var randomPoint3 = new google.maps.LatLng(18.5333, 73.8667); //First Location
var marker3 = new google.maps.Marker({ //Set up marker
position: randomPoint3,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid3'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker3.getPosition());
});
var randomPoint4 = new google.maps.LatLng(22.3000, 70.7833); //First Location
var marker4 = new google.maps.Marker({ //Set up marker
position: randomPoint4,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid4'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker4.getPosition());
});
var randomPoint5 = new google.maps.LatLng(17.8625, 78.886); //First Location
var marker5 = new google.maps.Marker({ //Set up marker
position: randomPoint5,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid5'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker5.getPosition());
});
var randomPoint6 = new google.maps.LatLng(13.0833, 80.2833); //First Location
var marker6 = new google.maps.Marker({ //Set up marker
position: randomPoint6,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid6'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker6.getPosition());
});
var randomPoint7 = new google.maps.LatLng(28.6167, 77.2167); //First Location
var marker7 = new google.maps.Marker({ //Set up marker
position: randomPoint7,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid7'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker7.getPosition());
});
var randomPoint8 = new google.maps.LatLng(19.9833, 73.8000); //First Location
var marker8 = new google.maps.Marker({ //Set up marker
position: randomPoint8,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid8'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker8.getPosition());
});
var randomPoint9 = new google.maps.LatLng(30.7343, 76.7933); //First Location
var marker9 = new google.maps.Marker({ //Set up marker
position: randomPoint9,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid9'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker9.getPosition());
});
var randomPoint10 = new google.maps.LatLng(22.5697, 88.3697); //First Location
var marker10 = new google.maps.Marker({ //Set up marker
position: randomPoint10,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid10'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker10.getPosition());
});
map.setCenter(marker0.getPosition());
map.setZoom(5);
var info = message;
var infoWindow = new google.maps.InfoWindow({
content: message
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open(map, marker);
});
}
</script>
this is my link
http://www.safarikidindia.com/safari-map.php#
All the marker pins are dynamic so how I can show address text, can you please advice
You need to had an infoWindow for each marker!
Supposing you have 10 different messages, stored in 10 variables (message0, message1, message2,...), you should write:
var infoWindow0 = new google.maps.InfoWindow({
content: message0
});
google.maps.event.addListener(marker0, 'click', function () {
infoWindow0.open(map, marker0);
});
var infoWindow1 = new google.maps.InfoWindow({
content: message1
});
google.maps.event.addListener(marker1, 'click', function () {
infoWindow1.open(map, marker1);
});
var infoWindow2 = new google.maps.InfoWindow({
content: message2
});
google.maps.event.addListener(marker2, 'click', function () {
infoWindow2.open(map, marker2);
});
...(and so on until marker10)

Google maps v3 open infowindow on load

I using this technique: http://www.geocodezip.com/v3_MW_example_map2.html
I want to have the first info window open when the map loads.
I also want to be able to center the map when you click a location link.
Can anyone help?
JS:
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var map = null;
function initialize() {
// create the map
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(50.822096, -0.375736),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel:false
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Add markers to the map
// Set up three markers with info windows
// add the points
var point = new google.maps.LatLng(50.810438, -0.374925);
var center = new google.maps.LatLng(50.810438, -0.374925);
var marker = createMarker(point,"Worthing","<p><b>Worthing</b><br>1-13 Buckingham Road,<br>Worthing,<br>West Sussex,<br>BN11 1TH</p>")
var point = new google.maps.LatLng(51.497421,-0.141604);
var center = new google.maps.LatLng(51.497421,-0.141604);
var marker = createMarker(point,"London","<p><b>London</b><br>Portland House,<br>Bressenden Place,<br>London,<br>SW1E 5RS</p>")
var point = new google.maps.LatLng(-33.867487,151.20699);
var center = new google.maps.LatLng(-33.867487,151.20699);
var marker = createMarker(point,"Sydney","<p><b>Sydney</b><br>Level 1, Cosco House,<br>95-101 Sussex Street,<br>Sydney NSW<br>Australia 2000</p>")
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
$('#side_bar li:first-child').addClass("active");
$('#side_bar li').click(function(){
$('#side_bar li').removeClass("active");
$(this).addClass("active");
});
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
var iconBase = '../Themes/FreshEgg/assets/img/';
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5,
icon: iconBase + 'map_marker_24x46.png',
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
infowindow.setContent(contentString);
infowindow.open(map,marker);
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<li><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a></li>';
}
google.maps.event.addDomListener(window, 'load', initialize);
HTML:
<ul class="list-inline" id="side_bar"></ul>
<div id="map_canvas"></div>
Add a 4th parameter to your createMarker() function for the default state of markers - createMarker(latlng, name, html, show) - where show will be a boolean variable: true to open on load, false to leave it closed. Then when you call createMarker() in your initialize() method specify true for the marker you want open on load.
Then in createMarker() add a condition that handles this for you - something like:
if (show) {
google.maps.event.trigger(marker, "click");
/*if you're going to take this approach, make sure this is triggered after
*you specify your listener
*alternately, you can also setContent() and open() your infoWindow here
*/
}
To have the map pan to the center when you click on the marker, you first need to disable the auto panning of the map when an infoWindow is open. This can be done where you set the options for your infoWindow:
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50),
disableAutoPan : true
});
Then, in your listener for the click event on the marker add the function to panTo(LatLng) the position of the marker on your map.
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
map.panTo(marker.getPosition());
});

InfoWindow on Marker using MarkerClusterer

This is my html code. I've try anything to add an infowindow on the markers but it don't wanna work. My data is loading from the "Alle_Ortswahlen.page1.xml" file.
Do anyone have an idea how can I add infoWindow to each marker?
<script type="text/javascript">
google.load('maps', '3', {
other_params: 'sensor=false'
});
google.setOnLoadCallback(initialize);
function initialize() {
var stack = [];
var center = new google.maps.LatLng(48.136, 11.586);
var options = {
'zoom': 5,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("Field4"));
var lng = parseFloat(markers[i].getAttribute("Field6"));
var marker = new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map: map,
title:"This is a marker"
});
stack.push(marker);
}
var mc = new MarkerClusterer(map,stack);
});
}
</script>
Before the for cycle, make an empty infowindow object.
var infowindow = new google.maps.InfoWindow();
Than in the for cycle, after the marker, add an event listener, like this:
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("You might put some content here from your XML");
infowindow.open(map, marker);
}
})(marker, i));
There is some closure magic happening when passing the callback argument to the addListener method. If you are not familiar with it, take a look at here:
Mozilla Dev Center: Working with Closures
So, your code should look something like this:
google.load('maps', '3', {
other_params: 'sensor=false'
});
google.setOnLoadCallback(initialize);
function initialize() {
var stack = [];
var center = new google.maps.LatLng(48.136, 11.586);
var options = {
'zoom': 5,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
var infowindow = new google.maps.InfoWindow();
GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("Field4"));
var lng = parseFloat(markers[i].getAttribute("Field6"));
var marker = new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map: map,
title:"This is a marker"
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("You might put some content here from your XML");
infowindow.open(map, marker);
}
})(marker, i));
stack.push(marker);
}
var mc = new MarkerClusterer(map,stack);
});
}
So what you need to do is add some code, inside your for-loop, associating an infowindow onclick event handler with each marker. I'm assuming you only want to have 1 infowindow showing at a time, i.e. you click on a marker, the infowindow appears with relevant content. If you then click on another marker, the first infowindow disappears, and a new one reappears attached to the other marker. Rather than having multiple infowindows all visible at the same time.
GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
// just create one infowindow without any content in it
var infowindow = new google.maps.InfoWindow({
content: ''
});
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("Field4"));
var lng = parseFloat(markers[i].getAttribute("Field6"));
var marker = new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map: map,
title:"This is a marker"
});
// add an event listener for this marker
google.maps.event.addListener(marker , 'click', function() {
// assuming you have some content in a field called Field123
infowindow.setContent(markers[i].getAttribute("Field123"));
infowindow.open(map, this);
});
stack.push(marker);
}
var mc = new MarkerClusterer(map,stack);
});