jQuery Google Maps Adding a Marker on Click - google-maps

i am using gmaps.js (https://github.com/hpneo/gmaps)
I want to add a Marker on the map on clicking a location on the map. If a user clicks on a second location the previous marker should move to the new place or be removed and replaced with a new marker.
Now sure if this is supported by the Lib.
http://bakasura.in/startupsradar/add.html
$(document).ready(function () {
var map = new GMaps({
div: '#map',
lat: 13.00487,
lng: 77.576729,
zoom: 13
});
map.addMarker({
lat: 13.00487,
lng: 77.576729,
title: 'Mink7',
infoWindow: {
content: 'HTML Content'
}
});
/*
GMaps.geolocate({
success: function (position) {
map.setCenter(position.coords.latitude, position.coords.longitude);
},
error: function (error) {
alert('Geolocation failed: ' + error.message);
},
not_supported: function () {
alert("Your browser does not support geolocation");
},
always: function () {
//alert("Done!");
}
});
*/
});

google.maps.event.addListener(_map, "click", function(event) {
if(_marker) {
_marker.setPosition(event.latLng);
} else {
_marker = new google.maps.Marker({
position: event.latLng,
map: _map,
title: "myTitle"
});
}
});
Just saw the other answer, use this if you dont want to create a marker everytime..
_marker should be a global variable.

Personally, I do it using a global variable for the marker (or an array if I need more markers and I want to access them later), so that I can delete it and recreate it somewhere else.
// instantiate your var map
// ...
google.maps.event.addListener(map, "click", function(event) {
if(markermap) {
markermap.setMap(null);
}
markermap = new google.maps.Marker({
position: event.latLng,
map: myMap,
title: "myTitle"
});
});

Related

Google map marker click event using angular

I want create a click event using angular js google map api.
On click on the marker I want to call a function without opening the info window.
How can I do this ?
$scope.map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: { lat: parseFloat(Center_lat) , lng: parseFloat(center_lang) }
});
$scope.infowindow = new google.maps.InfoWindow({
// content: ''
});
angular.forEach($scope.panoramas, function(value, index) {
var latLang = $scope.panoramas[index].project_latLng ;
// console.log(latLang)
var LatLngArr = latLang.split(",");
var lat = LatLngArr[0];
var lang = LatLngArr[1];
console.log("lat " ,lat);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(parseFloat(lat), parseFloat(lang)),
map: $scope.map,
icon:"images/map-circle.png",
draggable:true,
label: {
color: 'black',
fontWeight: 'bold',
text: $scope.panoramas[index].panoId,
},
title: $scope.panoramas[index].panoId
});
var content = '<a ng-click="ShowCenterPano(' + index + ')" class="btn btn-default">View details</a>';
var compiledContent = $compile(content)($scope)
google.maps.event.addListener(marker, 'click', (function(marker, content, scope) {
return function() {
scope.infowindow.setContent(content);
scope.infowindow.open(scope.map, marker);
};
})(marker, compiledContent[0], $scope));
$scope.ShowCenterPano = function(index) {
// alert(JSON.stringify($scope.panoramas[index]));
}
Here Info window is opening. How can I remove the info window and directly call the ShowCenterPano() function.
Everything you want to happen when you click on the marker is inside the listener.
I think you are making your code needlessly complicated. Just put a listener on your marker marker.addListener('click', function() {}); and in this function you run ShowCenterPano()
And the reason the infowindow is opening is because you ask it to open with this line of code scope.infowindow.open(scope.map, marker);

Problems with geolocation

I want to make an application that shows your current position on a map with a marker. The code I've done seems to work but it doesn't display the marker. Can someone help me, please?
Here's my app.js:
var app = angular.module('starter', ['ionic', 'ngCordova']);
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
app.controller('MapController', function($scope, $cordovaGeolocation, $ionicLoading, $ionicPlatform) {
$ionicPlatform.ready(function() {
$ionicLoading.show({
template: '<ion-spinner icon="bubbles"></ion-spinner><br/>Acquiring location!'
});
var posOptions = {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 0
};
$cordovaGeolocation.getCurrentPosition(posOptions).then(function(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, long);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
$scope.map = map;
$ionicLoading.hide();
}, function(err) {
$ionicLoading.hide();
console.log(err);
});
google.maps.event.addListener($scope.map, 'idle', function() {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.map.LatLng(myLatlng)
icon:'http://i.imgur.com/fDUI8bZ.png'
});
var infoWindow = new google.maps.InfoWindow({
content: "Here I am!"
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map, marker);
});
infowindow.open(map, marker);
});
})
});
You are using
var long = position.coords.longitude;
whereas long is a keyword in javascript. Check the link below.
https://www.w3schools.com/js/js_reserved.asp
Unless you are using ECMAScript 5/6 standard
Try to add Latitude and Longitude in following way to new google.map.LatLng(...)
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.map.LatLng(lat, long)
icon:'http://i.imgur.com/fDUI8bZ.png'
});
Hope this will help to you
Spent a very hair-tearing hour or so trying to get the good old W3C geolocation example to work in my particular application. Didn't see this:
https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only
If you are NOT using https you may (will?) get a silent, non-functioning outcome, both in Chrome and Firefox! As soon as I switched to https, it was fine.

"Uncaught SyntaxError: Unexpected token ," using google maps api

im using google maps javascript api. on load in calling the initialize method as said in the api, but i keep getting "Uncaught SyntaxError: Unexpected token ," error but could not find the source why im getting this error.
Please Help. Thanks in advance
<script type='text/javascript'>
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922)
};
var map = new google.maps.Map(document.getElementById('geochart-view-wrapper'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(map, 'center_changed', function() {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 3000);
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window,'load',initialize);
</script> `
I ran the script through JSHint:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922)
};
var map = new google.maps.Map(document.getElementById('geochart-view-wrapper'), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(map, 'center_changed', function () {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(function () {
map.panTo(marker.getPosition());
}, 3000);
});
google.maps.event.addListener(marker, 'click', function () {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
This is now syntax-error-free. My guess is that the lines that had
var map = new google.maps.Map(document.getElementById('geochart-view-wrapper'),
mapOptions);
were causing it.
By the way, formatting your code will make it easier to identify logic errors, syntax errors, closure errors, etc.

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

get selected marker google maps api 3

in the following code generated an undetermined number of markers, this works well.
for(i=0;i<idr.length;i++){
var LatLng = new google.maps.LatLng(lat[i], lng[i]);
m[i] = new google.maps.Marker({
position: LatLng,
icon: image,
map: map,
draggable: false,
val: idr[i]
});
}
I want to get the properties of the corresponding marker when the mouse passes over this
This does not apply for you should create a function for each marker and can not be that many
This function only access the first marker
google.maps.event.addListener(m[0], "click", function(e) {
var latitud = e.latLng.lat();
alert(latitud);
});
use this inside the callback to get access to the current marker(m[i] will not work there, because it will always refer to the last created marker)
google.maps.event.addListener(m[i], 'mouseover', function() {
alert(this.val)
});
for(i=0;i<idr.length;i++){
var LatLng = new google.maps.LatLng(lat[i], lng[i]);
m[i] = new google.maps.Marker({
position: LatLng,
icon: image,
map: map,
draggable: false,
val: idr[i]
});
google.maps.event.addListener(m[i], 'mouseover', function() {
//Do stuff
});
}
The above is how I would do it.