I have a little function that adds a marker and info window when it is clicked. However, when I click on a new location, the old one remains. I'd like it to be replaced by the new one. Here is my code:
function MapInitialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(43,-77),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
})
var infowindow = new google.maps.InfoWindow({
content: 'Content Here'
});
infowindow.open(map,marker);
});
}
Thanks!
Delete the old marker before creating the new one:
var marker = null;
function MapInitialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(43,-77),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
if (marker && marker.setMap) marker.setMap(null);
marker = new google.maps.Marker({
position: event.latLng,
map: map
})
var infowindow = new google.maps.InfoWindow({
content: 'Content Here'
});
infowindow.open(map,marker);
});
}
Related
I've been stuck on this issue for a while now and could really use some help. In a Google Map, I have a list of markers which are being treated as a markerArray, with their own custom icons. But along with displaying those markers, I would like for it to create a marker which is placed at the users geotagged location. I have tried merging the suggestions I've come across here on stack overflow, and have successfully gotten the users browser to center the map based off of geolocation, but whenever I try to add a marker outside of the standard var=locations, all of the markers disappear. I am providing my working code, which simply lacks the feature to add the "current location" marker. If anyone has any input, I'd be thrilled.
var map = null;
var markerArray = [];
function initialize() {
var myOptions = {
zoom: 13,
center: new google.maps.LatLng(40.746613, -73.990109),
mapTypeControl: false,
navigationControl: false,
streetViewControl: false,
zoomControl: false,
styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"off"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"}]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}]
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(initialLocation);
});
}
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var locations = [
['90 West Apartment', 40.709943, -74.014430, 7, 'images/pin2.png'],
['Caffe Vita', 40.719652, -73.988411, 6, 'images/pin1.png'],
['Croxleys Ale House', 40.722480, -73.983386, 5, 'images/pin1.png'],
['Grays Papaya', 40.778291, -73.981829, 4, 'images/pin2.png'],
['The Back Room', 40.718723, -73.986913, 3, 'images/pin1.png'],
['MUD Coffee', 40.729912, -73.990678, 2, 'images/pin1.png'],
['Nurse Bettie', 40.718820, -73.986863, 1, 'pin2.png']];
for (var i = 0; i < locations.length; i++) {
createMarker(new google.maps.LatLng(locations[i][1], locations[i][2]),locations[i][0], locations[i][3], locations[i][4]);
}
mc.addMarkers(markerArray, true);
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
function createMarker(latlng, myTitle, myNum, myIcon) {
var contentString = myTitle;
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: myIcon,
zIndex: Math.round(latlng.lat() * -100000) << 5,
title: myTitle
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
markerArray.push(marker);
}
window.onload = initialize;
Let's try this.
Put this in your initialize(): navigator.geolocation.getCurrentPosition(showPosition);
Then define showPosition:
var showPosition = function (position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Do whatever you want with userLatLng.
var marker = new google.maps.Marker({
position: userLatLng,
title: 'Your Location',
map: map
});
}
This is the code below. I can't figure out how to add a second marker, I've been toying with it for awhile but I'm terrible with javascript and I really can't figure it out!
$(document).ready(function() {
initializeGoogleMap();
});
// Call this function when the page has been loaded
function initializeGoogleMap() {
var myLatlng = new google.maps.LatLng(45.93986,-85.65181);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("google-map-location"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
}
var myLatlng2 = new google.maps.LatLng(45.9,-85.6);
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map
});
or
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(45.9,-85.6),
map: map
});
I have this map working fine, i just wanted to add the default google click address marker and if not that a custom bubble for the address?
Anyone help me out, i'm sure its simple but cannot figure out whereabouts to put it..?
<script type="text/javascript">
var map;
jQuery(function($) {
$(document).ready(function() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
console.dir(map);
google.maps.event.trigger(map, 'resize');
$('a[href="#tab2"]').on('shown', function(e) {
google.maps.event.trigger(map, 'resize');
});
});
});
Many thanks..
Figured it out..
Anyone who needs a marker and for it to work with jQuery tabs try this..
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map2'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Just a noob trying to learn, I came out with a problem that when I try to create marker with click event, drag and dragend event listeners won't work. Whereas when created by default these work.
Here is what I have tried so far.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(22,79);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Default Marker',
draggable:true
});
google.maps.event.addListener(map,'click',function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map,
title: 'Click Generated Marker',
draggable:true
});
}
);
google.maps.event.addListener(
marker,
'drag',
function(event) {
document.getElementById('lat').value = this.position.lat();
document.getElementById('lng').value = this.position.lng();
//alert('drag');
});
google.maps.event.addListener(marker,'dragend',function(event) {
document.getElementById('lat').value = this.position.lat();
document.getElementById('lng').value = this.position.lng();
alert('Drag end');
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px;height:500px;"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng">
</body></html>
What you probably want to do is change the reference in your event listeners, from this to the event itself.
Then you need to add separate event listeners for your new marker at the same time as you create it. I'd suggest simply having one function which takes input arguments for the latlng, title, and anything else you need. And it then creates the marker and any event listeners required.
function initialize() {
var myLatlng = new google.maps.LatLng(22,79);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
addMarker(myLatlng, 'Default Marker', map);
map.addListener('click',function(event) {
addMarker(event.latLng, 'Click Generated Marker', map);
);
}
function handleEvent(event) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
}
function addMarker(latlng,title,map) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
draggable:true
});
marker.addListener('drag', handleEvent);
marker.addListener('dragend', handleEvent);
}
var marker = new google.maps.Marker({
position: latlng,
map: map,
zoom:25,
title: title,
draggable:true,
});
var infowindow = new google.maps.InfoWindow({
content: info
});
infowindow.open(map,marker);
google.maps.event.addListener(marker,'drag',function(event) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + event.latLng.lat() + '<br>Longitude: ' + event.latLng.lng()
});
infowindow.open(map,marker);
});
google.maps.event.addListener(marker,'dragend',function(event)
{
document.getElementById('lat').value =event.latLng.lat();
document.getElementById('lng').value =event.latLng.lng();
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + event.latLng.lat() + '<br>Longitude:'+`event.latLng.lng()
});
infowindow.open(map,marker);
});
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
draggable:true,
map: map
});
map.setCenter(location);
}
Try creating the marker like this .
I have a map with two markers on it.
The initial view of the map only shows one marker, and I want to provide a link next to the map that will move the map to the 2nd marker when clicked.
Here's a demo of what I want, using v2 of the API: http://arts.brighton.ac.uk/contact-university-of-brighton-faculty-of-arts (note the links below the map)
Here's what I have so far:
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(50.823817, -0.135634);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
} ,
scaleControl: false
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
// 1st marker
var marker1 = new google.maps.Marker({ position: new google.maps.LatLng(50.823817, -0.135634), map: map, title: 'my title' });
var infowindow = new google.maps.InfoWindow({ content: 'my window content' });
google.maps.event.addListener(marker1, 'click', function() { infowindow.open(map, marker1); });
// 2nd marker
var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(51.5262405, -0.074549), map: map, title: 'my 2nd title'});
var infowindow2 = new google.maps.InfoWindow({ content: 'content for my 2nd window' });
google.maps.event.addListener(marker2, 'click', function() { infowindow2.open(map, marker2); });
}
</script>
So what I'd like to add is a link to marker2, to move the map some 50-odd miles up,
e.g. Second location.
How would I do this?
Use addDomListener to add a click event to the link that will move the map to that marker (you'll also need to add an id to the link tag so you can reference it in code):
Edit: Set the event in a initialization function:
<head>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(51.5262405, -0.074549), map: map, title: 'my 2nd title'});
google.maps.event.addDomListener(document.getElementById("linkID"), "click", function(ev) {
map.setCenter(marker2.getPosition());
}
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
Second place
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>