Add single marker to map using google-ui-map plugin - javascript

This is example I'm trying to modify: http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-geocoding.html
I want to add single marker.
var markers = $('#map_canvas').gmap('get', 'markers');
I get all markers, which are none in begining.
if(markers == null) {
$(map).click( function(event) {
alert (event);
$('#map_canvas').gmap('addMarker', {
'position': event.latLng,
'draggable': true,
'bounds': false
}, function(map, marker) {
findLocation(marker.getPosition(), marker);
}).dragend( function(event) {
findLocation(event.latLng, this);
});
});
}
So if no marker allow to create one, but check again if there is one just enable to drag it.
My problem is that this if is not right. markers default gives empty string. Any idea?
--------
Solution
$(map).click( function(event) {
if(!map.singleMarker) {
$('#map_canvas').gmap('addMarker', {
'position': event.latLng,
'draggable': true,
'bounds': false
}, function(map, marker) {
findLocation(marker.getPosition(), marker);
}).dragend( function(event) {
findLocation(event.latLng, this);
});
map.singleMarker = true;
};
});

Just to have as answered question:
$(map).click( function(event) {
if(!map.singleMarker) {
$('#map_canvas').gmap('addMarker', {
'position': event.latLng,
'draggable': true,
'bounds': false
}, function(map, marker) {
findLocation(marker.getPosition(), marker);
}).dragend( function(event) {
findLocation(event.latLng, this);
});
map.singleMarker = true;
};
});

Related

add custom icons to google maps nearby places part2

got my current location with nearby places eg.(grocery_or_supermarket) and their icons.
but what i want to do is give each of the shops their own logo as an icon.
I'm new to JS so any help plz!
I have code to share if needed.
<script>
var infowindow,
placemarkers = [];
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
},
grocery_or_supermarket: {
icon: iconBase + 'convenience.png'
}
};
function placeSearch(map, request) {
var map = map;
var service = new google.maps.places.PlacesService(map);
service.search(request,
function (results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < results.length; ++i) {
bounds.extend(results[i].geometry.location);
placemarkers.push(createMarker(results[i].geometry.location,
map,
icons['grocery_or_supermarket'].icon,
results[i].name,
false, {
fnc: function () {
infowindow.open();
}
}));
}
map.fitBounds(bounds);
}
});
}
function createMarker(latlng, map, icon, content, center, action) {
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: latlng,
content: content
});
////////toggle bounce////
google.maps.event.addListener(marker, 'click', toggleBounce);
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE); } } ///////bounce end////
if (icon) {
marker.setIcon(icon);
}
if (center) {
map.setCenter(latlng);
}
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.content);
infowindow.open(map, this);
});
if (action) {
action.fnc(map, action.args);
}
return marker;
}
function initialize() {
var location = new google.maps.LatLng(-33.8665433, 151.1956316),
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: location,
zoom: 15,
});
infowindow = new google.maps.InfoWindow();
navigator.geolocation.getCurrentPosition(function (place) {
createMarker(
new google.maps.LatLng(place.coords.latitude,
place.coords.longitude),
map,
null,
'your current position',
true, {
fnc: placeSearch,
args: {
radius: 5000,
types: ['grocery_or_supermarket'],
location: new google.maps.LatLng(place.coords.latitude,
place.coords.longitude)
}
});
});
}
</script>
You can easily do with not so much code:
var iconBase = 'http://www.yourwebsite.com/';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: iconBase + 'myMarker.png' // Set yourt marker here
});
Here's is more about google maps and icons.
https://developers.google.com/maps/tutorials/customizing/custom-markers
Almost the same question, maybe can help you:
How to change icon on Google map marker

add custom icons to google maps nearby places

