I am trying to display a date format in google maps api infowindow on click of a marker.
I am not able to do it. Is this a bug that only strings are to be displayed on click of a marker.
content = "19/11/2015"
infowindow.setContent(content);
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var contentString ="19/11/2015"
//this also works
// '<div>19/11/2015</div>'
//and this
// var date=new Date();
// var contentString =date.getDay()+'/'+date.getMonth()+'/'+date.getFullYear();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>
</html>
Related
Here is my code for a google map
<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas {
width: 900px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(18.979026,16.468506),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
name: 'Parking',
icon: iconBase + 'parking_lot_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
var features = [
{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'Parking'
}
var map = new google.maps.Map(map_canvas, map_options)
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Why is it wrong?
All what it is supposed to do is be centered and have a marker with the icon parking at a certain lat & long.
I tried following the google tutorial, but I understand it
So any help would be much appreciated
Use MarkerImage to place an custom icon
img = new google.maps.MarkerImage('parking_lot_maps.png');
then
Marker = new google.maps.Marker({
position: pos,
icon: img,
});
I have a simple google map v3 with one marker and infowindow attached to it.
if I click the marker, the infowindow shows and map pans automatically to fit the infowindow in the view, however if I try to trigger a click to open the infowindow when the page loads, the infowindow opens but panning does not occur.
Triggering is done like so:
google.maps.event.trigger(marker, 'click');
If I move above code into a function and call it with setTimeout 500, then the panning happens as well.
I dug around in API, but could not find a function to cause auto panning on demand. is there a way without using a timeout? Why does the timeout help?
Thanks
Here's the example that Does not pan:
<!DOCTYPE html>
<html>
<head>
<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 { width: 400px; height: 320px }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(42.6620233,-78.4250679);
var mapOptions = {
center: myLatlng,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var contentString = '<div style="width: 200px; height: 100px;">Testing</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.trigger(marker, 'click');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
Here's the one that does pan but only with a timeout:
<!DOCTYPE html>
<html>
<head>
<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 { width: 400px; height: 320px }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var marker;
function initialize() {
var myLatlng = new google.maps.LatLng(42.6620233,-72.4250679);
var mapOptions = {
center: myLatlng,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var contentString = '<div style="width: 200px; height: 100px;">Testing</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
setTimeout('pop()', 500);
//google.maps.event.trigger(marker, 'click');
//infowindow.open(map,marker);
//map.pan();
}
google.maps.event.addDomListener(window, 'load', initialize);
function pop() {
google.maps.event.trigger(marker, 'click');
}
//setTimeout('pop()', 500);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
The initializing of the map is not a synchronous process, when you've created the Map-instance it takes some time until all properties of the map are set(so maybe some properties that are needed to determine the position where to pan the map)
When you use a timeout and it works the needed properties are set at this time.
Instead a timeout I would suggest to call the function when the tiles have been loaded, you can be sure that the initializing of the map has been finished at this time:
google.maps.event.addListenerOnce(map, 'tilesloaded', pop);
If I click on a markercluster, it doesn't show the marker with a title. Here's my test code...
<!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></title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=-my-key-&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript">
var map;
var myCenter = new google.maps.LatLng(55.34943850000000, 11.12281580000000);
var customers = [
['Place1', 55.34943850000000, 11.12281580000000],
['Place2', 55.34943850000000, 11.22281580000001]
];
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 7,
center: myCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map);
}
function setMarkers(map) {
var markers = [];
for (var i = 0; i < customers.length; i++) {
var customer = customers[i];
var myLatLng = new google.maps.LatLng(customer[1], customer[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: customer[0]
});
markers.push(marker);
}
var CLUSTER_MINIMUM_SIZE = 1;
var markerCluster = new MarkerClusterer(map, markers, { minimumClusterSize: CLUSTER_MINIMUM_SIZE });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Any idea if I'm doing something wrong or there's a bug in MarkerCluster?
Thanks
Mojo
Sorry-> but i'm K.O. with it
I just want my cooord.json file (coming from php/mysql request) to be taken in the javascript's parameters to create marker and display its on the map
first my html code
two myjson file
Thanks
Desbutes
<!DOCTYPE html>
<html>
<head>
<title>Développez avec les API Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#map_canvas {
height: 100%;
}
</style>
<!-- http://www.fsupoitiers.fr/mouvement/coorrdon.json -->
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false" ></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(46.587953, 0.34611);
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//var url = 'http://www.fsupoitiers.fr/mouvement/coorrdon.json';
$.getJSON('http://www.fsupoitiers.fr/mouvement/coorrdon.json', function(data) {
map= new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var bounds=new google.maps.LatLngBounds();
infowindow = new google.maps.InfoWindow({
content: 'ec_ville'
});
$.each(data, function(index, c) {
var latlng = new google.maps.LatLng(c.fields['lat'],c.fields['lng']);
var marker = new google.maps.Marker({
map: map,
position: latlng,
title:'ec_nom:'+c.ec_nom
});
bounds.extend(latlng);
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent('ec_nom:'+c.ec_nom);
infowindow.open(map, marker);
});
});//close each
map.fitBounds(bounds);
});//close getjson
}//close initialize
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>
And now my coord.json file
{"lat":"46.8529510","lng":"0.5433920","ec_nom":"ANTRAN","ec_type":"ECOLE ELEM","ec_adresse":"PLACE DE L EGLISE","ec_ville":"ANTRAN","ec_cp":"86100"}
If you read until here, tht's you've readed the code so ...... thanks again
i am trying to call javascript inside the google maps infoWindow() but no luck. anyone know how to solved this issue? my coding as below:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var image = 'image.png';
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(3.101669,101.635793),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myHtml = "<script type='text/javascript'>alert('test');<\/script>";
var infowindow = new google.maps.InfoWindow({content: myHtml});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(3.09667,101.635793),
map: map,
title:"Hey, I'm here!",
<!--icon: image-->});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);});
infowindow.open(map,marker);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 640px; height: 480px; margin:1.5em 13.6em 1.5em 2em;">
</div>
</body>
</html>
fix this line
var myHtml = "<script type='text/javascript'>alert('test');<\/script>";
to this
var myHtml = "<scr"+"ipt type='text/javascript'>alert('test');</scr"+"ipt>";