How to change active marker icon in vue by clicking - google-maps

I'm using vue2-google-maps and it would be perfect - to change the marker icon by click on it. I try to write some code but it doesn't work correctly.
Template:
<gmap-map
ref="mainMap"
:center="startLocation"
:zoom="6"
map-type-id="roadmap"
style="width: 100%; height: 100%"
:options="{
zoomControl: false,
scaleControl: false,
mapTypeControl: false,
fullscreenControl: false,
streetViewControl: false,
disableDefaultUi: false
}"
>
<gmap-marker
v-for="(item, key) in coordinates"
:key="key"
:position="getPosition(item)"
:clickable="true"
:icon="markerOptions"
#click="toggleInfo(item, key)"
></gmap-marker>
</gmap-map>
Script:
...
let mapMarker = require('../images/ic-map-marker.svg'),
mapMarkerActive = require('../images/ic-map-marker-active.svg');
...
startLocation: {
lat: 49.0384,
lng: 33.4513
},
coordinates: {
0: {
city: City 0,
lat: '50.4021702',
lng: '30.3926088'
},
1: {
city: City 1,
lat: '49.9543502',
lng: '36.1241697'
}
},
infoOpened: false,
infoCurrentKey = null,
markerOptions: {
url: mapMarker
}
...
toggleInfo: function (marker, key) {
if (this.infoCurrentKey == key) {
if (this.infoOpened) {
this.infoOpened = false;
this.markerOptions = this.mapMarker;
} else {
this.infoOpened = true;
this.markerOptions = this.mapMarkerActive;
}
} else {
this.infoOpened = true;
this.infoCurrentKey = key;
this.markerOptions = this.mapMarkerActive;
}
}
All the markers are changed to active icon by click. Could someone help me please?
Thanks in advance!
Whole code here: https://codesandbox.io/s/map-vue-template-mv33z

all the map markers are referencing the same marker options object. When you change that object then it affects all the map markers.
you can have a data property called
selectedKey: null
have a method like:
getMarkers(key) {
if (this.selectedKey === key) return this.mapMarkerActive;
return this.mapMarker;
},
then you can have
:icon="getMarkers(key)"
or whatever logic you want to identify the selected marker (personally i'd put an id on the marker coordinate object and then have a selectedMarker data property)
in my example i have modified your example and the icons now display as you require.
https://codesandbox.io/s/map-vue-template-q67u0

Related

How can delete a polygon on google maps Ionic 3

I am new with the Native Google Maps API with Cordova using Ionic 3, and I would like to know the way to delete polygons, markers, circles, etc. with a button, for example.
Actually, I have in a method called loadMap() the parts to create a polygon and it works. But I would like to be able from another method, like removePolygon(), remove the polygon.
My loadMap()code is the follows:
loadMap() {
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: 39.695263,
lng: 3.017571
},
zoom: 8,
}
};
this.map = GoogleMaps.create('map_canvas', mapOptions);
let myPolygonCoord: ILatLng[] = [
{
lat: 39.81952717082459,
lng: 3.1078016219598794
},
{
lat: 39.7794339492445,
lng: 3.0212842879755044
},
{
lat: 39.66007130788319,
lng: 3.1476270614130044
},
{
lat: 39.72030660365558,
lng: 3.2739698348505044
}
];
let myPolygon: PolylineOptions = {
'points': myPolygonCoord,
'strokeColor': '#89c3eb',
'fillColor': '#89c3eb',
'strokeWidth': 2
};
this.map.addPolygon(myPolygon).then((polygon: Polygon) => {});
}
By the other hand, on the method removePolygon():
removePolygon(){
//how to call the map and remove the polygon?
}
Any help would be appreciated it.
Well, after trying different stuff, I could find a way to solve this.
Declare a variable the one stores the value returned after create the polygon, and after that, just simply use the method remove:
generalPolygon : any;
this.map.addPolygon(myPolygon).then((polygon: Polygon) => {this.generalPolygon = polygon});
removePolygon(){
this.generalPolygon.remove();
}
And that's it.

EXTJS Google Map are blank

