guys.
I have the following code in an HTML page. It shows a Google map with custom markers and everithing is working ok so far:
<html>
<head>
<meta charset="utf-8">
<title>Ejemplito</title>
<style>
#map_canvas {
width: 600px;
height: 300px;
background-color: #CCC;
}
</style>
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function addMarker(titulo, pos, iconName, mapa) {
var marker = new google.maps.Marker({
map: mapa,
position: pos,
icon: iconName,
title: titulo
});
}
function init(container, x, y, zoom) {
map_canvas = document.getElementById(container);
var map_options = {
center: new google.maps.LatLng(x, y),
zoom: zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
}
var map = new google.maps.Map(map_canvas, map_options);
addMarkers(map);
}
</script>
<script>
var map_canvas = document.getElementById('map_canvas');
var icon = 'https://cdn1.iconfinder.com/data/icons/Webtoys/64/Pin.png';
function addMarkers(mapa) {
var pos1 = new google.maps.LatLng(19.2887395,-99.198382,14);
addMarker('Primer marcador', pos1, icon, mapa);
var pos2 = new google.maps.LatLng(19.2792758,-99.2334069,14);
addMarker('Segundo pin', pos2, icon, mapa);
}
$(function() {
init('map_canvas',19.2792608,-99.2334009,13);
});
</script>
</head>
<body>
<h1>Hola</h1>
<div id="map_canvas"></div>
</body>
</html>
However, when I move the mouse wheel over the map, It performs a zoom (out/in) and I need to disable such behavior.
My question is: What code (line, if possible) in my html page should I change/add, in order to disable such behavior?
Than you very much!!!
in map options:
scrollwheel: false.
https://developers.google.com/maps/documentation/javascript/reference#ZoomControlOptions
Related
So I have a website: terpconnect.umd.edu/~ybencheq and I basically wanted to feature a Google Maps at the bottom of my page. I generated an API key and I have it passed in the key parameter. The URL's in my credentials are: https://terpconnect.umd.edu/~ybencheq/, https://www.terpconnect.umd.edu/~ybencheq/, .terpconnect.umd.edu/ and none of these will work. I get the RefererNotAllowedMapError and sometimes I don't even get an error in my console; it just turns up blank on that part of the page).
Here's what I have:
<!-- Add Google Maps -->
<script>
function myMap()
{
myCenter=new google.maps.LatLng(38.9869, 76.9426);
var mapOptions= {
center:myCenter,
zoom:12, scrollwheel: false, draggable: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
And:
<script src="https://maps.googleapis.com/maps/api/js?key=[insertkeyhere]"
type="text/javascript"></script>
You need to call the myMap function somewhere. Either call it onload:
google.maps.event.addDomListener(window,'load',myMap);
Or in the call back of the API load:
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=myMap&key=[insertkeyhere]" type="text/javascript"></script>
(but not both)
proof of concept fiddle
code snippet:
function myMap() {
myCenter = new google.maps.LatLng(38.9869, 76.9426);
var mapOptions = {
center: myCenter,
zoom: 12,
scrollwheel: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, "load", myMap);
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>
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 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>
Iv'd been searching All over the web for a solution to this, and Im still Unable to find any solve for it, iv'd been in googles own libery to find this.
I want the extract coordinates, from the GPS to use as center of my google maps so when your in fx. Copenhagen at Kongs nytorv you would get that position as center.
I have some options for my map here:
var myOptions = {
center: new google.maps.LatLng(55.674, 12.403),
zoom: 10,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
}
};
right now i have a static position as center.
But i cant find where to pull the information from
I keep on trying to solve this problem so we all get a solution the problem if possible
Here is an example from google docs
https://google-developers.appspot.com/maps/documentation/javascript/examples/map-geolocation
here is the code, in case this link is broken:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<link href="/maps/documentation/javascript/examples/default.css"
rel="stylesheet" type="text/css">
<!--
Include the maps javascript with sensor=true because this code is using a
sensor (a GPS locator) to determine the user's location.
See: https://developers.google.com/apis/maps/documentation/javascript/basics#SpecifyingSensor
-->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
How do I take Google map coordinates from the map and automatically populate another form element?
This is my form: http://www.barbadosphonebook.com/list-your-business-for-free/. At the bottom there is a Google map which, on-click, displays the coordinates. I would love it to also populate the element below with the coordinate data.
My map code:
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(13.175771, -59.556885);
var myOptions = {
zoom: 10,
center: latlng,
navigationControl: true,
mapTypeControl: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
//
var contentString = '<strong>Copy the numbers between the brackets</strong><br />';
google.maps.event.addListener(map, 'click', function(event) {
new google.maps.InfoWindow ( { position: event.latLng, content: contentString+event.latLng.toString() } ).open(map);
});
}
</script>
You could try changing your map click listener to this:
google.maps.event.addListener(map, 'click', function(event) {
new google.maps.InfoWindow ( { position: event.latLng, content: contentString+event.latLng.toString() } ).open(map);
$('.ginput_container input').val(event.latLng.toString());
});