I have wrote this code to load markers from geojson and put it into markercluster. I'am not able to clear markercluster when the user select something else into dropdown list but clearMarkers() does nothing.
var markercluster;
$('#map_tracks').gmap({ 'center': '45.752051,6.295604', 'zoom': 12 }).bind('init', function(ev, map) {
$('#choose_tracks').change(function() {
var selected = $('#choose_tracks').val();
if ( selected != 'none' )
{
$("#map_tracks").gmap('clear', 'overlays');
$('#map_tracks').gmap('loadKML', 'sentier', 'http://example.com/media/kml/tracks/'+selected+'.kml');
$.getJSON( "http://example.com/media/geojson/tracks_poi/"+selected+".geojson").done(function( data ) {
if ( markercluster != undefined )
{
markercluster.clearMarkers();
}
$.each( data["features"], function( key, val ) {
var longitude = val["geometry"]["coordinates"][0];
var latitude = val["geometry"]["coordinates"][1];
var nom = val["properties"]["NOM"];
var type = val["properties"]["TYPE"];
$('#map_tracks').gmap('addMarker', {
'position': new google.maps.LatLng(latitude, longitude),
'icon':'http://example.com/media/kml/sentiers_img_poi/'+markersIcons[type]['name']
}).click(function() {
$('#map_tracks').gmap('openInfoWindow', { 'content': nom }, this);
});
});
markercluster = new MarkerClusterer(map, $('#map_tracks').gmap('get', 'markers'));
$('#map_tracks').gmap('set', 'MarkerClusterer', markercluster);
});
drawPath(selected);
}
});
});
How to clear markercluster ?
Related
I have a div as follows to display a google map:
#map {
width: 300px;
height: 300px;
border: 1px solid #DDD;
}
<div id="map"></div>
I want to display the map with a zoom level that fits the bounds of the above viewport.
When I code as follows it works fine:
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map($('#map')[0], {zoom: 10});
geocoder.geocode({ 'address': generatedAddress }, function (results, status) {
if (status == 'OK') {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
if (results[0].geometry.viewport)
map.fitBounds(results[0].geometry.viewport);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
When I use typeahead-addresspicker.js to generate the map it zooms in too far?
I've narrowed it down to the following code. When you call the AddressPicker.prototype.updateMap function the boundsForLocation option on AddressPicker.prototype.initMap function should return this.map.fitBounds(response.geometry.viewport); When I debug I can see that it is hitting the following code inside the AddressPicker.prototype.updateBoundsForPlace function as expected:
if (response.geometry.viewport) {
console.log('test');
return this.map.fitBounds(response.geometry.viewport);
}
What I don't understand is how it gets wired back to the google.maps.Map - I'm not familiar with ptototypejs? So basically running through it, we initilize the map by calling initMap, then we call the updateMap function. Inside updateMap function we are calling the following snippet of code:
if (_this.map) {
if ((_ref = _this.mapOptions) != null) {
_ref.boundsForLocation(response);
}
}
which is suppose to set the bounds by calling the updateBoundsForPlace but the google maps options doesnt expose any property called boundsForLocation?
AddressPicker.prototype.initMap = function() {
var markerOptions, _ref, _ref1;
if ((_ref = this.options) != null ? (_ref1 = _ref.map) != null ? _ref1.gmap : void 0 : void 0) {
this.map = this.options.map.gmap;
} else {
this.mapOptions = $.extend({
zoom: 3,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP,
boundsForLocation: this.updateBoundsForPlace
}, this.options.map);
this.map = new google.maps.Map($(this.mapOptions.id)[0], this.mapOptions);
}
this.lastResult = null;
markerOptions = $.extend({
draggable: true,
visible: false,
position: this.map.getCenter(),
map: this.map
}, this.options.marker || {});
this.marker = new google.maps.Marker(markerOptions);
if (markerOptions.draggable) {
return google.maps.event.addListener(this.marker, 'dragend', this.markerDragged);
}
};
AddressPicker.prototype.updateMap = function(event, place) {
if (this.options.placeDetails) {
return this.placeService.getDetails(place, (function(_this) {
return function(response) {
var _ref;
_this.lastResult = new AddressPickerResult(response);
if (_this.marker) {
_this.marker.setPosition(response.geometry.location);
_this.marker.setVisible(true);
}
if (_this.map) {
if ((_ref = _this.mapOptions) != null) {
_ref.boundsForLocation(response);
}
}
return $(_this).trigger('addresspicker:selected', _this.lastResult);
};
})(this));
} else {
return $(this).trigger('addresspicker:selected', place);
}
};
AddressPicker.prototype.updateBoundsForPlace = function(response) {
if (response.geometry.viewport) {
return this.map.fitBounds(response.geometry.viewport);
} else {
this.map.setCenter(response.geometry.location);
return this.map.setZoom(this.options.zoomForLocation);
}
};
Managed to fix by commenting out the following lines:
//if (response.geometry.viewport) {
// return this.map.fitBounds(response.geometry.viewport);
//} else {
this.map.setCenter(response.geometry.location);
return this.map.setZoom(this.options.zoomForLocation);
//}
I'm using the Google Maps Javascript API to let users draw custom polygons with properties to be entered into a database. Before inserting them into the database though, they need to be able to delete selected shapes they've drawn.
This function isn't throwing any errors but it also isn't deleting the feature. What am I doing wrong?
var selectedshape;
function initMap() {
map = new google.maps.Map(document.getElementById('map2'), {
zoom: 1,
center: { lat: -1, lng: 1 }
});
function clearSelection() {
if (selectedShape) {
selectedShape = null;
}
}
function setSelection(shape) {
clearSelection();
selectedShape = shape;
}
map.data.addListener('click', function(event) {
map.controls[google.maps.ControlPosition.TOP_RIGHT].clear()
setSelection(event.feature);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerControlDiv);
map.data.revertStyle();
map.data.overrideStyle(event.feature, { strokeWeight: 8 });
selectID = event.feature.getProperty('uniqid')
selectID = event.feature.getProperty('uniqgeom')
$(".getSelectID").attr("id", selectID)
});
bounds = new google.maps.LatLngBounds();
map.data.addListener('addfeature', function(event) {
processPoints(event.feature.getGeometry(), bounds.extend, bounds);
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
var uniqid = "_" + Date.now();
feature_type = event.feature.getGeometry().getType()
if (feature_type == 'LineString') {
encoded_geom = event.feature.getProperty('uniqgeom') || google.maps.geometry.encoding.encodePath(event.feature.getGeometry().getArray());
} else {
encoded_geom = event.feature.getProperty('uniqgeom') || google.maps.geometry.encoding.encodePath(event.feature.getGeometry().getArray()[0].getArray())
}
event.feature.setProperty('encoded_geom', encoded_geom);
selectID = encoded_geom
$(".getSelectID").attr("id", selectID)
event.feature.setProperty('uniqid', uniqid);
});
function deleteSelectedShape() {
map.controls[google.maps.ControlPosition.TOP_RIGHT].clear()
if (selectedShape) {
map.data.forEach(function(feature) {
if (feature.getProperty('uniqid') == selectedShape.uniqid) {
map.data.remove(feature);
}
});
}
}
I believe the problem is a syntax error in
if (feature.getProperty('uniqid') == selectedShape.uniqid) {
I'm using Google maps to place pins on the world, and I'm using markercluster.js to cluster the pins when they get too close. What I'm looking to do is make it so you can hover over a cluster of pins and a drop down will appear showing the titles of the pins in that area.
I haven't seen anything on the forums about this, so I thought maybe someone else might have run into this and found a solution already. Thanks for any help in advance!
My code is just the typical way to add pins to the Google maps API. But I'll list it here just in case.
var bounds = new google.maps.LatLngBounds();
var markers = [];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
//icon: '/bin/images/people/' + locations[i][4] + '-1.jpg'
});
markers.push(marker);
bounds.extend(marker.position);
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker)
}
})(marker, i))
}
var clusterStyles = [{
textColor: 'white',
url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
height: 50,
width: 50
}, {
textColor: 'white',
url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
height: 50,
width: 50
}, {
textColor: 'white',
url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
height: 50,
width: 50
}];
var mcOptions = {
gridSize: 50,
styles: clusterStyles,
maxZoom: 15
};
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function() {
map.setZoom(3);
google.maps.event.removeListener(listener)
});
You could consider the following approach.
Modify ClusterIcon by introducing clustermouseover event that will be triggered on mouseover event:
//Note: the remaining code is omitted from this function
ClusterIcon.prototype.onAdd = function() {
this.div_ = document.createElement('DIV');
var panes = this.getPanes();
panes.overlayMouseTarget.appendChild(this.div_);
var that = this;
google.maps.event.addDomListener(this.div_, 'mouseover', function() {
that.triggerClusterMouseOver();
});
};
where
ClusterIcon.prototype.triggerClusterMouseOver = function () {
var markerClusterer = this.cluster_.getMarkerClusterer();
google.maps.event.trigger(markerClusterer, 'clustermouseover', this.cluster_);
};
Attach event handler for displaying the corresponding information. The following example demonstrates how to display the list of names:
google.maps.event.addListener(markerClusterer, 'clustermouseover', function(clusterer) {
var markers = clusterer.getMarkers();
markers.forEach(function(marker){
infowindow.content += '<div>' + marker.title + '</div>';
});
infowindow.setPosition(clusterer.getCenter());
infowindow.open(clusterer.getMap());
});
Example: Plunker
You could consider the following approach Also its work for me :
public void initilizeMap() {
googleMap = mFragment.getMap();
googleMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN);
googleMap.getUiSettings().setZoomControlsEnabled(true`enter code here`); // true to`enter code here`
googleMap.getUiSettings().setZoomGesturesEnabled(true);
googleMap.getUiSettings().setCompassEnabled(true);
googleMap.getUiSettings().setMyLocationButtonEnabled(true);
googleMap.getUiSettings().setRotateGesturesEnabled(true);
if (googleMap == null) {
Toast.makeText(getActivity(), "Sorry! unable to create maps",
Toast.LENGTH_SHORT).show();
}
mClusterManager = new ClusterManager<MyItem>(getActivity(), googleMap );
// googleMap.setInfoWindowAdapter(new CustomInfoWindowAdapter());
googleMap.setOnMapLoadedCallback(this);
googleMap.setMyLocationEnabled(true);
googleMap.setBuildingsEnabled(true);
googleMap.getUiSettings().setTiltGesturesEnabled(true);
MyItem offsetItem = new MyItem(Double.parseDouble(outletList.get(i).getMap_latitude()),
Double.parseDouble(outletList.get(i).getMap_longitude()), title , address);
mClusterManager.addItem(offsetItem);
googleMap.setInfoWindowAdapter(new CustomInfoWindowAdapter(offsetItem));
}
private class CustomInfoWindowAdapter implements InfoWindowAdapter {
Marker marker;
private View view;
private MyItem items;
public CustomInfoWindowAdapter(MyItem item) {
view = getActivity().getLayoutInflater().inflate(
R.layout.custom_info_window, null);
this.items = item;
}
#Override
public View getInfoContents(Marker marker) {
if (marker != null && marker.isInfoWindowShown()) {
marker.hideInfoWindow();
marker.showInfoWindow();
}
return null;
}
#Override
public View getInfoWindow(final Marker marker) {
this.marker = marker;
String url = null;
if (marker.getId() != null && markers != null && markers.size() > 0) {
if (markers.get(marker.getId()) != null
&& markers.get(marker.getId()) != null) {
url = markers.get(marker.getId());
}
}
final ImageView image = ((ImageView) view.findViewById(R.id.badge));
if (url != null && !url.equalsIgnoreCase("null")
&& !url.equalsIgnoreCase("")) {
imageLoader.displayImage(url, image, options,
new SimpleImageLoadingListener() {
#Override
public void onLoadingComplete(String imageUri,
View view, Bitmap loadedImage) {
super.onLoadingComplete(imageUri, view,
loadedImage);
getInfoContents(marker);
}
});
} else {
image.setImageResource(R.drawable.ic_launcher);
}
final String title = items.getTitle();
Log.e(TAG, "TITLE : "+title);
final TextView titleUi = ((TextView) view.findViewById(R.id.title));
if (title != null) {
titleUi.setText(title);
} else {
titleUi.setText("");
}
final String address = items.getAddress();
final TextView snippetUi = ((TextView) view
.findViewById(R.id.snippet));
if (address != null) {
snippetUi.setText(address);
} else {
snippetUi.setText("");
}
I am having trouble when trying to fix the vertical bands issue on Google Maps API for javascript.
The fact is that I only have access to the jQuery that is loaded automatically by the CRM.
In fact, I need to set the max-width property to none for all the img tags inside my Map div (#map-canvas).
This works if I edit the HTML code directly from Firefox Tools, but I can't find a way to have this done automatically.
The code I have access to looks like this:
var mymap;
jQuery.Class("MapView",{
initialize:function(){
var mapOptions = {
center: { lat: 45.447541, lng: 11.7451883},
zoom: 14
};
return new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
},{});
jQuery(document).ready(function(){
mymap = MapView.initialize();
});
$(window).bind("load", function() {
$('#map-canvas').find('img').css('max-width: none');
$("#map-canvas").hide().fadeIn('fast');
});
I tried a bunch of other online tutorials, but I've not been able to solve this.
Does anyone know a way to pull me out of this?
Thanks,
Riccardo
EDIT:
So, here's my complete code up to now:
var mymap;
var mymap_markers = [];
jQuery.Class("MapView",{
registerOnChangeEventOfSourceModule: function () {
jQuery('#sourceModule').on('change', function (e) {
jQuery('#picklistFields').find('option').remove().end().append('<option value="--">--</option>').val('--');
var element = jQuery(e.currentTarget);
var params = {};
var sourceModule = element.val();
params = {
'module': 'Map',
'action': "GetCVAjax",
'mode': "changeModule",
'sourceModule': sourceModule
};
AppConnector.request(params).then(
function (data) {
if (data) {
jQuery.each(data.result.options, function (i, item) {
var o = new Option(item, i);
jQuery(o).html(item);
jQuery("#picklistFields").append(o);
jQuery("#picklistFields").trigger('liszt:updated');
});
}
},
function (jqXHR, textStatus, errorThrown) {
alert(textStatus);
}
);
});
},
registerOnChangeEventOfCustomView: function () {
jQuery('#picklistFields').on('change', function (e) {
var element = jQuery(e.currentTarget);
var params = {};
var cvid = element.val();
var module = jQuery('#sourceModule').val();
params = {
'module': 'Map',
'action': "GetCVAjax",
'mode': "getMarkers",
'sourceModule': module,
'cvid': cvid
};
for (var i = 0; i < mymap_markers.length; i++) {
mymap_markers[i].setMap(mymap);
}
mymap_markers = [];
AppConnector.request(params).then(
function (data) {
if (data) {
jQuery.each(data.result, function (i, item) {
var myLatlng = new google.maps.LatLng(item['coords']['lat'],item['coords']['lng']);
var popupcontentCV = "<table class=\"table table-condensed table-striped table-bordered\"><tr><td colspan=\"2\"><strong>"+item['title']+"</strong></td></tr>";
jQuery.each(item['data'], function (label, value){
popupcontentCV += "<tr><td>"+app.vtranslate(label,module)+"</td><td>"+value+"</td></tr>";
});
popupcontentCV += "</table>";
var infowindow = new google.maps.InfoWindow({
content: popupcontentCV,
maxWidth: 315,
maxHeight: 550
});
var marker = new google.maps.Marker({
position: myLatlng,
map: mymap,
title: item['data']['title']
});
mymap_markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(mymap,marker);
});
});
}
},
function (jqXHR, textStatus, errorThrown) {
alert(textStatus);
}
);
});
},
initialize:function(){
var mapOptions = {
center: { lat: 45.447541, lng: 11.7451883},
zoom: 14
};
return new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
},{});
jQuery(document).ready(function(){
mymap = MapView.initialize();
MapView.registerOnChangeEventOfSourceModule();
MapView.registerOnChangeEventOfCustomView();
});
google.maps.event.addListener(mymap, 'idle', function () {
$('#map-canvas img').css('max-width', 'none');
});
/*
$(window).bind("load", function() {
$('#map-canvas').find('img').css('max-width: none');
$("#map-canvas").hide().fadeIn('fast');
});*/
Try either a CSS rule or with jQuery:
CSS
#map-canvas img {
max-width: 100%;
}
jQuery
google.maps.event.addListenerOnce(map, 'idle', function () {
$('#map-canvas img').css('max-width', '100%');
});
I am not sure whether you should set the max-width to none or 100%. Try both. And maybe try to write your CSS rule with !important if it doesn't work right away.
For the jQuery version, I added the css() function within the map idle event listener (therefore you are sure the map is loaded and ready).
Edit
I can't test your code but you can try this way:
jQuery(document).ready(function () {
mymap = MapView.initialize();
google.maps.event.addListenerOnce(mymap, 'idle', function () {
$('#map-canvas img').css('max-width', '100%');
});
MapView.registerOnChangeEventOfSourceModule();
MapView.registerOnChangeEventOfCustomView();
});
I use Map Toolbar implementation for javascript Google maps api v3:
http://nettique.free.fr/gmap/toolbar.html
It's working great! My only matter is that I wanna keep the dblclick event to zoom while creating a polygon, but now, if I double-click, I create a new marker and delete it right away.
With an older version of my code, I was using a timeout like explained here:
https://stackoverflow.com/a/8417447/1895428
but now, no matter where I put the setTimeout function, it makes no change. Does anybody knows where to put it?
I tried to modify the addPoint function in the js code (http://nettique.free.fr/gmap/lib/mapToolbar.js), but it didn't work:
addPoint : function(e, poly, index) { //alert(MapToolbar["shapeCounter"]);
update_timeout = setTimeout(function(){
var e = (typeof e.latLng != "undefined")? e.latLng : e,
image = new google.maps.MarkerImage('/image/marker-edition.png',
new google.maps.Size(9, 9),
new google.maps.Point(0, 0),
new google.maps.Point(5, 5)),
imageover = new google.maps.MarkerImage('/image/marker-edition-over.png',
new google.maps.Size(9, 9),
new google.maps.Point(0, 0),
new google.maps.Point(5, 5)),
path = poly.getPath(),
index = (typeof index != "undefined")? index : path.length,
markers = (poly.markers)? poly.markers : new google.maps.MVCArray,
marker = new google.maps.Marker({
position: e,
map: map[mapkey],
draggable: true,
icon: image
});
marker.index = index;
path.insertAt(index, e);
markers.insertAt(index, marker)
if(arguments[2]){
MapToolbar.reindex(markers);
} }, 200);
//click on a polymarker will delete it
google.maps.event.addListener(marker, 'click', function() {
marker.setMap(null);
markers.removeAt(marker.index);
path.removeAt(marker.index);
MapToolbar.reindex(markers);
if(markers.getLength() == 0){
MapToolbar.removeFeature(poly.id);
}
});
/*
google.maps.event.addListener(marker, 'dragstart', function() {
MapToolbar.currentlyDragging = true;
})
*/
google.maps.event.addListener(marker, 'position_changed', function() {
path.setAt(marker.index, marker.getPosition());
})
google.maps.event.addListener(marker, 'dragend', function() {
//MapToolbar.currentlyDragging = false;
path.setAt(marker.index, marker.getPosition());
var position = marker.getPosition(),
p;
//get previous point
if(typeof path.getAt(marker.index-1) != "undefined"){
var m1 = path.getAt(marker.index -1);
p = MapToolbar.getMidPoint(position, m1);
MapToolbar.addPoint(p, poly, marker.index);
}
// get next point
if(typeof path.getAt(marker.index+1) != "undefined"){
var m2 = path.getAt(marker.index+1);
p = MapToolbar.getMidPoint(position, m2);
MapToolbar.addPoint(p, poly, marker.index+1);
}
});
google.maps.event.addListener(marker, 'mouseover', function() {
this.setIcon(imageover);
});
google.maps.event.addListener(marker, 'mouseout', function() {
this.setIcon(image);
});
MapToolbar["isStarted"]++;
}
Not sure if this will work but following the stackoverflow example you have to change only listener code:
addPoint : function(e, poly, index) {
var e = (typeof e.latLng != "undefined")? e.latLng : e,
...
//click on a polymarker will delete it
var update_timeout = null;
google.maps.event.addListener(marker, 'click', function() {
update_timeout = setTimeout(function() {
marker.setMap(null);
markers.removeAt(marker.index);
path.removeAt(marker.index);
MapToolbar.reindex(markers);
if(markers.getLength() == 0){
MapToolbar.removeFeature(poly.id);
}
}, 200);
});
google.maps.event.addListener(marker, 'dblclick', function(event) {
clearTimeout(update_timeout);
});
...