I am using GmapPanelv3.js. I can see the zooming and everything, but how come the map is blank? Here is an example http://jsfiddle.net/anthor/4aAKL/3/
Ext.onReady(function() {
var w = Ext.create('Ext.window.Window', {
title: 'Gmap',
height: 400,
width: 600,
layout: 'border',
items: [
{
title: 'Message List',
region: 'south',
height: 50,
split: true,
collapsible: true,
margins: '0 5 5 5',
collapsed: true
},{
region: 'west',
title: 'Tree',
collapsible: true,
width: 100,
items: [
{
xtype: 'button',
text: 'add',
handler: addInfoWindow // reference to event handler function
}]
},{
xtype: 'gmappanel',
region: 'center',
cls: 'reset-box-sizing',
mapConfOpts:['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
lat: 3.951941,
long: 102.052002
}
}
]
});
/**
* Just example, do not write code like this!
* GMApPanel source code
* http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/ux/GMapPanel.js
*/
// get the map reference
var map = w.down('gmappanel');
function openInfoWindow(content, marker) {
// create a info window
var infowindow = new google.maps.InfoWindow({
content: content,
size: new google.maps.Size(50,50)
});
infoBubble = new InfoBubble({
content: '<div class="example">Some label</div>',
//position: new google.maps.LatLng(53.5267, newlong),
shadowStyle: 1,
padding: 10,
borderRadius: 5,
minWidth: 200,
borderWidth:1,
//borderColor: '#2c2c2c',
disableAutoPan: true,
hideCloseButton: false,
backgroundClassName: 'example',
//arrowSize: 0,
//arrowPosition:7,
//arrowStyle:3
});
infoBubble.open(map.gmap,marker);
var div = document.createElement('DIV');
div.innerHTML = 'Hello';
infoBubble.addTab('A Tab', div);
infoBubble.addTab('A Tab', div);
// All GMapPanel instances has the reference to the underlying googlemap object
// porperty name `gmap`.
//infowindow.open(map.gmap, marker);
}
function addInfoWindow() {
// uses GMapPanel `addMarker` method to create a marker and attached it to tree.
// Detailes - look at the source code of GMapPanel
var marker = map.addMarker({
lat: 53.5267,
lng: -1.13330,
title: 'Marker',
// listeners can be added via configuration or after create
// using standard google maps API, i.e.
// google.maps.event.addListener(marker, 'click', function() {...})
listeners: {
click: function() {
openInfoWindow('hello', marker);
}
}
});
}
w.show();
});
i just change
setCenter: {
'lat': 3.951941,
'lng': 102.052002,
}
all problem are solved!

Google Maps toggle button

I have been struggling with this all day. I have made new buttons to actually go on my map that match the Google Maps buttons sit on the map better. I have been trying to get them to work with the current buttons above the map so I can remove those but I can't seem to get them to work. What am I missing.
Here is a link to the page so you can see. The buttons above the map work and I am going to remove them. The buttons on the map don't work which I am trying to get to work.
DEMO LINK
Here is the code. The var radarButton and var satButton is the new ones. The ones below that is to the current buttons.
jQuery(document).ready(function($) {
var mapTypeId = wundermap.getMapTypeId("hyb");
var googlemap = new google.maps.Map($("#map")[0], {
center: new google.maps.LatLng(32.782878, -96.609862),
panControl: false,
zoom: 6,
mapTypeId: mapTypeId,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
});
var radarOptions = {
gmap: googlemap,
name: 'Radar',
position: google.maps.ControlPosition.TOP_RIGHT,
action: function(){
if (wundermap.map.overlayMapTypes.length==0) {
wundermap.map.overlayMapTypes.push(null); // create empty overlay entry
wundermap.map.overlayMapTypes.setAt("1",Radar);
}
else {
wundermap.map.overlayMapTypes.clear();
}
}
}
var radarButton = new buttonControl(radarOptions);
var satOptions = {
gmap: googlemap,
name: 'Satellite',
position: google.maps.ControlPosition.TOP_RIGHT,
action: function(){
if (wundermap.map.overlayMapTypes.length==0) {
wundermap.map.overlayMapTypes.push(null); // create empty overlay entry
wundermap.map.overlayMapTypes.setAt("1",Satellite);
}
else {
wundermap.map.overlayMapTypes.clear();
}
}
}
var satButton = new buttonControl(satOptions);
wundermap.setOptions({
map: googlemap,
refreshPeriod: 60000,
units: "english",
debug: 0,
source: "wxmap",
StreetsOverlay: true,
layers: [
{
layer: "Radar",
active: "on",
opacity: 70,
type: "N0R",
type2: "",
animation: {
num: 6,
max: 10,
delay: 25
},
stormtracks: "off",
smooth: "on",
subdomain: "radblast-aws"
},
{
layer: "Satellite",
defaultUI: 0,
opacity: "85",
source: "",
active: "off",
animation: {
num: 1,
max: 8,
delay: 25
}
},
],
});
wundermap.initialize();
});
Here is the link to the code for the actual layer. The code is to long to post but the overlay is called Radar.
RADAR CODE
The place to start is the JavaScript console. The error messages there tell you what the problems are.
First, when the page is loaded you have an error on line 286 of wxgr3radar.php:
<body onload="initialize()">
Where is your initialize() function defined? I don't see it in your code.
Then, when I click the Satellite button it stops on line 41 of imap.js because map.overlayMapTypes is undefined:
if (map.overlayMapTypes.length==0) {
Here you're expecting map to be a Maps API object, but map is not what you think it is. Look at it in the debugger. It's a DOM element, not a Maps API map. Your Maps API map is in a variable called googlemap, which you create in line 3 of imap.js.

Gmap3 applying a new center postion without destroying the whole map

I am hacking around with gmap3 managing to get the first task working. Showing the map using a lat long.
My javascript look likes
$('#map_canvas').gmap3(
{
action: 'init',
options: {
center: [x,y],
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: []
}
}
},
{
action: 'addMarkers',
radius: 100,
markers: GetMarkers(),
clusters:
{
0:
{
content: '<div class="cluster cluster-3">CLUSTER_COUNT <div class="cluster-3text">Stops</div> </div>',
width: 66,
height: 65
}
},
marker:
{
options:
{
icon: new google.maps.MarkerImage('../img/marker.png', size, origin, null, null)
},
events:
{
mouseover: function (marker, event, data) {
getArrivalsAndStop(marker, event, data);
},
mouseout: function () {
$(this).gmap3({ action: 'clear', name: 'overlay' });
}
}
}
});
This loads the map how I want. My next step is to be able apply a new lat & long. How can I do this without destroying the whole map and recreating it everytime?
I am using jquery gmap3 plugin.
If you want to call setCenter after having initialized the map and without reloading the whole thing you can do this like this :
$('#mymap').gmap3('get').setCenter(new google.maps.LatLng(48.706685,-3.486694899999975))
$('#mymap').gmap3('get') is the magic thing here, it give you the real google map object I think.
It was hard for me to find this out so I hope it can help someone else.
From the documentation:
This example executes map.setCenter with the result of the address resolution, target is not specified because this is the map.
$('#test').gmap3(
{
action: 'getLatLng',
address: '2 bis rue saint antoine, eguilles',
callback: function(result){
if (result){
$(this).gmap3({action: 'setCenter', args:[ result[0].geometry.location ]});
} else {
alert('Bad address 2 !');
}
}
});
So it looks like if you know the coordinates and don't need to use the geocoder, it would be:
$(this).gmap3({action: 'setCenter', args:[ new google.maps.LatLng(latitude, longitude) ]});
Kind of late in the game, but I am using a list and map(google maps type). hope it helps
Here is how I achieved it
$(document).delegate('#inner_list li', 'click', function () {
var id = $(this).attr('data-id');
$("#map-canvas").gmap3({
get: {
name:"marker",
id: id,
all: true,
callback: function(objs){
$.each(objs, function(i, obj){
obj.setIcon("http://www.markericon.com");
var newLL = obj.getPosition()
$('#map-canvas').gmap3('get').panTo(newLL)
});
}
}
});
});

