i am trying to do a website for school project
and i have this prototype
i want to put sound on differnt locations using googlemaps api
I already did it, but the sound do not stop if you play other sound... can we try help me.
i am newbie at this sorry for my english
<!DOCTYPE html>
<html>
<head>
<title>Sound Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://mm1.ellieirons.com/sm2.js"></script>
<style>
/* CSS to define the size and style of the map: */
#map {
width: 500px;
height: 500px;
padding: 15px;
margin: 15px;
}
</style>
</head>
<body>
<!-- HTML creating a div to hold the map: -->
<div id="map"></div>
<!-- JavaScript to pull in the Google Maps API: -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!-- JavaScript to create the variable "map", and set its zoom, location and map type -->
<script>
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(40.818259, -73.950262), // Center the map at this lat/lng point
mapTypeId: google.maps.MapTypeId.SATELLITE //Also takes ROADMAP
});
var offIcon = new google.maps.MarkerImage("http://fri.ellieirons.com/wp-content/uploads/2012/03/marker_sound_off_y.png");
var onIcon = new google.maps.MarkerImage("http://fri.ellieirons.com/wp-content/uploads/2012/03/marker_sound_on_y.png");
var marker1_edm = new google.maps.Marker({
position: new google.maps.LatLng(40.821523, -73.949661),
map: map,
icon: offIcon
});
marker1_edm.mp3 = 'http://fri.ellieirons.com/wp-content/uploads/2012/03/suction.mp3';
function markerClick1() {
var audio1 = document.createElement('audio');
audio1.src = 'http://fri.ellieirons.com/wp-content/uploads/2012/03/suction.mp3';
audio1.play();
}
var marker2_nac = new google.maps.Marker({
position: new google.maps.LatLng(30.819834, -73.950455),
map: map,
icon: offIcon
});
marker2_nac.mp3 = 'http://fri.ellieirons.com/wp-content/uploads/2012/03/machine.mp3';
function markerClick() {
var audio2 = document.createElement('audio');
audio2.src = 'http://fri.ellieirons.com/wp- content/uploads/2012/03/machine.mp3' ,'' ;
audio2.play();
}
google.maps.event.addListener(marker1_edm, 'click', markerClick1);
google.maps.event.addListener(marker2_nac, 'click', markerClick);
</script>
</body>
</html>
The audio needs to be explicitly stopped and to do this you need the variables to be declared globally:
<script>
var audio2 = document.createElement('audio');
audio2.src = 'http://fri.ellieirons.com/wp- content/uploads/2012/03/machine.mp3' ,'' ;
var audio1 = document.createElement('audio');
audio1.src = 'http://fri.ellieirons.com/wp-content/uploads/2012/03/suction.mp3';
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(40.818259, -73.950262), // Center the map at this lat/lng point
mapTypeId: google.maps.MapTypeId.SATELLITE //Also takes ROADMAP
});
var offIcon = new google.maps.MarkerImage("http://fri.ellieirons.com/wp-content/uploads/2012/03/marker_sound_off_y.png");
var onIcon = new google.maps.MarkerImage("http://fri.ellieirons.com/wp-content/uploads/2012/03/marker_sound_on_y.png");
var marker1_edm = new google.maps.Marker({
position: new google.maps.LatLng(40.821523, -73.949661),
map: map,
icon: offIcon
});
marker1_edm.mp3 = 'http://fri.ellieirons.com/wp-content/uploads/2012/03/suction.mp3';
function markerClick1() {
audio2.pause();
audio1.play();
}
var marker2_nac = new google.maps.Marker({
position: new google.maps.LatLng(30.819834, -73.950455),
map: map,
icon: offIcon
});
marker2_nac.mp3 = 'http://fri.ellieirons.com/wp-content/uploads/2012/03/machine.mp3';
function markerClick() {
audio1.pause();
audio2.play();
}
google.maps.event.addListener(marker1_edm, 'click', markerClick1);
google.maps.event.addListener(marker2_nac, 'click', markerClick);
</script>
</body>
</html>
Related
First I checked without setTimeout function google map API is fully loaded or not using map idle function. it's working fine. but I tried using the setTimeout function in the google map loading page. the map is loaded successfully. but map idle function is not working on how to fix this issue.
Code.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
setTimeout(function(){
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
},2000);
google.maps.event.addListenerOnce(map, 'idle', function(){
console.log('hi')
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
})
// var map = new google.maps.Map(document.getElementById('map'), {
// zoom: 4,
// center: myLatLng
// });
// var marker = new google.maps.Marker({
// position: myLatLng,
// map: map,
// title: 'Hello World!'
// });
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=***********&callback=initMap">
</script>
</body>
</html>
How to achieve this scenario.
You can use the tilesloaded event of the Maps Javascript API Events. The tilesloaded is used to detect when the map has been fully loaded. A sample POC below using your current implementation.
var map;
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
map.addListener('tilesloaded', function() {
console.log('map is loaded');
});
google.maps.event.addListenerOnce(map, 'idle', function(){
console.log('map is idle')
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
});
}
If this doesn't help you, you can also check the answer from this Stackoverflow question How can I check whether Google Maps is fully loaded?. It appears a lot of users were also experiencing this issue before.
Hope this information find you helpful and good luck on your applicaion!
Use titesloaded event to listen to complete map load.
I have a problem with google map, we have a website where we have introduced a map using the api , the problem is that the map when it is initialized comes in gray, he is blamed for resizing , but I can not solve. The map is initially hidden , and jquery by clicking on a field in a table shown.
enter code here
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#googleMap {
width: 100%;
height: 470px;
margin-top: 6.5%;
overflow: visible;
max-width: none !important;
}
</style>
</head>
<div id="googleMap"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=[key]&signed_in=false&">
</script>
<script>
var myCenter = new google.maps.LatLng(39.287649, -0.422548);
var myCenterverd = new google.maps.LatLng(39.287413, -0.422255);
var myCenterroig = new google.maps.LatLng(39.288497, -0.423953);
var myCentergroc = new google.maps.LatLng(39.287766, -0.421604);
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.287413, -0.422255),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapOptions);
//var marker=new google.maps.Marker({position:myCenter,icon:'gotaico.png'});
var markerverd = new google.maps.Marker({
position: myCenterverd,
icon: '../dashboard/include/Mapa/iconosrellenos/gotaicoverd.png'
});
var markerroig = new google.maps.Marker({
position: myCenterroig,
icon: '../dashboard/include/Mapa/iconosrellenos/gotaicoroig.png'
});
var markergroc = new google.maps.Marker({
position: myCentergroc,
icon: '../dashboard/include/Mapa/iconosrellenos/gotaicogroc.png'
});
//marker.setMap(map);
markerverd.setMap(map);
markerroig.setMap(map);
markergroc.setMap(map);
}
//google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function(map) {
setTimeout('initialize()', 2000);
google.maps.event.addListener(map, "idle", function(){
google.maps.event.trigger(map, 'resize');
this.map.setZoom( this.map.getZoom() - 1 );
this.map.setZoom( this.map.getZoom() + 1 );
});
});
</script>
</html>
Probably you should set the backgroundColor to transparent in the mapOptions.
var mapOptions = {
center: new google.maps.LatLng(39.287413, -0.422255),
zoom: 10,
backgroundColor: 'transparent',
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
I am trying to build a simple page that shows the position of the user in relation to a fixed position on a map. I have been able to copy and modify some code to track the position of the user, but am unsure of how to add a marker at a fixed position, (say -38.100 +145.500) on the same map. Any help would be greatly appreciated.
So far, I have the following....
<!DOCTYPE html>
<html>
<head>
<style>
#map { width:100%; height:150px; }
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map"></div>
<script>
var marker;
if (navigator.geolocation) {
var timeoutVal = 10 * 1000 * 1000;
navigator.geolocation.watchPosition(
displayPosition,
displayError,
{ enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
);
}
else {
alert("Geolocation is not supported by this browser");
}
function displayPosition(position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 18,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
// Remove the current marker, if there is one
if (typeof(marker) != "undefined") marker.setMap(null);
marker = new google.maps.Marker({
position: pos,
map: map,
icon: 'https://upload.wikimedia.org/wikipedia/commons/a/ae/Bluedot.png',
title: "User location"
});
}
function displayError(error) {
var errors = {
1: 'Permission denied',
2: 'Position unavailable',
3: 'Request timeout'
};
alert("Error: " + errors[error.code]);
}
</script>
</body>
</html>
Kind regards
Day
You already have the code to add a marker there -
Setting a position
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
And to set a marker
marker = new google.maps.Marker({
position: pos,
map: map,
icon: 'https://upload.wikimedia.org/wikipedia/commons/a/ae/Bluedot.png',
title: "User location"
});
if you give different latitude and longitude to the pos variable - then the marker would appear in a different position...
I am trying to get a marker to show on the google map for a website I am doing. Without the marker code the map loads fine and shows the correct location (with no marker), when I add the marker code the map no longer loads. Clearly I am missing something simple but I am not too familiar with Jquery.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWJYTBt3bKUIsQKKsQPSnR1IHNdkAmBQs&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(53.154662, -1.208357),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
var marker = new google.maps.Marker({
position:(53.154662, -1.208357),
map: map-canvas,
title:"Hello World!"
});
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Thanks for any assistance.
The map-property is expected to be a google.maps.Map-instance and the position-property has to be a google.maps.LatLng:
Furthermore you must create the marker when the map already has been created and in a scope where the maps-instance is accessible, e.g. at the end of initialize().
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(53.154662, -1.208357),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var marker = new google.maps.Marker({
position:new google.maps.LatLng(53.154662, -1.208357),
map: map,
title:"Hello World!"
});
}
Here is my google maps api project:
<head>
<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 rio = new google.maps.LatLng(-22.894125,-43.199358);
var map;
function initialize() {
var myOptions = {
zoom: 10,
center: rio,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(marker, 'click', toggleBounce);
}
function addMarkerAtCenter() {
var marker = new google.maps.Marker({
position: map.getCenter(),
draggable:true,
animation: google.maps.Animation.DROP,
map: map
});
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>
</head>
<body onload="initialize()" style="margin:0px; padding:0px;">
<center><input type="button" value="Adicionar Marcador" onclick="addMarkerAtCenter()"/></center>
<center><div id="map_canvas" style="width:100%; height:100%"></div></center>
</body>
how can I, after adding multiple markers, get them and save into xml ?
thanks
I am pretty sure that it doesn't work that way. Markers know what map they belong to, but not the other way around. The way you would normally do this would be to have an Array, and each time you add a marker to your map you also add it to your array. Whenever you want to manipulate your markers you then run through that array and do the stuff that needs doing :)
What you are probably after (if you outputing stuff to XML) is just the coordinates of each marker added rather than the whole google marker object below is an example of how to get the coordinates and serialize them (badly) to XML.
<head>
<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 rio = new google.maps.LatLng(-22.894125,-43.199358);
var map;
//you probably just want to store coordinates of markers
var coords = []
function initialize() {
var myOptions = {
zoom: 10,
center: rio,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// google.maps.event.addListener(marker, 'click', toggleBounce);
}
function addMarkerAtCenter() {
var marker = new google.maps.Marker({
position: map.getCenter(),
draggable:true,
animation: google.maps.Animation.DROP,
map: map
});
//get the coordinates of the marker
pos = marker.getPosition();
//save the coordinates
coords.push({lat:pos.lat(), lng:pos.lng()})
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
//a primitive serialize function - add something more sophisticated
function serialize(arr) {
xml = "<markers>";
for (i=0;i<arr.length;i++) {
xml += "<marker>";
for(var prop in arr[i]) {
if(arr[i].hasOwnProperty(prop))
xml += "<" + prop +">" + arr[i][prop] + "</" + prop +">";
}
xml += "</marker>";
}
xml +="</markers>";
//do something with the result
alert(xml);
}
</script>
</head>
<body onload="initialize()" style="margin:0px; padding:0px;">
<center><input type="button" value="Adicionar Marcador" onclick="addMarkerAtCenter()"/> <input type=button onClick="javascript:serialize(coords)" value="To XML"></center>
<center><div id="map_canvas" style="width:100%; height:100%"></div></center>
</body>