I can create a map and set markers but when I try to zoom or move the map with the mouse nothing happens.
Here is my function
function initMap() {
var locations = $scope.locList ? $scope.locList : {loc: {loc: {lat: $scope.data.loc.lat, lng: $scope.data.loc.lng}}};
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
zoom: $scope.locList ? 4 : 16,
center: $scope.locList ? new google.maps.LatLng(39.833, -98.583) : new google.maps.LatLng($scope.data.loc.lat, $scope.data.loc.lng),
scrollwheel: false
});
map.addListener('click', function(e) {
map.set('scrollwheel', true);
});
map.addListener('mouseout', function(e) {
map.set('scrollwheel', false);
});
var marker;
$.each(locations, function(key, value){
marker = new google.maps.Marker({
position: new google.maps.LatLng(value.loc.lat, value.loc.lng),
icon: $scope.data.marker,
map: map
});
})
}
and my markup
<div id="map"></div>
This all happens after $scope.locList and $scope.data are populated
Essentially, you are not able to zoom because you are initializing your map with scrollwheel: false and you are trying to set scrollwheel: true when you click on the map.
Instead, you should attach scrollwheel: true on mouseover, same thing for draggable: true:
map.addListener('mouseover', function(e) {
map.set('scrollwheel', true);
map.set('draggable', true);
});
Then, on mouseout, you set them false again:
map.addListener('mouseout', function(e) {
map.set('scrollwheel', false);
map.set('draggable', false);
});
This is how you should initialize your map:
var myLatLng = new google.maps.LatLng(41.9026329,12.452200400000038);
var mapOptions = {
center: myLatLng,
zoom: 5,
scrollwheel: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(attributes.id), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title:"My town"
});
marker.setMap(map);
This is a working Plunker that reproduces your target
Hope I've been helpful.
Related
I have a problem with my code. I want to make a draggable marker after I draw the marker using drawing manager and I want to make the value of the input field [lat & lon] change with draggable marker position value. This is my code:
function initMap() {
// set up the map
mapModal = new google.maps.Map(document.getElementById('mapModal'), {
center : {lat: lat, lng: lng},
zoom : 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: false,
zoomControl : true,
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['marker']
},
markerOptions: {
editable: true,
draggable: true,
},
});
drawingManager.setMap(mapModal);
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(marker) {
google.maps.event.addListener(marker, 'position_changed', function () {
var lat = marker.getPosition().lat();
var lon = marker.getPosition().lng();
$('#lat').val(lat);
$('#lon').val(lon);
});
});
}
I never get the value of the input field [lat & lon] has changed. Can anyone here help me for solve my problem?? Thanks!
I think the main problem is marker.getPosition().lat(); Inside an event handler you should use "this" instead of "marker". Not sure if it solves everything.
Here is a simple "drag marker, write coordinates in input elements"
<input id="lat" />
<input id="lng" />
<div id="map"></div>
<style>
#map {
height: 400px;
}
</style>
<script>
function initMap() {
var myLatlng = { // Brussels
lat: 50.85,
lng: 4.35
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatlng
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true,
title: 'Drag me'
});
google.maps.event.addListener(marker, 'position_changed', function() {
// inside an event handler you should use "this".
// "this" represents whatever got affected, in this case the marker
document.getElementById('lat').value = this.getPosition().lat();
document.getElementById('lng').value = this.getPosition().lng();
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
I need to create an interactive map that change markers (my map have 3 markers) when an user click on an external button
For example the map is this when you open the site:
When you click button 1, change only the icon like in this photo
Can you help me with the javascript code? :)
This is my HTML code
<div id="mapMeteo"></div>
<br>
<button id="btn1">Bottone1</button> <button id="btn2">Bottone2</button> <button id="btn3">Bottone3</button>
This is the javascript code for google:
<script>
function initialize() {
//Marker personalizzato
var imageMM = 'images/markerMM.png';
imageMMM = 'images/markerMMM.png';
imageMC = 'images/markerMC.png';
//mappa Meteo
var mapMeteo = document.getElementById('mapMeteo');
var Latlng = new google.maps.LatLng(42.9254851, 13.8632125);
var mapMOptions = {
center: Latlng,
zoom: 12,
mapTypeControl: false,
draggable: false,
scaleControl: false,
scrollwheel: false,
navigationControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapM = new google.maps.Map(mapMeteo, mapMOptions);
//Marker 1
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(42.9547985, 13.958793),
map: mapM,
icon: imageMMM
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(42.9222113, 13.9199294),
map: mapM,
icon: imageMM
});
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(42.8832739, 13.9438162),
map: mapM,
icon: imageMC
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
and this is my jquery code but doesn't change the icon
$("#btn1").click(function(){
google.maps.event.addListener(marker1, 'click', function() {
marker1.setIcon(imageMM);
infowindow.open(mapM);
});
});
You can use a dom listener and the setIcon method of the Marker class.
https://developers.google.com/maps/documentation/javascript/reference#methods_48
For example:
var btn1 = document.getElementById('btn1');
google.maps.event.addDomListener(btn1, 'click', function() {
marker1.setIcon(imageMC);
});
JSFiddle demo
I've tried adding a marker variable to my Google Map API and it will not show. Any ideas why?
The website: http://www.franhaines.co.uk/paddlethewye/
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(51.843143, -2.643555),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
$("#findButton").click(findMe);}
function errorCallback() {
alert("I'm afraid your browser does not support geolocation.");
}
function successCallback(position) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
}
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"We are here!"
});
function findMe()
{
if (navigator.geolocation)
{
console.log(navigator.geolocation.getCurrentPosition(successCallback,errorCallback,{timeout:10000}));
}
else
{
alert("I'm afraid your browser does not support geolocation.");
}
}
the issues
myLatlng is not defined
you create the marker before the map has been created
even when the map already has been created the Map-instance(map) wouldn't be accessible in the scope where you create the marker
the geolocation-callback creates a new Map-instance, the marker will not be drawn in this instance
Fixed issues:
function initialize() {
var myLatlng = new google.maps.LatLng(51.843143, -2.643555),
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatlng
}),
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "We are here!"
});
//use the button as control when you want to
map.controls[google.maps.ControlPosition.TOP_CENTER].push($("#findButton")[0]);
function successCallback(position) {
var latlng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude),
myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
},
bounds = new google.maps.LatLngBounds(latlng);
bounds.extend(marker.getPosition());
//only set new options for the map
//instead of creating a new instance
map.setOptions(myOptions);
//when you want to
//set the viewport of the map so that it diplays both locations
map.fitBounds(bounds);
//marker for the user-location when you want to
new google.maps.Marker({
position: latlng,
map: map,
title: "You are here!",
icon: 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png'
});
}
function errorCallback() {
alert("I'm afraid your browser does not support geolocation.");
}
function findMe() {
//hide the button, no need for further clicks
$(this).hide();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {
timeout: 10000
});
} else {
alert("I'm afraid your browser does not support geolocation.");
}
}
$("#findButton").click(findMe);
}
Demo: http://jsfiddle.net/doktormolle/eb6kwkwg/
There is another, CSS-related issue(you may have noticed that the apperenance of the controls is distorted). For a fix see: Google Map Infowindow not showing properly
Is that possible to click on the other Tab 2 and the marker/location change? Click back on Tab 1 marker/location change back to first location.
[Links to Fiddle] http://jsfiddle.net/ye3x8/
function initialize() {
var styles = [{
stylers: [{
saturation: -100
}]
}];
var styledMap = new google.maps.StyledMapType(styles, {
name: "Styled Map"
});
var mapProp = {
center: new google.maps.LatLng(3.165659, 101.611416),
zoom: 17,
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: true,
streetViewControl: false,
overviewMapControl: false,
rotateControl: true,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapProp);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style')
var marker = new google.maps.Marker({
position: new google.maps.LatLng(3.167244, 101.612950),
animation: google.maps.Animation.DROP,
icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/48/Map-Marker-Marker-Outside-Pink.png',
});
marker.setMap(map);
google.maps.event.addListener(marker, "click", function () {
});
}
google.maps.event.addDomListener(window, 'load', initialize);
A marker can be added to your map like so:
var myLatlng = new google.maps.LatLng(lat, lon)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
The marker position can then be changed like so:
marker.setPosition(new google.maps.LatLng(lat, lon));
In order to change the position of your maker based on which tab a user selects, you could do something like:
var myLatlng = new google.maps.LatLng(lat, lon)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
//When user clicks tab1:
changeMarkerPos(marker, tab1lat, tab1lon);
//When user clicks tab1:
changeMarkerPos(marker, tab2lat, tab2lon);
function changeMarkerPos(marker, lat, lon){
marker.setPosition(new google.maps.LatLng(lat, lon));
}
Create 2 markers and add 2 functions like :
<script>
function recenter() {
map.setCenter(new google.maps.LatLng(<?php echo $coord[0].",".$coord[1];?>));
map.setZoom(16);
}
function recenter2() {
map.setCenter(new google.maps.LatLng(<?php echo $coord2[0].",".$coord2[1];?>));
map.setZoom(16);
}
</script>
$coord[0] and $coord[1] are latitude and longitude of first marker
$coord2[0] and $coord2[1] are latitude and longitude of second marker
don't forget to add onclick function on your tabs :
onclick="recenter();"
onclick="recenter2();"
i want to make a google maps that shows the current location of the user and it should also be possible that the user can click on the map to add markers. i can do them separately but it fails when i try to combine them.
this is my code for the geolocation
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '500px';
mapcanvas.style.width = '600px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
and this is my code to add markers to the map.
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
}
check out the folllowing link..the example in it will help you surely.worked for me too.
http://www.codeproject.com/Articles/291499/Google-Maps-API-V3-for-ASP-NET