to clear markers from google maps I use:
mapContent.gmap('clear', 'markers');
But what if I want to clear specific markers, not all, lets say by their IDs? Is it possible?
The way that you clear a marker from the map is by calling the setMap(null) on the marker. It looks like you are using some third party plugin (jquery-ui-map perhaps?) for google maps. If you are using jquery-ui-map, use the find method to find the marker you want, then call setMap(null) on it.
marker.setMap(null) will only clear the marker overlay. It will not destroy the marker. As "clear" is potentially for. I too want to clear the markers and destroy the one I clicked. I have a working demo which I am willing to share. Though I used marker.setMap(null) it only hides the marker. I have yet to find a way to completely destroy it.
jsFiddle:
jsfiddle.net/ryanverdel/WRyrJ/
Code:
$(document).ready(function () {
var markerCount = 0;
$("#test1").gmap3({
map: {
options: {
center: [-2.2214281090541204, -78.695068359375],
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
scrollwheel: true,
disableDoubleClickZoom: true,
streetViewControl: false,
},
events: {
click: function (map, event) {
if (markerCount < 10) {
$(this).gmap3(
{
marker: {
latLng: event.latLng,
options: {
draggable: true,
animation: google.maps.Animation.DROP,
},
events: {
click: function (marker) {
marker.setMap(map);
marker.setMap(null);
marker = null;
delete marker;
console.log(marker);
markerCount--;
},
dragend: function (marker) {
$("#inputArray").empty();
setTimeout(function () {
var markers = $("#test1").gmap3({
get: {
all: true
}
});
$.each(markers, function (i, marker) {
$("#inputArray").append('<p>{"latitude":' + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() + '},' + '</p>');
});
}, 400);
}
},
},
});
markerCount++;
$("#inputArray").empty();
setTimeout(function () {
var markers = $("#test1").gmap3({
get: {
all: true
}
});
$.each(markers, function (i, marker) {
$("#inputArray").append('<p>{"latitude":' + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() + '},' + '</p>');
});
}, 400);
} else {
return false;
};
}
}
}
});
});
Related
This question already has answers here:
How to set zoom level in google map
(6 answers)
Closed 8 years ago.
I have tried everything but can't work out how to remove the fit to bounds part of this code and set a zoom level instead. The problem is this map is designed for multiple markers but I'm currently only using it with 1 and it zooms in too close.
var gmarkers = [];
var markers = [
[ '<div id="mapcontent">' +
'<a href ="#project0"><h4>43 Short Street</h4>' +
'</div>'
, -27.686478,153.131745]
];
function initializeMaps() {
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{ featureType: 'all', stylers: [{saturation: -100},{brightness: 5} ]} ],
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
for (i = 0; i < markers.length; i++) {
var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(pos);
marker = new google.maps.Marker({
icon: './img/mapmarker.png',
position: pos,
map: map
});
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
}
initializeMaps()
function myClick(id){
google.maps.event.trigger(gmarkers[id], 'click');
}
Thanks for your help!
Change
map.fitBounds(bounds);
to (or remove it)
// map.fitBounds(bounds);
Add your desired zoom and center when you initialize the map:
var myOptions = {
// change these per your desired center and zoom.
zoom: 4,
center: new google.maps.LatLng(desiredLat, desiredLng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
featureType: 'all',
stylers: [{
saturation: -100
},
{
brightness: 5
}]
}],
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
But if you only have one marker, you should also remove the loop.
I am using gmaps3 to show an overlay on mouseover but the mouseover listener is not called when I move my mouse to the marker
Following is the entire code
function init_map(){
$mapElements=jQuery(".map-details");
var markers=[];
$mapElements.each(function(e){
$e=$(this);
if(!($e.data("lat")&&$e.data("long")))
return;
var img_p="https://encrypted.google.com/images/srpr/logo4w.png"
var marker= {
latLng:[$e.data("lat"),$e.data("long")],
data:{
img_preview: img_p,
properties_name:"023 Central Park [Rent]",
properties_desc:"Lorem Ipsum Go Green",
properties_link:"#",
zip:001233,
city:"Jakarta"
}
}
markers.push(marker);
});
<?php /* if($first):/**/?>
$("#map-canvas-multiple").gmap3({
map:{
// CENTRAL MAP DEFAULT
address:"New Delhi, India",
options:{
zoom:8,
scaleControl: false,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
}
},
marker:{
// DATA LOCATION
values:markers
},
events:{
mouseover: function(marker, event, context){
console.log("hello from mouseover");
$(this).gmap3(
{
clear:"overlay"
},
{
overlay:{
latLng: marker.getPosition(),
options:{
content: "<div class='info-location'>" +
"<div class='text'><h4>"
+ context.data.properties_name +
"</h4>"+
"<img src='"+ context.data.img_preview +"' width=90> $300.999 <br/>"+
context.data.properties_desc +
"<br/><a href='"+context.data.properties_link +"'class='btn btn-proper btn-small'>See Detail</a></div>" +
"</div>" +
"<div class='arrow-location'></div>",
offset: {
x:-46,
y:-73
}
}
}
});
}
}
});
}
$(document).ready(init_map);
The markers get shown but mousover on them doesn't work
No errors in console. The hello mouseover line is not printed to console either
Figured this out after many hours of brainstorming. The events object goes inside the markers object
Instead of
marker:{
// DATA LOCATION
values:markers
},
events:{
mouseover: function(marker, event, context){
console.log("hello from mouseover");
$(this).gmap3(
{
clear:"overlay"
},
it should be
marker:{
// DATA LOCATION
values:markers,
events:{
mouseover: function(marker, event, context){
console.log("hello from mouseover");
$(this).gmap3(
{
clear:"overlay"
},
},
I'm trying to add a marker with a InfoWindow attached to it.
The marker is visible in both maps i.e., Street view and normal map.
But, InfoWindow only gets displayed in normal map but not when its opened in street view.
There's no error in firebug console.
The code :
var a = google.maps;
var b = {
center: new a.LatLng(parseFloat(ll[0]),parseFloat(ll[1])),
zoom: zoom,
mapTypeId: a.MapTypeId.ROADMAP,
streetViewControl: true,
mapTypeControlOptions: {
mapTypeIds: [a.MapTypeId.ROADMAP, a.MapTypeId.SATELLITE, a.MapTypeId.TERRAIN]
},
panControl: false,
zoomControlOptions: {
style: a.ZoomControlStyle.SMALL
}
};
map = new a.Map(document.getElementById("map-canvas"), b);
panorama = map.getStreetView();
panorama.setPosition(new google.maps.LatLng(42.345573,-71.098326));
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 270,
pitch: 0
}));
panorama.setVisible(false);
iw = new a.InfoWindow();
a.event.addListener(map, "click", function () {
if (iw) iw.close()
});
var g = new a.Marker({
position: c,
map: map,
clickable: true,
draggable: true,
optimized: false,
raiseOnDrag: false,
zIndex: highestOrder()
});
var description = "<h2>"+document.getElementById('marker-title').value+"</h2><br/><p style='width:200px;'>"+document.getElementById('marker-desc').value+"</p>";
a.event.addListener(g, "click", function () {
actual = g;
iw.setContent(description);
if(map.getStreetView().getVisible == true) {
iw.open(map.getStreetView(), this);
}
else {
iw.open(map, this);
}
});
a.event.addListener(g, "dragstart", function () {
if (actual == g) iw.close();
z_index += 1;
g.setZIndex(highestOrder())
})
To test if the div is showing streetView imagery or a map use:
if (map.getStreetView().getVisible()) {
Not:
if(map.getStreetView().getVisible == true) {
(you aren't calling the method ...)
the click listener should be:
a.event.addListener(g, "click", function () {
actual = g;
if (map.getStreetView().getVisible()) {
iw.setContent(description);
iw.open(map.getStreetView(), this);
} else {
iw.setContent(description);
iw.open(map, this);
}
});
working example
I want to load shapes to my all_overlays array where I'm storing the shapes
drawn through DrawingManager:
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControlOptions:{
position: google.maps.ControlPosition.TOP_RIGHT,
drawingModes:[
google.maps.drawing.OverlayType.POLYGON
]
},
markerOptions: {
draggable: true
},
polylineOptions: {
editable: true
},
rectangleOptions: polyOptions,
circleOptions: polyOptions,
polygonOptions: polyOptions,
map: map
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
all_overlays.push(e);
if (e.type != google.maps.drawing.OverlayType.MARKER) {
drawingManager.setDrawingMode(null);
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
});
setSelection(newShape);
}
});
but the problem is when I push one of this, the type of it seems to be different than the generated by drawing manager:
>all_overlays // array have a drawing manager generated object
[Object]
>coords = [ new google.maps.LatLng(-20.2164629885305, -70.1565831899643), new google.maps.LatLng(-20.2166618288932, -70.15673339366913), new google.maps.LatLng(-20.21687325381024, -70.15626400709152), new google.maps.LatLng(-20.21664672710243, -70.15616208314896)];
[Q,Q,Q,Q]
>p1= new google.maps.Polygon({paths: coords,editable: true });
Kh<br>
>all_overlays.push(p1);
2
>all_overlays;
[Object, Kh]
Then my new shape appears like 'Kh' , not like Object, then it doesn't have overlay or type properties, I'm wondering about how create a shape like the first one, created through D.M.
in order to attach to it a event listener like the another ones...
I need do that in order to can modify the loaded ones with the DM..
Thanks
You are using overlaycomplete so you have to dig a little deeper.
maybe try:
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
all_overlays.push(e.overlay);
if (e.overlay.type != "marker") {
drawingManager.setDrawingMode(null);
var newShape = e.overlay;
newShape.type = e.overlay.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
});
setSelection(newShape);
}
});
I have some problem when i set a marker, I found out this code for generate a google map and it works. But now i want to set a marker with my current position, and the problem is that i don't know where is the google map object, without this the marker isn't displayed.
this.mapg = new Ext.Map({
useCurrentLocation:true,
geo:new Ext.util.GeoLocation({
autoUpdate:true,
timeout:2000,
listeners:{
locationupdate: function(geo) {
center = new google.maps.LatLng(geo.latitude, geo.longitude);
// Set the marker
marker = new google.maps.Marker({
map:geo.map,//??? No idea where is the google map object
position: center
});
if (this.rendered)
this.update(center);
else
this.on('activate', this.onUpdate, this, {single: true, data: center});
},
locationerror: function(geo){
alert('got geo error');
}
}
})
});
After spending a day searching trough google, i founded this solution:
ascom.views.MapG = Ext.extend(Ext.Panel, {
layout:'card',
initComponent: function(){
var infowindow = new google.maps.InfoWindow({
content: 'prova'
});
this.map = new Ext.Map({
mapOptions : {
zoom: 12,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
useCurrentLocation: true,
listeners: {
maprender : function(comp, map){
var marker = new google.maps.Marker({
position: map.center,
title : 'Infofactory HQ',
map: map
});
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
}
});
this.panel = new Ext.Panel({
layout:'fit',
items:this.map,
dockedItems:[
{
xtype:'toolbar',
title:'Map GO'
}
]
});
this.items = this.panel;
ascom.views.MapG.superclass.initComponent.call(this);
}
});
It's in:
mapg.map
You don't show what mapg is a member of but you could access it explicitly.