init gmap3 using geocode

I am new to gmap3, is it possible to init the gmap3 using a place address?
I know generally it is done with latitude and longitude.
I have done markers with this this location name using this example.
I have already gone through this example too, but no luck.
And also i need to zoom the places on selection, i use auto complete for this purpose.
My code is given below
$('#test').gmap3(
{ action:'init',
options:{
address: "kerala,india"
}
}
);
First use getLatLng() to retrieve the location, when successfull set the center:
$('#test1').gmap3(
{ action : 'getLatLng',
address:'kerala,india',
callback : function(result){
if (result){
$(this).gmap3({action: 'setCenter', args:[ result[0].geometry.location ]},
{action: 'setZoom', args:[ 12]});
} else {
alert('not found !');
}}});
var add="kerala,india";
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: add, region: 'no' },
function (results, status) {
if (status.toLowerCase() == 'ok') {
// Get center
var coords = new google.maps.LatLng(
results[0]['geometry']['location'].lat(),
results[0]['geometry']['location'].lng()
);
//alert(coords);
$map.gmap3("get").setCenter(coords);
$map.gmap3("get").setZoom(12);
addMarker(coords);
}
else {
alert("address not found");
}
}
function addMarker(marker) {
$map = $('#googleMap');
if (marker) {
$map.gmap3(
{ action: 'init',
options: {
center: eval(marker),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
},
{ action: 'addMarker',
latLng: eval(marker),
options: {
draggable: true,
icon: new google.maps.MarkerImage('http://maps.google.com/mapfiles/marker.png')
},
events: {
dragend: function (mark) {
updateMarker(mark);
}
}
});
}
}
Using above code you can get latitude/longitude also and drag searched location marker.
This feature will be in next version (5.0), current is not updated,
here is a working code :
$('#test1').gmap3({
action : 'getLatLng',
address:'kerala,india',
callback : function(result){
if (result){
$(this).gmap3({
action: "init",
options:{
center: result[0].geometry.location,
zoom: 12
}
});
} else {
alert('not found !');
}
}
});
notice, if your map is already initialized, you can use in the callback
$(this).gmap3("get").setCenter(result[0].geometry.location);
$(this).gmap3("get").setZoom(12);
You can use the following code as well:
var markerData = [];
markerData.push({ address: 'kerala,india', data: '' });
$('#test').gmap3({
action: 'addMarkers',
markers: markerData
}
);