I have a problem with Google Maps info windows. I have 2 markers and I want to open both info windows by default. But I can't figure out how to do it.
Here is my code:
<html>
<head>
<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=<key>&sensor=false"></script>
<script type="text/javascript">
var locations = [
['loan 1', 46.166621, 8.853315, '<div style="width:250px">text info 1'],
['loan 2', 46.173000, 8.856315, '<div style="width:250px">text info 2'],
];
function initialize() {
var myOptions = {
center: new google.maps.LatLng(46.166621, 8.853315),
zoom: 15,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("default"), myOptions);
setMarkers(map,locations);
}
function setMarkers(map,locations){
var marker, i
for (i = 0; i < locations.length; i++) {
var loan = locations[i][0]
var lat = locations[i][1]
var long = locations[i][2]
var add = locations[i][3]
latlngset = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
map: map, title: loan , position: latlngset
});
map.setCenter(marker.getPosition())
var content = add
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
}
</script>
</head>
<body onLoad="initialize()">
<div id="default" style="width:100%; height:100%"></div>
</body>
</html>
I tried adding infowindow.open(map,marker); in various place but stil don't work.
Trigger the click-event for the markers.
Put this at the end of the for-loop:
google.maps.event.trigger(marker,'click',{});
working fiddle
Related
We are using Google street view Api Version 3 for our product. We are facing an issue when the street view is loading for the first time. The view is breaking in to pieces/pix, where as when we see the same view in Google maps it is not breaking but the imaginary is showing Blur effect. How we can give the same blur effect in our product also?`
Click this link to see the breaking effect: http://jsfiddle.net/godwinthaya/4wfLkc3t/
<!DOCTYPE html>
<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>
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var mapOptions = {
center: fenway,
zoom: 14
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//marker
var busMarker = new google.maps.Marker({
position: fenway,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
title: 'Bus Stop'
});
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('map-canvas'), panoramaOptions);
map.setStreetView(fenway);
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
}));
google.maps.event.addListener(busMarker, 'click', function() {
alert("Hai");
infowindow.open(map,busMarker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<!--<div id="map-canvas" style="width: 400px; height: 300px"></div> -->
<div id="map-canvas" style="position:absolute; width: 1000px; height: 600px;"></div>
</body>
</html>
Are you calling the events correctly? What you are asking could most likely be a part of the API but there is no documentation or reference as to implement the "blurred effect". Although, if you call all the events correctly, it should give you the default behavior. Here's the sample code for the different events:
var cafe = new google.maps.LatLng(37.869085, -122.254775);
function initialize() {
var panoramaOptions = {
position: cafe,
pov: {
heading: 270,
pitch: 0
},
visible: true
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
google.maps.event.addListener(panorama, 'pano_changed', function() {
var panoCell = document.getElementById('pano_cell');
panoCell.innerHTML = panorama.getPano();
});
google.maps.event.addListener(panorama, 'links_changed', function() {
var linksTable = document.getElementById('links_table');
while (linksTable.hasChildNodes()) {
linksTable.removeChild(linksTable.lastChild);
}
var links = panorama.getLinks();
for (var i in links) {
var row = document.createElement('tr');
linksTable.appendChild(row);
var labelCell = document.createElement('td');
labelCell.innerHTML = '<b>Link: ' + i + '</b>';
var valueCell = document.createElement('td');
valueCell.innerHTML = links[i].description;
linksTable.appendChild(labelCell);
linksTable.appendChild(valueCell);
}
});
google.maps.event.addListener(panorama, 'position_changed', function() {
var positionCell = document.getElementById('position_cell');
positionCell.firstChild.nodeValue = panorama.getPosition() + '';
});
google.maps.event.addListener(panorama, 'pov_changed', function() {
var headingCell = document.getElementById('heading_cell');
var pitchCell = document.getElementById('pitch_cell');
headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
});
}
google.maps.event.addDomListener(window, 'load', initialize);
:
Dear all i am a newbie to Google Maps API. I have a parsed a KML layer in Google Maps API using GeoXML3. Now how do i fetch placement marker value(Name of the place) of KML in Google Maps API onclick. Like when a kml layer gets loaded on google maps and i am clicking on any marker i should be able to fetch the placement value of the marker in an alert box. Please find the code that helps me parse a kml on google maps api. Please guide.
<!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>KML Layer</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript">
function initialize()
{
var chicago = new google.maps.LatLng(75.602836700999987,32.261890444473394);
var myOptions = {
zoom: 2,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//var transitLayer = new google.maps.TransitLayer();
//transitLayer.setMap(map);
var geoXml = new geoXML3.parser({map: map, singleInfoWindow: true});
geoXml.parse('kmload.kml');
var geoXml1 = new geoXML3.parser({map: map, singleInfoWindow: true});
geoXml1.parse('lines.kml');
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Is this what you are looking for? I have added the alert in the onclick function which displays me the name of the placemark in the alert box. Please check and let me know if you find any issues.
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<title>KML Placement Value Test</title>
<style>
html, body, #map_canvas {
height: 100%;
margin: 0;
padding: 0;
}
#panel {
top: 5px;
left: 85%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
.infowindow * {font-size: 90%; margin: 0}
</style>
<script type="text/javascript" >
geocoder = new google.maps.Geocoder();
var geoXml = null;
var geoXmlDoc = null;
var map = null;
var myLatLng = null;
var myGeoXml3Zoom = true;
var marker = [];
var polyline;
function initialize()
{
myLatLng = new google.maps.LatLng(37.422104808,-122.0838851);
var test;
var lat = 37.422104808;
var lng = -122.0838851;
var zoom = 18;
var maptype = google.maps.MapTypeId.ROADMAP;
if (!isNaN(lat) && !isNaN(lng))
{
myLatLng = new google.maps.LatLng(lat, lng);
}
var myOptions = {zoom: zoom,center: myLatLng,mapTypeId: maptype};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
infowindow = new google.maps.InfoWindow({});
geoXml = new geoXML3.parser({map: map,infoWindow: infowindow,singleInfoWindow: true,zoom: myGeoXml3Zoom, markerOptions: {optimized: false},createMarker: createMarker});
geoXml.parse('test.kml');
};
var createMarker = function (placemark, doc) {
var markerOptions = geoXML3.combineOptions(geoXml.options.markerOptions, {
map: geoXml.options.map,
position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng),
title: placemark.name,
zIndex: Math.round(placemark.Point.coordinates[0].lat * -100000)<<5,
icon: placemark.style.icon,
shadow: placemark.style.shadow
});
// Create the marker on the map
var marker = new google.maps.Marker(markerOptions);
if (!!doc) {
doc.markers.push(marker);
}
// Set up and create the infowindow if it is not suppressed
if (!geoXml.options.suppressInfoWindows) {
var infoWindowOptions = geoXML3.combineOptions(geoXml.options.infoWindowOptions, {
content: '<div class="geoxml3_infowindow"><h3>' + placemark.name +
'</h3><div>' + placemark.description + '</div></div>',
pixelOffset: new google.maps.Size(0, 2)
});
if (geoXml.options.infoWindow) {
marker.infoWindow = geoXml.options.infoWindow;
} else {
marker.infoWindow = new google.maps.InfoWindow(infoWindowOptions);
}
marker.infoWindowOptions = infoWindowOptions;
// Infowindow-opening event handler
google.maps.event.addListener(marker, 'click', function()
{
alert(placemark.name);
this.infoWindow.close();
marker.infoWindow.setOptions(this.infoWindowOptions);
this.infoWindow.open(this.map, this);
});
}
placemark.marker = marker;
return marker;
};
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="float: left; width: 70%; height: 100%;"></div>
</body>
</html>
If you use the "afterParse" function to add click listeners to the markers, you can access the data (if you use function closure), example accessing the name:
// assign "useTheData" as the after parse function
var geoXml = new geoXML3.parser({map: map, singleInfoWindow: true, afterParse: useTheData});
geoXml.parse('kmload.kml');
// function to retain closure on the placemark and associated text
function bindPlacemark(placemark, text) {
google.maps.event.addListener(placemark,"click", function() {alert(text)});
}
// "afterParse" function, adds click listener to each placemark to "alert" the name
function useTheData(doc) {
for (var i = 0; i < doc[0].placemarks.length; i++) {
var placemark = doc[0].placemarks[i].polygon || doc[0].placemarks[i].marker || doc[0].placemarks[i].polyline;
bindPlacemark(placemark, doc[0].placemarks[i].name);
}
};
working example
hope it can help ;)
/**
* map
*/
var myLatlng = new google.maps.LatLng(39.980278, 4.049835);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById('mapa'), myOptions);
var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];
function makeMarker(options){
var pushPin = new google.maps.Marker({map:map});
pushPin.setOptions(options);
google.maps.event.addListener(pushPin, 'click', function(){
infoWindow.setOptions(options);
infoWindow.open(map, pushPin);
});
markerArray.push(pushPin);
return pushPin;
}
google.maps.event.addListener(map, 'click', function(){
infoWindow.close();
});
function openMarker(i){
google.maps.event.trigger(markerArray[i],'click');
};
/**
*markers
*/
makeMarker({
position: new google.maps.LatLng(39.943962, 3.891220),
title: 'Title',
content: '<div><h1>Lorem ipsum</h1>Lorem ipsum dolor sit amet<div>'
});
openMarker(0);
In the variable request i want to change the radius dynamically i.e when i enter an value such as 1000 in the text field parking areas within an radius of 1000 m should be visble like wise if i enter someother value it should change dynamiclly .
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true&libraries=places"> </script>
<script>
var marker;
var map;
var infowindow = new google.maps.InfoWindow();
var myCenter;
var markers = [];
function initialize()
{
myCenter = new google.maps.LatLng(13.052413899999994,80.25065293862303);
map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myCenter,
zoom: 15
});
}
function some()
{
var request = {
location: myCenter,
radius: 500,
types: ['bank']
};
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place)
{
var placeLoc = place.geometry.location;
marker = new google.maps.Marker({
position: place.geometry.location
});
marker.setIcon({
url:'bank.png',
size: new google.maps.Size(70, 71),
anchor: new google.maps.Point(17, 14),
scaledSize: new google.maps.Size(35, 35)
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
markers.push(marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width: 50%; float:left"></div>
<div style="width:46%; float:left">
<input type="number" id="inputarea">
<button onclick="some();">Banks</button>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
</body>
</html>
Like this:
function some()
{
var request = {
location: myCenter,
radius: parseInt(document.getElementById('inputarea').value, 10),
types: ['bank']
};
...
}
Is there a way to activate the info window on google map from the external link? The html and js code is below.
I would like to have a simple external link to activate infowindow of markers.
Any help would be gratefully appreciated
Sajja :)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Map</title>
<style>
#map{
width:640px;
height: 480px;
border:6px solid #6f5f5e;
margin:20px auto 30px auto;
}
</style>
</head>
<body>
<div class='container'>
<div id="map"> </div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script>
var markers = [
['Marker 1', 13.988719,100.617909],
['Marker 2.', 13.662811,100.43758],
['Marker 3', 13.744961,100.535073],
['Marker 4', 13.801981,100.613864],
['Marker 5', 13.767507,100.644024],
];
$(document).ready(function() {
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("map"),myOptions);
var image = new google.maps.MarkerImage('img/marker.png',
new google.maps.Size(65, 32),
new google.maps.Point(0,0),
new google.maps.Point(18, 42)
);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(pos);
marker = new google.maps.Marker({
position: pos,
map: map,
icon: image
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
});
</script>
</body>
You can use,
function infoOpen(i)
{
google.maps.event.trigger(markers[i],'click');
}
Use this function for onclick of an element
eg.
open it
Here I am posting the complete code
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
function infoOpen(i)
{
google.maps.event.trigger(gmarkers[i], 'click');
}
var gmarkers = [];
var markers = [];
markers = [
['0', 'Marker 1', 13.988719, 100.617909],
['1', 'Marker 2', 13.662811, 100.43758],
['2', 'Marker 3', 13.744961, 100.535073],
['3','Marker 4', 13.801981, 100.613864],
['4', 'Marker 5', 13.767507, 100.644024]];
$(document).ready(function () {
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var image = new google.maps.MarkerImage('img/marker.png',
new google.maps.Size(65, 32),
new google.maps.Point(0, 0),
new google.maps.Point(18, 42));
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var pos = new google.maps.LatLng(markers[i][2], markers[i][3]);
var content = markers[i][1];
bounds.extend(pos);
marker = new google.maps.Marker({
position: pos,
map: map
});
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, content) {
return function() {
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, content));
}
map.fitBounds(bounds);
});
</script>
<style>
body {
text-align: center
}
#map {
width:640px;
height: 480px;
border:6px solid #6f5f5e;
margin:20px auto 30px auto;
}
</style>
</head>
<body>
<div>
mark 1 mark 2 mark 3 mark 4 mark 5
<div id="map"> </div>
</div>
</body>
</html>
I have added gmarkers.push(marker)
Yes, it works! http://jsfiddle.net/tinsajja/nXkXA/43/
OK, let say I have many markers on the map. How can I manage the makers into I have try to put but it doesn't active the infobox.
Due my coding skill is cut and paste so I searching and come with this http://jsfiddle.net/tinsajja/ezSUF/67/
on the code
$('#listdiv').append('<p>' + locations[i][0] + '</p>');
I try to add
<select><option><a href="javascript:show(' + i + ')"...
but the results generated 5 select boxes. Please teach me how to make it.
Thanks,
Sajja
Hey guys I just started a new project with google maps. I'm a newbie in both javascript and google maps API.
UPDATED:
What I'm trying to do is to add a informationWindow to each marker with different content. So when the marker is clicked, the content for that specific marker pops up.
Right now only the 4th element pops up. I need so that every marker pops up with information.
Is there any other way of doing this?
Thanks in advance,
UPDATED:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Marker Animations Loop</title>
<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var myLatlng = new google.maps.LatLng(53.014783, -95.097656);
var iterator = 0;
var neighborhoods = new Array(
new Array("test1","49.165206","-122.665443"),
new Array("test2","49.14476","-121.98544"),
new Array("test3","49.162063","-122.667675"),
new Array("test4","48.455005","-123.54155"),
new Array("test5","51.038156","-114.035339")
);
var markers = [];
function initialize()
{
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
/*for (var i = 0; i < neighborhoods.length; i++)
{
markers[iterator] = new google.maps.Marker(
{
position: neighborhoods[iterator],
map: map,
title: 'Hello World!'
}
);
iterator++;
};*/
var infowindow = new google.maps.InfoWindow({
});
for(var i = 0; i < neighborhoods.length; i++)
{
var marker = new google.maps.Marker(
{
position: new google.maps.LatLng(neighborhoods[i][1], neighborhoods[i][2]),
map: map,
title: neighborhoods[i][0]
}
);
var test = neighborhoods[i][0];
google.maps.event.addListener(marker, 'click', function(e) {
infowindow.open(map,marker);
infowindow.setContent(test);
});
}
};
</script>
</head>
<body onload="initialize();">
<div id="map_canvas" style="width: 1000px; height: 700px;">map div</div>
<!--button id="drop" onclick="drop()">Drop Markers</button-->
</body>
</html>
Here is an example which I ported to the Google Maps API v3 from Mike Williams' Google Maps API (v2) tutorial that has multiple markers with unique infowindows, it uses function closure to associate the infowindow content with the marker.
The final version is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Marker Animations Loop</title>
<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var myLatlng = new google.maps.LatLng(53.014783, -95.097656);
var iterator = 0;
var neighborhoods = new Array(
new Array("test1","49.165206","-122.665443"),
new Array("test2","49.14476","-121.98544"),
new Array("test3","49.162063","-122.667675"),
new Array("test4","48.455005","-123.54155"),
new Array("test5","51.038156","-114.035339")
);
var markers = [];
function initialize()
{
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
infowindow = new google.maps.InfoWindow({
});
for(var i = 0; i < neighborhoods.length; i++)
{
var marker = new google.maps.Marker(
{
position: new google.maps.LatLng(neighborhoods[i][1], neighborhoods[i][2]),
map: map,
title: neighborhoods[i][0],
html: neighborhoods[i][0],
animation: google.maps.Animation.DROP
}
);
google.maps.event.addListener(marker, 'click', function(e) {
infowindow.setContent(this.html);
infowindow.open(map,this);
});
}
};
</script>
</head>
<body onload="initialize();">
<div id="map_canvas" style="width: 1000px; height: 700px;">map div</div>
</body>
</html>