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
Related
Im trying to create a map that contains markers with different colors;
Red: http://maps.google.com/mapfiles/ms/icons/red-dot.png
Yellow: http://maps.google.com/mapfiles/ms/icons/yellow-dot.png
As you can see bellow, I used the Google Maps API and the OverlappingMarkerSpiderfier (because I've some markers that are setted at the same point), but all the markers are red (with the standart icon marker, not my custom )
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset="UTF-8" />
<title>My test</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script> <script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
</head> <style type="text/css">
html, body { height:100%; width:100%;}
</style><body>
<div id="map" style="width:100%; height:100%;"></div>
</body>
<script type="text/javascript">
var locations = [
['test', -27.23, -52.02,1,"http://maps.google.com/mapfiles/ms/icons/red-dot.png"],
['test', -15.79, -47.88,10,"http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"],
['test', -3.73, -38.52,11,"http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
panControl:false,
zoomControl:true,
mapTypeControl:false,
scaleControl:false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:false,
center: new google.maps.LatLng(20.5, 15.6),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var oms = new OverlappingMarkerSpiderfier(map,
{markersWontMove: true, markersWontHide: true,keepSpiderfied : true});
var iw = new google.maps.InfoWindow();
oms.addListener('click', function(marker, event) {
iw.setContent(marker.desc);
iw.open(map, marker);
});
oms.addListener('spiderfy', function(markers) {
iw.close();
});
oms.addListener('unspiderfy', function(markers) { });
var marker, i;
for (var i = 0; i < locations.length; i ++) {
var datum = locations[i][0];
var loc = new google.maps.LatLng(locations[i][1], locations[i][2]);
var marker = new google.maps.Marker({
position: loc,
title: datum,
map: map,
icon: locations[i][3]
});
marker.desc = datum;
oms.addMarker(marker);
}
</script>
</body>
</html>
Does anyone know why this is not working or where I went wrong?
Thanks in advance!
Sorry for that guys, the problem was the number informed in the icon. It was 4 and not 3.
var marker = new google.maps.Marker({
position: loc,
title: datum,
map: map,
icon: locations[i][4]
});
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
I have just started working with the Google Maps API, and am trying to display multiple markers across an array of data.
However I am getting a marker for just the first location in my list, which I guess means my loop isn't working properly, but I am not getting any errors to work from.
var mapOptions = {
center: centralLatlng,
zoom: 2
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var cdnLocations = [
['LondonMarker', 51.500, 0.1167],
['NewYorkMarker', 40.7127, -74.0059],
['TokyoMarker', 35.6895, 139.6917],
['BerlinMarker', 52.5167, 13.3833],
['ParisMarker', 48.8567, 2.3508],
['MadridMarker', 40.4000, 3.6833],
]
for (var i = 0; i < cdnLocations.length; i++) {
var cdnLocations = cdnLocations [i]
var marker = new google.maps.Marker({
position: new google.maps.LatLng (cdnLocations[1], cdnLocations[2]),
map: map,
});
}
Check this out:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var locations = [
['LondonMarker', 51.500, 0.1167],
['NewYorkMarker', 40.7127, -74.0059],
['TokyoMarker', 35.6895, 139.6917],
['BerlinMarker', 52.5167, 13.3833],
['ParisMarker', 48.8567, 2.3508],
['MadridMarker', 40.4000, 3.6833],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
center: new google.maps.LatLng(35.68, 139.69),
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
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
Here a jsfiddle example:
http://jsfiddle.net/m2htynto/
I have a page in which left side information is coming from database like business name , its details, address.
and on right side I have a map showing markers of address taken from database.
Now I want to display marker on map when mouse hover to the left information with its address stored on database.
You could do as,
For v3
//start of loop for creating markers
markersArray[param._id] = r; // param._id will be some unique id of your result set
google.maps.event.addListener(r, 'click', function() {
param._infowindow.close(); // close infowindow
load_content(map,this,param._infowindow,param._id); // function to load the content from database
});
// end of loop
function load_content(map,marker,infowindow,id)
{
return $.ajax({
type: "POST",
url: "yourscript.php",
data:{
'id':id
},
success: function(data){// function to be called if the request succeeds
infowindow.setContent(data); //set the contents on infowindow
infowindow.setOptions({
position: marker.getPosition()
});
infowindow.open(map, marker);
}
});
}
function infoOpen(id) // id of the result
{
google.maps.event.trigger(markersArray[id],'click'); // triggers click event of marker
}
HTML
<div onclick="infoOpen('<?= $result_id ?>', '1');">$address1</div><!-- $result_id is id of each result-->
<div onclick="infoOpen('<?= $result_id ?>', '1');">$address2</div><!-- $result_id is id of each result-->
<div onclick="infoOpen('<?= $result_id ?>', '1');">$address3</div><!-- $result_id is id of each result-->
<div onclick="infoOpen('<?= $result_id ?>', '1');">$address4</div><!-- $result_id is id of each result-->
Here is one example
<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>
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>