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);
}
});
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'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'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.');
}
}
});
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;
};
}
}
}
});
});
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.