I am trying to call javascript inside google map infoWindow(). I know it's a classic question. I have read a lot of similar question in stackoverflow butI I can't find solution :(
my code:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.css"/>
<script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Rectangle Overlay</title>
<style type="text/css">
#map {
width:1200px;
height: 700px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init() {
var myOptions = {
center: new google.maps.LatLng(38.122404, 23.862591),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),myOptions);
var locations = [
['Bondi Beach', 38.6391,23.3437],
["<scr"+"ipt type='text/javascript'>alert('test');</scr"+"ipt>", 37.893, 23.936999999999998]
];
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));
}
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<h1>Service</h1>
<h2> Map <h2>
<div id="map"></div>
</script>
</td></tr></table> <div id="chart_div" style="width: 1800px; height: 1100px;"></div> </body>
</html>
anyone know how to solved this issue?
Thank you!
EDIT:
The answer of Jonas Grumannis correct.
In fact the javascript that I need to run is to build a cloudword inside infowindow calling TermCloud() function . I try below code. Any idea please???
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.css"/>
<script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Rectangle Overlay</title>
<style type="text/css">
#map {
width:1200px;
height: 700px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init() {
var myOptions = {
center: new google.maps.LatLng(38.122404, 23.862591),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),myOptions);
var locations = [
['Bondi Beach', 38.6391,23.3437],
["Hello", 37.893, 23.936999999999998]
];
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);
var yourFunction = new YourFunction(locations[i][0])
}
})(marker, i));
}
var YourFunction = function(str) {
this.init = function() {
google.load("visualization", "1");
google.setOnLoadCallback(draw);
}
this.init();
}
function draw() {
data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addColumn('string', 'Link');
data.addRows(3);
data.setValue(0, 0, 'First Term');
data.setValue(0, 1, 10);
data.setValue(1, 0, 'Second');
data.setValue(1, 1, 30);
data.setValue(1, 2, 'http://www.google.com');
data.setValue(2, 0, 'Third');
data.setValue(2, 1, 20);
var outputDiv = document.getElementById('tcdiv');
var tc = new TermCloud(outputDiv);
tc.draw(data, null);
}
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<h1>Service</h1>
<h2> Map <h2>
<div id="map"></div>
</script>
</td></tr></table> <div id="chart_div" style="width: 1800px; height: 1100px;"></div> </body>
</html>
Found a solution -- wrap the infoWindow content in a div and add a listener in the 'domready' event for that div's id (see this SO thread):
var infowindow = new google.maps.InfoWindow({
content: '<div id="myInfoWinDiv">'+ myContent +'</div>'
});
google.maps.event.addListener(infowindow,'domready',function(){
$('#myInfoWinDiv').click(function() {
//Do your thing
});
});
In my example, a click handler is attached to the div using jQuery. You can put any JS in the domready event handler. It needs to be done in the infoWindow's domready, otherwise you can't be certain that the object has been created.
I think calling a function click listener should work (haven't tested it though):
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
var yourFunction = new YourFunction()
}
})(marker, i));
Then, outside all the google maps stuff
var YourFunction = function() {
this.init = function() {
alert("You have clicked a marker");
}
this.init();
}
What about click event in Google Map API V3?
var infowindow = new google.maps.InfoWindow({
content: '<div id="myInfoWinDiv">'+ myContent +'</div>'
});
google.maps.event.addListener(marker, 'click', function(e){
infowindow.open(map, marker);
// Other stuff goes here...
});
Related
I am making a webpage with Google Maps API but I am getting "google not defined error"
How can I get rid of this?
How can I import Google or do something to make this piece of code work?
I want a program in which user will enter location and it shows marker there. but it is not working properly.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<h1>Perform Google Maps Search</h1>
<h3> Please enter the place you want to search</h3>
<input type="text" id="mapsearch" size="50"> <br>
<br>
<div id="map"></div>
<script>
var map;
function initMap() {
var myOptions = {
zoom:14,
navigationControl: true,
scaleControl: true,
panControl: true,
center: new google.maps.LatLng(43.6532,-79.3832),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'),myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(43.6532,-79.3832),
title:"Toronto"
});
marker.setMap(map);
}
var searchBox = new google.maps.places.SearchBox(document.getElementById('mapsearch'));
map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('mapsearch'));
google.maps.event.addListener(searchBox, 'places_changed', function() {
searchBox.set('map', null);
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (i = 0; place = places[i]; i++) {
(function(place) {
var marker = new google.maps.Marker({
position: place.geometry.location
});
marker.bindTo('map', searchBox, 'map');
google.maps.event.addListener(marker, 'map_changed', function() {
if (!this.getMap()) {
this.unbindAll();
}
});
bounds.extend(place.geometry.location);
}(place));
}
map.fitBounds(bounds);
searchBox.set('map', map);
map.setZoom(Math.min(map.getZoom(),12));
});
google.maps.event.addDomListener(window, 'load', init);
</script>
<script src="https://maps.googleapis.com/maps/api/js?key="Your_API_Key"&callback=initMap"
async defer></script>
</body>
</html>
initMap function should be closed at last you are closing it before
var searchBox = new google.maps.places.SearchBox(document.getElementById('mapsearch'));
So you are getting google undefined error.
Also you have add parameter &libraries=places to google map script src
working example
https://plnkr.co/edit/ngtGvuhDDZAnovwPnPXh?p=preview
// Code goes here
var map;
function initMap() {
var myOptions = {
zoom:14,
navigationControl: true,
scaleControl: true,
panControl: true,
center: new google.maps.LatLng(43.6532,-79.3832),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'),myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(43.6532,-79.3832),
title:"Toronto"
});
marker.setMap(map);
var searchBox = new google.maps.places.SearchBox(document.getElementById('mapsearch'));
map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('mapsearch'));
google.maps.event.addListener(searchBox, 'places_changed', function() {
searchBox.set('map', null);
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (i = 0; place = places[i]; i++) {
(function(place) {
var marker = new google.maps.Marker({
position: place.geometry.location
});
marker.bindTo('map', searchBox, 'map');
google.maps.event.addListener(marker, 'map_changed', function() {
if (!this.getMap()) {
this.unbindAll();
}
});
bounds.extend(place.geometry.location);
}(place));
}
map.fitBounds(bounds);
searchBox.set('map', map);
map.setZoom(Math.min(map.getZoom(),12));
});
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<h1>Perform Google Maps Search</h1>
<h3> Please enter the place you want to search</h3>
<input type="text" id="mapsearch" size="50"> <br>
<br>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtaKPvRV8-ciYtnnzG3QI3CO7m4HJyhaI&libraries=places&callback=initMap"
async defer></script>
</body>
</html>
Most likely your google APIs have not loaded, when your script needs them - hence the "google not defined error". Move this before your script and drop the async defer - or do your script inside a "$( document ).ready"
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtaKPvRV8-ciYtnnzG3QI3CO7m4HJyhaI&callback=initMap"
async defer></script>
I have a google map and I would like to add a new marker on my database with it latitude and longitude but it's not working and i found some error
"Uncaught SyntaxError: missing ) after argument list" pleses tell me. Thank for helping.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var mapOptions = {
center: {lat: 13.847860, lng: 100.604274},
zoom: 10,
}
var map = new google.maps.Map(document.getElementById('map'),mapOptions);
var marker, info;
$.getJSON( "jsondata.php", funtion(jsonObj){
$.each(jsonObj, function(i, item){
marker = new google.maps.Marker({
position: new google.maps.LatLng(item.lat, item.lng),
map: maps,
});
info = new google.maps.Infowindow();
google.maps.event.addListener(marker, 'click', (function(marker, i){
return function() {
info.setContent(item.name);
info.open(maps, marker);
}
})(marker, i));
});
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6oLvZzDHD-qxeX3g17_uHQMWXFXCxU30&callback=initMap">
</script>
</body>
</html>
and my connect file
<?php
header('Content-Type: application/json');
$objConnect = mysqli_connect("localhost","root","root","username-databasename");
$strSQL = "SELECT * FROM markers ";
$objQuery = mysqli_query($objConnect,$strSQL);
$resultArry = arry();
while($obResult = mysql_fetch_assoc($objQuery))
{
array_push($resultArray,$obResult);
}
echo json_encode($resultArray);
?>
https://i.stack.imgur.com/CLvCe.png
Error on Line 24. It should be like this:
$.getJSON( "jsondata.php", funtion(jsonObj)){
Solution:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var mapOptions = {
center: {lat: 13.847860, lng: 100.604274},
zoom: 10,
}
var map = new google.maps.Map(document.getElementById('map'),mapOptions);
var marker, info;
$.getJSON( "jsondata.php", function( jsonObj ) {
$.each(jsonObj, function(i, item){
marker = new google.maps.Marker({
position: new google.maps.LatLng(item.lat, item.lng),
map: maps,
});
info = new google.maps.Infowindow();
google.maps.event.addListener(marker, 'click', (function(marker, i){
return function() {
info.setContent(item.name);
info.open(maps, marker);
}
})(marker, i));
});
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6oLvZzDHD-qxeX3g17_uHQMWXFXCxU30&callback=initMap">
</script>
</body>
</html>
I have added navbar on a google map page that fetches data from external json file and it is not displaying the map correctly.Also,it says that empty string is passed in getelementbyID in jquery mobile file.Is there a way to fix this?
<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 {height: 100%;margin:5% }
</style>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=something&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(43.66207, -79.37617),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
$.getJSON('bikeshare.json', function(data) {
$.each( data.stationBeanList, function(i, value) {
var locationLatLong = new google.maps.LatLng(value.latitude, value.longitude);
var marker = new google.maps.Marker({
position: locationLatLong,
map: map,
icon:"img/bike.png",
title:"Bikes available: "+JSON.stringify(value.availableBikes)
});
var infoWindow = new google.maps.InfoWindow({
content:"Docks Available: "+JSON.stringify(value.availableDocks)
});
google.maps.event.addListener(marker, "click", function() {
infoWindow.open(map, marker);
});
});
});
}
</script>
</head>
<body onload="initialize()">
<div data-role="header" >
<h3>BIKESHARE</h3>
<div data-role="navbar" data-position="fixed">
<ul>
<li>Home </li>
<li><a>Reports</a></li>
<li>Locations</li>
<li>Map</li>
</ul>
</div>
</div>
<div data-role="content" id="map_canvas" ></div>
</body>
</html>
This is a CSS issue.
Change this:
#map_canvas {height: 100%;margin:5% }
to:
#map_canvas {height:700px; margin:5%}
Or an alternative would be to calculate a new height and set it before calling the initialize() function:
//Add this line or something similar which calculate div height in the initialize function
$('#map_canvas').css('height', ($(window).height()-10) + 'px');
New Function
function initialize() {
$('#map_canvas').css('height', ($(window).height() - 10) + 'px');
var myOptions = {
center: new google.maps.LatLng(43.66207, -79.37617),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
$.getJSON('bikeshare.json', function (data) {
$.each(data.stationBeanList, function (i, value) {
var locationLatLong = new google.maps.LatLng(value.latitude, value.longitude);
var marker = new google.maps.Marker({
position: locationLatLong,
map: map,
icon: "img/bike.png",
title: "Bikes available: " + JSON.stringify(value.availableBikes)
});
var infoWindow = new google.maps.InfoWindow({
content: "Docks Available: " + JSON.stringify(value.availableDocks)
});
google.maps.event.addListener(marker, "click", function () {
infoWindow.open(map, marker);
});
});
});
}
Edit after help from Roberto:
Python newbie. The app uses Maps Javascript API v3 on the front end. Backend is webapp2/GAE. I'm assuming I'm not doing the json properly either. Markers not created properly after passing the JSON.
q = Building.query()
buildings = q.fetch()
some_json = []
for building in buildings:
some_json.append(OrderedDict([('lat', float(building.lat)), ('lng', float(building.lng)), ('content', building.uuid)]))
appended_json = json.dumps(some_json)
HTML:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMfzvCXM-LUe43cZ0mB2iDxx4aNOySkrQ">
</script>
<script type="text/javascript">
function initialize() {
var input_value = document.getElementById("lat").value;
var converted_value = JSON.stringify(input_value);
console.log(input_value);
var json = JSON.parse(converted_value);
console.log(json);
var locations = json;
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
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][0], locations[i][1]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][2]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<input id="lat" hidden="hidden" value="{{ appended_json }}">
</body>
</html>
Console outputs the following, if the output is proper and raises no errors:
[{"lat": 39.2831792, "lng": -80.56741099999999, "content": "782f7100c13511e49f92ab5e18d4b38e"}] viewbuildings:17
[{"lat": 39.2831792, "lng": -80.56741099999999, "content": "782f7100c13511e49f92ab5e18d4b38e"}]
Even if the output is not proper, it still not raises anything.
Edit:
Exact HTML browser sees is the following
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMfzvCXM-LUe43cZ0mB2iDxx4aNOySkrQ">
</script>
<script type="text/javascript">
function initialize() {
var input_value = document.getElementById("lat").value;
var converted_value = JSON.stringify(input_value);
console.log(input_value);
var json = JSON.parse(converted_value);
console.log(json);
var locations = json;
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
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][0], locations[i][1]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][2]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<input id="lat" hidden="hidden" value="[{"lat": 39.2831792, "lng": -80.56741099999999, "content": "782f7100c13511e49f92ab5e18d4b38e"}]">
</body>
</html>
Your code is expecting your JSON to look like this:
[[39.2831792,-80.56741099999999,"782f7100c13511e49f92ab5e18d4b38e"]]
Your JSON doesn't look like that, it looks like:
[{"lat": 39.2831792,"lng": -80.56741099999999,"content": "782f7100c13511e49f92ab5e18d4b38e"}];
Change the code to process your JSON format:
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i].content);
infowindow.open(map, marker);
}
})(marker, i));
}
You are also using JSON.stringify and JSON.parse incorrectly. The content of your input element is a JSON string, you only need to pass it to JSON.parse to get a JSON object out of it:
working code snippet:
function initialize() {
var input_value = document.getElementById("lat").value;
var json = JSON.parse(input_value);
var locations = json;
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
map: map
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i].content);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<div id="map-canvas"></div>
<input id="lat" hidden="hidden" value="[{"lat": 39.2831792, "lng": -80.56741099999999, "content": "782f7100c13511e49f92ab5e18d4b38e"}]">
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