I got to get my location and nearby places I want in google maps.
I just cant seem to figure out how to add custom icons (markers) to the nearby places.
I'm new to JS so any help plz!
1. /////MY CODE/////
<!DOCTYPE html> <html> <head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
<!--<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCAVlwiMJEZaezI2EJvmL5peK4wS3gkFGo&sensor=true"></script>-->
<script>
var infowindow,
placemarkers = [];
function placeSearch(map, request) {
var map = map;
var service = new google.maps.places.PlacesService(map);
service.search(request,
function (results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < results.length; ++i) {
bounds.extend(results[i].geometry.location);
placemarkers.push(createMarker(results[i].geometry.location,
map,
!!!!this is the places icons. i want to change these icons to custom
icons!!!!!'http://labs.google.com/ridefinder/images/mm_20_orange.png',
results[i].name,
false, {
fnc: function () {
infowindow.open();
}
}));
}
map.fitBounds(bounds);
}
});
}
function createMarker(latlng, map, icon, content, center, action) {
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: latlng,
content: content,
});
////////toggle bounce////
google.maps.event.addListener(marker, 'click', toggleBounce);
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE); } } ///////bounce end////
if (icon) {
marker.setIcon(icon);
}
if (center) {
map.setCenter(latlng);
}
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.content);
infowindow.open(map, this);
});
if (action) {
action.fnc(map, action.args);
}
return marker;
}
function initialize() {
var location = new google.maps.LatLng(-33.8665433, 151.1956316),
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: location,
zoom: 15,
});
infowindow = new google.maps.InfoWindow();
navigator.geolocation.getCurrentPosition(function (place) {
createMarker(
new google.maps.LatLng(place.coords.latitude,
place.coords.longitude),
map,
null,
'your current position',
true, {
fnc: placeSearch,
args: {
radius: 5000,
types: ['grocery_or_supermarket'],
location: new google.maps.LatLng(place.coords.latitude,
place.coords.longitude)
}
});
});
}
</script> </head> <body onload="initialize()">
<div id="map"> </div> </body> </html>
<script>
var infowindow,
placemarkers = [];
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
},
grocery_or_supermarket: {
icon: iconBase + 'convenience.png'
}
};
function placeSearch(map, request) {
var map = map;
var service = new google.maps.places.PlacesService(map);
service.search(request,
function (results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < results.length; ++i) {
bounds.extend(results[i].geometry.location);
placemarkers.push(createMarker(results[i].geometry.location,
map,
icons['grocery_or_supermarket'].icon,
results[i].name,
false, {
fnc: function () {
infowindow.open();
}
}));
}
map.fitBounds(bounds);
}
});
}
function createMarker(latlng, map, icon, content, center, action) {
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: latlng,
content: content
});
////////toggle bounce////
google.maps.event.addListener(marker, 'click', toggleBounce);
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE); } } ///////bounce end////
if (icon) {
marker.setIcon(icon);
}
if (center) {
map.setCenter(latlng);
}
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.content);
infowindow.open(map, this);
});
if (action) {
action.fnc(map, action.args);
}
return marker;
}
function initialize() {
var location = new google.maps.LatLng(-33.8665433, 151.1956316),
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: location,
zoom: 15,
});
infowindow = new google.maps.InfoWindow();
navigator.geolocation.getCurrentPosition(function (place) {
createMarker(
new google.maps.LatLng(place.coords.latitude,
place.coords.longitude),
map,
null,
'your current position',
true, {
fnc: placeSearch,
args: {
radius: 5000,
types: ['grocery_or_supermarket'],
location: new google.maps.LatLng(place.coords.latitude,
place.coords.longitude)
}
});
});
}

Infowindow showing same street view for multiple markers?

