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,
};
Related
This is my code and i want to add a second marker on it. I'm not experienced on javascript and i couldn't figure out a way to do it. I'ld love some explain also!
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(XX.XXXXX, YY.YYYYYY),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var myLatlng = new google.maps.LatLng(XX.XXXXX, YY.YYYYYY);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "'. $xmladd .'"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function () {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
</script>
Duplicate the code for the first marker, changing the position appropriately.
code snippet:
html,
body,
#map-canvas {
height: 100%;
width: 100%;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.7127837, -74.0059413),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var myLatlng = new google.maps.LatLng(40.7127837, -74.0059413);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "'. $xmladd .'"
});
var myLatlng2 = new google.maps.LatLng(40.735657, -74.1723667);
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
title: "'. $xmladd2 .'"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
</script>
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>
Below is my javascript code to display one marker point on google maps.
How can I display two marker points instead?
window.onload = function () {
'use strict';
var latlng = new google.maps.LatLng(17.497859,78.391293);
var styles = [];
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
scrollwheel: false
};
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h4>We Are Here</h4>'+
'<p>test'</p>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var map = new google.maps.Map(document.getElementById('map'), myOptions);
var myLatlng = new google.maps.LatLng(17.497859,78.391293);
var image = '../images/marker.png';
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!',
icon: image
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
Just add new instance of google.maps.Marker with its own position, title and infowindow and assign that to your map with map attribute or setMap(map) method of Marker object.
Just like next
var infowindow1 = new google.maps.InfoWindow({
content: contentString
});
var infowindow2 = new google.maps.InfoWindow({
content: contentString
});
var myLatlng1 = new google.maps.LatLng(17.497859,78.391293);
var myLatlng2 = new google.maps.LatLng(17.497859,78.391293);
var image = '../images/marker.png';
var marker1 = new google.maps.Marker({
position: myLatlng1,
map: map,
title: 'Hello World!',
icon: image
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
title: 'Hello World!',
icon: image
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map,marker2);
});
<script type="text/javascript">
var locations = [
['ModelTown Lahore', 31.484665, 74.326204, 4],
['TownShip Lahore', 31.451794, 74.306549, 5],
['GreenTown Lahore', 31.435684, 74.304661, 3],
['Mughalpura Lahore', 31.573261, 74.363712, 2],
['WapdaTown Lahore', 31.425724, 74.266895, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(31.435684, 74.304661),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
animation: google.maps.Animation.BOUNCE,
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
Please use the following code to plot any number of markers ;-)
`<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Google Map</title>
<style>
#map{
height: 600px;
width: 100%;
}
</style>
</head>
<body>
<h1>My Google Map`</h1>
<div id="map"></div>
<script>
function initMap(){
//Map options
var options = {
zoom:9,
center:{lat:42.3601, lng:-71.0589}
}
// new map
var map = new google.maps.Map(document.getElementById('map'), options);
// customer marker
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png';
//array of Marrkeers
var markers = [
{
coords:{lat: 42.4668, lng: -70.9495},img:iconBase,con:'<h3> This Is your Content <h3>'
},
{
coords:{lat: 42.8584, lng: -70.9300},img:iconBase,con:'<h3> This Is your Content <h3>'
},
{
coords:{lat: 42.7762, lng: -71.0773},img:iconBase,con:'<h3> This Is your Content <h3>'
}
];
//loopthrough markers
for(var i = 0; i <markers.length; i++){
//add markeers
addMarker(markers[i]);
}
//function for the plotting markers on the map
function addMarker (props){
var marker = new google.maps.Marker({
position: props.coords,
map:map,
icon:props.img
});
var infoWindow = new google.maps.InfoWindow({
content:props.con,
});
marker.addListener("click", () => {
infoWindow.open(map, marker);
});
}
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVR9eQglFrAKCpuSWlnCV9Ao9QXEwJJCA&callback=initMap"
defer
></script>
</body>
</html>
`
I'm trying to customize a map of Mass..to show 10 districts. I've added the link to the map created in "my places", but I can't get the map to center, zoom or title.. The center LatLng is Worcester.. nothing works
Help !!
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dist-layer</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script>
function initialize() {
// var myLatlng = new google.maps.LatLng(42.268843,71.803774);
// zoomControl:false,
// zoom: 18,
// Title: "Mass Districts",
// center: myLatlng
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var mapOptions = {};
var kmlLayer = new google.maps.KmlLayer({
url: "http://mapsengine.google.com/map/kml? mid=zHTaYadv8Mrs.kHqpg6p0mrlk&lid=zHTaYadv8Mrs.khlpCJFyVigQ",
suppressInfoWindows: true,
Map:map
});
google.maps.event.addListener(kmlLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width:40%; height:472px; float:left;"> </div>
<div id="content-window" style="min-width:15%; max-width:28%; height:430px; float:left; border: #0ff 5px double;padding: 10px;"> </div>
</body>
</html>
Set preserveViewport to true, otherwise the KmlLayer will zoom to fit its contents.
var kmlLayer = new google.maps.KmlLayer({
url: "http://mapsengine.google.com/map/kml?mid=zHTaYadv8Mrs.kHqpg6p0mrlk&lid=zHTaYadv8Mrs.khlpCJFyVigQ",
suppressInfoWindows: true,
preserveViewport:true,
map: map
});
function initialize() {
var myLatlng = new google.maps.LatLng(42.2625932, -71.8022934);
// zoomControl:false,
// zoom: 18,
// Title: "Mass Districts",
// center: myLatlng
var mapOptions = {
zoomControl: false,
zoom: 11,
title: "Mass Districts",
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var kmlLayer = new google.maps.KmlLayer({
url: "http://mapsengine.google.com/map/kml?mid=zHTaYadv8Mrs.kHqpg6p0mrlk&lid=zHTaYadv8Mrs.khlpCJFyVigQ",
suppressInfoWindows: true,
preserveViewport:true,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function (kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
fiddle
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 .