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
Related
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.
I have written a simple function which onclick should add marker to the google map. Here is the code for the js file
function setupMapArea() {
var default_latlng = new google.maps.LatLng(51.5072, 0.1275);
var myOptions = {
zoom: 13,
center: default_latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false,
scrollwheel: false,
zoomControl: false,
};
var map = new google.maps.Map(document.getElementById("google-map"), myOptions);
mapBooking = new google.maps.Map(document.getElementById("map-container"), myOptions);
function setupMarkerWaypoint(){
console.log('setting waypoint marker');
waypointMarker = new google.maps.Marker({
position: default_latlng,
map: mapBooking,
icon:"http://maps.google.com/mapfiles/ms/micons/blue.png"
});
waypointMarker.setVisible(false);
}
The code for the index.html file is
<input id="AddWaypoint" name="AddWaypoint" type="button" value="Add Waypoint" onclick="setupMarkerWaypoint()"
On clicking the button the marker doesn't show up. I am trying to make a simple marker like this to prop up on clicking button. What changes should I make ?
setupMarkerWaypoint only exists within the scope of setupMapArea, so your event listener has no access to it. Try this:
var mapBooking, default_latlng;
document.getElementById('AddWaypoint').addEventListener('click', setupMarkerWaypoint);
function setupMapArea() {
default_latlng = new google.maps.LatLng(51.5072, 0.1275);
var myOptions = {
zoom: 13,
center: default_latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false,
scrollwheel: false,
zoomControl: false,
};
mapBooking = new google.maps.Map(document.getElementById("map-container"), myOptions);
}
function setupMarkerWaypoint(){
console.log('setting waypoint marker');
waypointMarker = new google.maps.Marker({
position: default_latlng,
map: mapBooking,
icon:"http://maps.google.com/mapfiles/ms/micons/blue.png"
});
}
setupMapArea();
#map-container {
height: 200px;
width: 100%;
}
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<input id="AddWaypoint" name="AddWaypoint" type="button" value="Add Waypoint">
<div id="map-container"></div>
I need a checkbox to get a function to hide and show a marker or an group of markers
for some reason idk (i'm new to google maps api) the function doesnt work with infobubbles, when i tried with infowindow it works.. any help ? thanks
var map;
function init() {
var mapCenter = new google.maps.LatLng(-22.967956,-43.197397);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: mapCenter,
streetViewControl: true,
mapTypeControl: true,
mapLabels:true,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var myLatLng = new google.maps.LatLng(-22.973878,-43.192564);
var myLatLng1 = new google.maps.LatLng(-22.968373,-43.183176);
var marker = new google.maps.Marker({
map: map,
position: myLatLng,
title: 'marker'
});
var marker1 = new google.maps.Marker({
map: map,
position: myLatLng1,
title: 'marker1'
});
infoBubble = new InfoBubble({
maxWidth: 246,
maxHeight: 350
});
infoBubble.addTab('home', contenthome);
infoBubble.addTab('Info', content);
infoBubble.addTab('Fase', contentString);
google.maps.event.addListener(marker, 'click', infobut);
function infobut(event) {
if (!infoBubble.isOpen()) {
infoBubble.open(map, marker); }
}
infoBubble1 = new InfoBubble({
maxWidth: 246,
maxHeight: 350
});
infoBubble1.addTab('home', contenthome);
infoBubble1.addTab('Info', content);
infoBubble1.addTab('Fase', contentString);
google.maps.event.addListener(marker1, 'click', infobut1);
function infobut1(event) {
if (!infoBubble1.isOpen()) {
infoBubble1.open(map, marker1); }
}
function hidemarker() {
marker1.setVisible(false);
}
and the button
<input type="checkbox" onClick="hidemarker()" name="1qts" value="1 Quartos" class="botao2">
From your code it is not clear where init() function finishes. I put close } just before hidemarker() function. Problem is that variable marker1 is not visible and it should be made global like variable map.
And to close also info bubble, just call method close():
var map;
var marker1;
function init() {
...
marker1 = new google.maps.Marker({
map: map,
position: myLatLng1,
title: 'marker1'
});
...
}
function hidemarker() {
infoBubble1.close();
marker1.setVisible(false);
}
google.maps.event.addDomListener(window, 'load', init);
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 am using the below javascript code to show map and marker.The marker is loading while map load,but i want to load the marker if the button named "Add marker" is clicked.The marker should points to the current location.How to do this here.
js.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(-29.3456, 151.4346);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Marker',
map: map,
draggable: true
});
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
html
<div id="mapCanvas"></div>
Thanks
please try this. hope it help.
1. make map as global variable.
2. initialize map
3. add marker on button click event.
<script type="text/javascript">
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
};
jQuery("$addmarker").click(function(){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(23.72, 72.100),
title: 'Marker',
map: map,
draggable: true
});
})
</script>
Here is my complete sample code.
<script type="text/javascript">
var map;
function initialize()
{
var mapOptions = {
center: new google.maps.LatLng('23.11', '71.00'),
zoom: 2,
scrollwheel: false,
disableDefaultUI: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
}
function addMarker()
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(23.72, 72.100),
map: map,
});
}
</script>
</HEAD>
<BODY onload="initialize();">
<div id="map_canvas" style="width:700px; height:500px;"></div>
<input type="button" id="addMarker" value="addMarker" onclick="addMarker();"/>
</BODY>
</HTML>
data is array which contains lat and lng
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map
});
You need to put the part:
var marker = new google.maps.Marker({
[...]
});
inside a onclick event listener.
The jQuery way to do this with a button element:
$('button').on('click', function() {
var marker = new google.maps.Marker({
[...]
});
});
You have to think about making the variables map and latLng global.
var map; // Declare map as global.
function initialize() {
var latLng = new google.maps.LatLng(-29.3456, 151.4346);
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
// Call addMarker on click of the button.
function addMarker(){
var latLng = new google.maps.LatLng(-29.3456, 151.4346); // Put lat long as desired.
var marker = new google.maps.Marker({
position: latLng,
title: 'Marker',
map: map,
draggable: true
});
}