Infowindow showing street view but multiple markers showing same street view.
Its taking last address to show street view in all markers.
Code:
geocoder.geocode( { 'address': "{!acc.BillingCity}"}, function(results, status) {
alert("{!acc.BillingCity}");
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title : 'Click Here!!!'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
var pano = null;
google.maps.event.addListener(infowindow, 'domready', function() {
if (pano != null) {
pano.unbind("position");
pano.setVisible(false);
}
pano = new google.maps.StreetViewPanorama(document.getElementById("content"), {
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ANDROID
},
enableCloseButton: false,
addressControl: false,
linksControl: false
});
pano.bindTo("position", marker);
pano.setVisible(true);
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
pano.unbind("position");
pano.setVisible(false);
pano = null;
});
markerBounds.extend(results[0].geometry.location);
map.fitBounds(markerBounds);
}else if(status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
wait = true;
setTimeout("wait = true", 2000);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
How to deal with (StreetViewPanorama) to show street view with multiple markers.
Thanks

Detect the user current location,add a marker onto that position in Sencha Touch V2

The code below facilitates a map to be displayed with markers added onto it from data in a JSON file.The getDirections from one marker to another has also been facilitated.
Need to:Detect the user current location,add a marker onto that position and apply that location to the start variable given within the code below so that directions from that current position to the marker that has been tapped can be plotted.
Ext.define('Navigator.view.mapcard', {
extend: 'Ext.Map',
xtype: 'mapcard',
config: {
title: 'Mappa',
iconCls: 'maps',
// useCurrentLocation: true,
mapOptions: {
center: new google.maps.LatLng('24.859622', '18.84089'),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
listeners: {
maprender: function (comp, map) {
var data = Ext.getStore('Contacts'),
marker = [], infowindow = [],
dist = [];
data.on('load', function () {
data.each(function (rec, idx, cnt) {
var latLng = new google.maps.LatLng(rec.get('latitude'), rec.get('longitude'));
marker[idx] = new google.maps.Marker({
map: map,
position: latLng
}),
infowindow[idx] = new google.maps.InfoWindow({
content: rec.get('title')
});
google.maps.event.addListener(marker[idx], 'click', function () {
infowindow[idx].open(map, marker[idx]);
if (dist.length === 0) {
dist.push(rec.get('title'));
} else if (dist.length === 1) {
dist.push(rec.get('title'));
} else if (dist.length > 1) {
// need reload map
dist = [];
dist.push(rec.get('title'));
}
if (dist.length === 2) {
var start = dist[0],
end = dist[1],
request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
var directionsDisplay = new google.maps.DirectionsRenderer(),
directionsService = new google.maps.DirectionsService();
directionsDisplay.setMap(map);
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
});
//setTimeout(function () { map.panTo(latLng) }, 1000);
});
});
}
}
}
});

gmap3 remove event listener

I want to remove event listener for click added by:
var events = {
click: function () {
// crazy stuff here :- )
}
};
$(where).gmap3(
{
events: events
}
);
Need something like:
$(where).gmap3().removeEventListener('click');
Didn't realize gmap3 was a wrapper library. Ill remove the duplicate comment.
Browsing through the gmaps3 documentation, I did not see anything specific to remove listeners with the libraries functions, but you can grab the marker with action: 'get' and then clear the listener.
Here is a example that a altered from the documentation. I added a name and tag property to the markers and at the end of this script I remove the mouseover listener from the marker with tag:'2'. For some reason this library is fickle and wants both the name and tag property to find the marker.
$('#test').gmap3({
action: 'init',
options: {
center: [46.578498, 2.457275],
zoom: 5
}
}, {
action: 'addMarkers',
markers: [
{
name : 'marker',
tag: '1',
lat: 48.8620722,
lng: 2.352047,
data: 'Paris !'},
{
name : 'marker',
tag: '2',
lat: 46.59433,
lng: 0.342236,
data: 'Poitiers : great city !'},
{
name : 'marker',
tag: '3',
lat: 42.704931,
lng: 2.894697,
data: 'Perpignan ! GO USAP !'}
],
marker: {
options: {
draggable: false
},
events: {
mouseover: function(marker, event, data) {
var map = $(this).gmap3('get'),
infowindow = $(this).gmap3({
action: 'get',
name: 'infowindow'
});
if (infowindow) {
infowindow.open(map, marker);
infowindow.setContent(data);
} else {
$(this).gmap3({
action: 'addinfowindow',
anchor: marker,
options: {
content: data
}
});
}
},
mouseout: function() {
var infowindow = $(this).gmap3({
action: 'get',
name: 'infowindow'
});
if (infowindow) {
infowindow.close();
}
}
}
}
});
//get the marker by name and tag
var mark = $('#test').gmap3({
action: 'get',
name:'marker',
tag: '2'
});
//remove the event listener
google.maps.event.clearListeners(mark, 'mouseover');
Here is an example of this script working: http://jsfiddle.net/5GcP7/. The marker in the middle will not open an infowindow when moused over.
I solved this problem in different way:
var events = {
click: function () {
if (P.settings.mapPinActive === false) {
return;
}
// crazy stuff here :- )
}
};
Instead of detaching and attaching events, global properties in settings object.

Categories

Resources