How can I add an info window to the Google Maps marker Cluster listed below? The map is designed to cluster the markers zoomed out but I would like the markers when zoomed to the nearest extent to show an info window.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
</meta>
<style>
#map_canvas {
width: 1000px;
height: 800px;
background-color:#CCC;
}
#legend {
font-family: Arial, sans-serif;
background: #fff;
padding: 10px;
margin: 10px;
border: 3px solid #000;
}
#legend img {
vertical-align: middle;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?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">
function initialize() {
var pos = new google.maps.LatLng(-39.431441,-71.286622);
var myOptions = {
zoom: 2,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
map.setCenter(pos);
var all = [
[37.3952,-91.5482],
[37.212,-90.168],
[37.3331,-90.0782]
];
var gmarkers = [];
for (var i = 0; i < all.length; i++) {
var lat = all[i][0];
var lng = all[i][1];
var latLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({map: map, position: latLng,});
gmarkers.push(marker);
}
var markerCluster = new MarkerClusterer(map, gmarkers);
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map" style="height:800px;width:1000px;"></div>
</body>
</html>
This is my sample code for adding InfoWindow to markers in MarkerClusterer
Haven't noticed that in my code is jQuery needed so suppose we include these scripts:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.js"></script>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
</meta>
You might use following code.
Thanks to geocodezip.
var info = new google.maps.InfoWindow({
maxWidth: 200,
map: map
});
/* <img src="data:image/jpeg;base64{binary data}" /> */
google.maps.event.addListener(marker, 'click', function () {
var $infoWindowContent = $("YourText);
info.setContent($infoWindowContent[0]);
info.open(map, this);
});
As I see you have a for loop where store the text so I would recommend you add this into your for loop
Hope it helps a bit.
Related
Current behaviour: The page constantly refreshes my location and the entire map.
Desired behaviour: I only want to find and display the current location once, not continuously.
How can I achieve this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>whereami</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="cordova.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key= xyz " type="text/javascript"></script>
<script type="text/javascript">
function onSuccess(position) {
var lat=position.coords.latitude;
var lang=position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat,lang);
var mapOptions = {zoom: 17,center: myLatlng}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({position: myLatlng,map: map});
}
function onError(error) {}
var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { timeout: 0 });
google.maps.event.addDomListener(window, 'load', onSuccess);
</script>
</head>
<body>
<div id="geolocation"></div>
<div id="map-canvas"></div>
</body>
</html>
Don't keep recreating the map. Create the map once (in an "initMap" function), center the map an place the marker in the watchPosition callback function.
jsfiddle
// global variables
var map, marker, polyline;
function initMap() {
// initialize the global map variable
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {
lat: 0,
lng: 0
},
zoom: 1
});
var watchID = navigator.geolocation.watchPosition(onSuccess, onError, {
timeout: 5000
});
}
google.maps.event.addDomListener(window, 'load', initMap);
function onSuccess(position) {
var lat = position.coords.latitude;
var lang = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, lang);
map.setCenter(myLatlng);
map.setZoom(18);
if (marker && marker.setPosition)
marker.setMap(myLatlng); // move the marker
else // create a marker
marker = new google.maps.Marker({
position: myLatlng,
map: map
});
}
function onError(error) {
console.log('ERROR(' + error.code + '): ' + error.message);
}
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0
}
#map-canvas {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="geolocation"></div>
<div id="map-canvas"></div>
Hello i m using Google API v 3.0 for showing street view,but street view is not showing for a prticular point but maps.google.com is showing street view for this location. where i m wrong.
My code is below :-
<!DOCTYPE html>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<html>
<head>
<meta charset="utf-8">
<title>Street View service</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var latitude=null;
var longitude=null;
var fenway;
var map;
var panoramaOptions;
function initialize() {
var value = '950 COUNTRY CLUB DRIVE, MORAGA 94556 ';
alert("value"+value);
var infoWindow = new google.maps.InfoWindow;
$.ajax({
url:"http://maps.googleapis.com/maps/api/geocode/json?address="+value+"&sensor=false",
type: "POST",
success:function(res){
latitude=res.results[0].geometry.location.lat;
alert("latitude"+latitude);
longitude=res.results[0].geometry.location.lng;
alert("longitude"+longitude);
}
});
fenway = new google.maps.LatLng(latitude,longitude);
var mapOptions = {
center: fenway,
zoom: 14
};
var map = new google.maps.Map(
document.getElementById('map-canvas'), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width: 400px; height: 300px"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
</body>
</html>
For the street view you can refer to this API https://developers.google.com/maps/documentation/streetview/
Here you can change FOV, pitch heading. Hope this helps
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>";