today i'm trying to create a google map with some data, the thing is that i'm copying/pasting the code of google maps examples, but nothing is coming... i get a blank page.... Am i that crazy?
Can you please tell me what's going on?
I'm using chrome and firefox.. both blank.
<!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>Google Maps JavaScript API v3 Example: Polygon Arrays</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var infoWindow;
function initialize() {
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bermudaTriangle;
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
];
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(bermudaTriangle, 'click', showArrays);
infowindow = new google.maps.InfoWindow();
}
function showArrays(event) {
// Since this Polygon only has one path, we can call getPath()
// to return the MVCArray of LatLngs
var vertices = this.getPath();
var contentString = "<b>Bermuda Triangle Polygon</b><br />";
contentString += "Clicked Location: <br />" + event.latLng.lat() + "," +
event.latLng.lng() + "<br />";
// Iterate over the vertices.
for (var i =0; i < vertices.length; i++) {
var xy = vertices.getAt(i);
contentString += "<br />" + "Coordinate: " + i + "<br />" + xy.lat() +"," + xy.lng();
}
// Replace our Info Window's content and position
infowindow.setContent(contentString);
infowindow.setPosition(event.latLng);
infowindow.open(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
The problem is that you have copied the relative reference to Google's stylesheet, and that's where the size of map_canvas is defined.
If you set the size of that div explicitly, or use an absolute reference to the stylesheet, it will work (I just tried that).
Related
Im working with the Google maps API.
I am loading a KML file and a JSON file with jQuery.
The KML file is bike routes in Toronto and the JSON files shows markers for where the Bike Share stations are in Toronto.
When both are loaded, the bike routes don't show up... I think this is because the two files are too big (but but by themselves they load up fine).
Anyway, I would like to load the page with the JSON file, then have a button that when clicked removes the markers and loads the KML file. Another button would remove the KML file and load the markers.
I can't find a way to do this.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDr2ZlJyFHjsjjItTPK7_bvRiw_YBchXW4">
</script><link rel="stylesheet" type="text/css" href="http://www.richardbeardwood.com/stylesassign3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(43.663112,-79.403468),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
$.getJSON("http://api.citybik.es/bixi-toronto.json", function(json1) {
var infoWindow = new google.maps.InfoWindow();
$.each(json1, function(key, data) {
var lat = data.lat;
var newLat = lat.toString().match(/.{2}/g).join('.');
var nextLat = newLat.split('.');
var finLat = nextLat.shift() + '.' + nextLat.join('');
var lng = data.lng;
var newLng = lng.toString().match(/.{3}/g).join('.');
var nextLng = newLng.split('.');
var finLng = nextLng.shift() + '.' + nextLng.join('');
var latLng = new google.maps.LatLng(finLat, finLng);
// Creating a marker and putting it on the map
//var imagebike = 'http://www.richardbeardwood.com/bikes_maps_marker.png';
var marker = new google.maps.Marker({
position: latLng,
icon: 'http://maps.google.com/mapfiles/kml/pal3/icon53.png'
});
var bikeLayer = new google.maps.KmlLayer({
url: 'http://www.richardbeardwood.com/TorontoCyclingMap.kml.xml'
});
bikeLayer.setMap(map);
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
var gettime = new Date(data.timestamp);
var time = gettime.toString();
infoWindow.setContent('<div id="iw-container"><div class="iw-title">' + data.name + '</div><div class="iw-content"><p><img src="http://www.richardbeardwood.com/Bicyle-Symbolgreen.jpg" height="115" width="114"></p><p> As of ' + time + ' at this location there are:<br><br><strong><span class="large">Available docks: ' + data.free + '<br><br>Available bikes: ' + data.bikes + '</span></strong></div></div>');
infoWindow.open(map, marker);
});
marker.setMap(map);
});
});
}
</script>
<script>
function clearMarkers() {
bikeLayer.setMap(null);
}
</script>
</head>
I have this code which shows a marker from my current location and sets the coordinates into the page title, buy now I want to add a search box for adresses but I need that the text of the search box changes to the corresponding coordinates when the markes is draged. and i have no idea hot to do that
here is my code
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map_canvas{
height:800px;
width:800px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<script>
navigator.geolocation.getCurrentPosition(initialize);
var marker, map;
function initialize(position ) {
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
zoom: 14,
center: coords,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
window.document.title= new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mark = new google.maps.Marker({
position: coords ,
map: map,
draggable:true
});
google.maps.event.addListener(mark, 'dragend', function(evt){
window.document.title = evt.latLng.lat() + ',' + evt.latLng.lng() ;
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Test this, and tell me what you think of it
I used the document.getElementById() to select the search_box, and changed its innerHTML.
I slightly modified your event listener
google.maps.event.addListener(mark, 'dragend', function(evt){
var coordinates = {lat: evt.latLng.lat(), lng: evt.latLng.lng()};
window.document.title = coordinates.lat + ',' + coordinates.lng ;
document.getElementById('search_box').innerHTML = coordinates.lat + ',' + coordinates.lng ;
});
and I added a div with an id of search_box in your HTML.
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'm sure this is a basic problem but I've hit my head against the wall too many times now, so hopefully someone will take pity on me!
I have the following example but all it does is show a grayed out box, no map at all. Can anyone tell me why?
I've checked that I'm actually returning a result and it seems to be working fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body, #map-canvas {margin: 0;padding: 0;height: 100%;}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var geocoder;
var map;
function initialize()
{
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': "England"}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(results[0].geometry.location),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Let's draw the map
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
initialize();
</script>
</head>
<body onload="">
<div id="map-canvas" style="width: 320px; height: 480px;"></div>
</body>
</html>
Try resizing the browser window, give a shake to browser/drag it from browser tab with the cursor and you will see the map appearing.
From some strange reason in MVC partial view google map comes as blank, your map is working it just need to be resized.
Shaking a browser window with cursor sounds funny, but it works and I am not sure how to best describe it.
Thanks,
Anurag
=======================================================================
my final working code is below:
`
<script type="text/javascript">
$(document).ready(function () {
(function () {
var options = {
zoom: 6,
center: new google.maps.LatLng(-2.633333, 37.233334),
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: false
};
// init map
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
var arrLocation = [];
$("#markerDiv").find("div").each(function () {
var Lat = $(this).find("input[id='Latitude']").val();
var Lon = $(this).find("input[id='Longitude']").val();
var Id = $(this).find("input[id='Id']").val();
var AssessmentDet = $(this).find("input[id='AssessmentDateTime']").val();
var LocAcc = $(this).find("input[id='LocationAccuracy']").val();
var assessorName = $(this).find("input[id='AssessorName']").val();
var partnerName = $(this).find("input[id='PartnerName']").val();
arrLocation.push({
Id: Id,
Latitude: Lat,
Longitude: Lon,
AssessmentDate: AssessmentDet,
LocationAccuracy: LocAcc,
AssessorDetail: assessorName,
PartnerName: partnerName
});
});
var allMarkers = [];
for (var i = 0; i < arrLocation.length; i++) {
//final position for marker, could be updated if another marker already exists in same position
var latlng = new google.maps.LatLng(arrLocation[i].Latitude, arrLocation[i].Longitude);
var finalLatLng = latlng;
var comparelatlng = "(" + arrLocation[i].Latitude + "," + arrLocation[i].Longitude + ")";
var copyMarker = arrLocation[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(arrLocation[i].Latitude, arrLocation[i].Longitude),
map: map,
title: 'Equine # ' + arrLocation[i].Id,
icon:"abc.png"
});
var markerInfo = "Reference # : <b>" + arrLocation[i].Id + "</b><br/>";
markerInfo = markerInfo + "Assessor : <b>" + arrLocation[i].AssessorDetail + "</b><br/>";
markerInfo = markerInfo + "Date : <b>" + arrLocation[i].AssessmentDate + "</b><br/>";
markerInfo = markerInfo + "Partner : <b>" + arrLocation[i].PartnerName + "</b>";(function (marker, i) {
bindInfoWindow(marker, map, new google.maps.InfoWindow(), markerInfo);
})(marker, i);
}
})();
});
function bindInfoWindow(marker, map, infowindow, html) {
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(html);
infowindow.open(map, marker);
});
}
</script>
`
results[0].geometry.location is already a latLng object so you can just say:
center: results[0].geometry.location
Find the working fiddle here : http://jsfiddle.net/87z9K/
It is because of the worng "google.maps.LatLng" provided.
provide for a test the coords and it will work.
replace the line
center: new google.maps.LatLng(results[0].geometry.location),
with
center: new google.maps.LatLng(-34.397, 150.644)
get England coords
It wasn't exactly your issue, but closely related.
I found that I had to set the mapOptions with a valid centre, like so:
new google.maps.Map(mapCanvas, {
center: new google.maps.LatLng(-34.397, 150.644)
});
If I didn't enter map options, or if I did and it didn't have a valid center set, I'd get a blank map that didn't load tiles.
This can also occur if the height/width of the map is 0.
I tried to set map's MapTypeId and it helped as Anurag proposed:
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
I can see a general javascript issue with your code.
Your script might trying to embed the map in the page before the HTML is loaded.
Call the function like this (there are other ways).
<body onload="initialize()">
I'm using the code below to link an HTML list to markers on a map. When I click on the markers, the InfoWindow opens without any problem. However when I click on the list item, although the map pans correctly and centres on the appropriate marker, I cannot get the InfoWindow to open at the same time.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Map My Finds - All Locations</title>
<link rel="stylesheet" href="css/mylocations.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<style>
div#locationslist div{
cursor:pointer; }
</style>
<div id="map"></div>
<div id="locationslist"></div>
<body onload="showLocations()">
<script type="text/javascript">
var map;
var gmarkers = new Array();
var locationslist;
function showLocations() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom:6,
mapTypeId: 'terrain'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("loadmylocations.php", function(data) {
var xml = data.responseXML;
gmarkers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < gmarkers.length; i++) {
var locationname = gmarkers[i].getAttribute("locationname");
var address = gmarkers[i].getAttribute("address");
var locationid = gmarkers[i].getAttribute("locationid");
var point = new google.maps.LatLng(
parseFloat(gmarkers[i].getAttribute("osgb36lat")),
parseFloat(gmarkers[i].getAttribute("osgb36lon")));
var html = "<b>" + locationname + "</b> <br/>" + address;
bounds.extend(point);
var marker = new google.maps.Marker({
map: map,
position: point,
locationid: locationid
});
bindInfoWindow(marker, map, infoWindow, html);
locationslist += "<div onclick=scrollToMarker(" + i + ")>"+locationname+"</div>";
}
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
//display company data in html
document.getElementById("locationslist").innerHTML = locationslist;
});
}
function scrollToMarker(index) {
var point = new google.maps.LatLng(
parseFloat(gmarkers[index].getAttribute("osgb36lat")),
parseFloat(gmarkers[index].getAttribute("osgb36lon"))
);
map.panTo(point);
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing(){
}
</script>
</head>
</body>
</html>
UPDATED CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Map My Finds - All Locations</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<style>
div#locationslist div{cursor:pointer; }
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { height: 70%; width:70% }
</style>
<script type="text/javascript">
var map;
var gmarkers = [];
var locationslist = "";
var arrMarkers = []; // add our markers to this array
function showLocations() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom:6,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("loadmylocations.php", function(data) {
var xml = data.responseXML;
gmarkers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < gmarkers.length; i++) {
var locationname = gmarkers[i]["locationname"];
var address = gmarkers[i]["address"];
//var locationid = gmarkers[i]["locationid"];
var point = new google.maps.LatLng(
parseFloat(gmarkers[i]["osgb36lat"]),
parseFloat(gmarkers[i]["osgb36lon"]));
var html = "<b>" + locationname + "</b> <br/>" + address;
bounds.extend(point);
var marker = new google.maps.Marker({
map: map,
position: point
});
arrMarkers.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
locationslist += "<div onclick=scrollToMarker(" + i + ")>"+locationname+"</div>";
}
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
//display company data in html
document.getElementById("locationslist").innerHTML = locationslist;
});
}
function scrollToMarker(index) {
var point = new google.maps.LatLng(
parseFloat(gmarkers[index]["osgb36lat"]),
parseFloat(gmarkers[index]["osgb36lon"])
);
map.panTo(point);
google.maps.event.trigger(arrMarkers[index], 'click');
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
</script>
</head>
<body onload="showLocations()">
<div id="map"></div>
<div id="locationslist"></div>
</body>
</html>
You've binded the click event on the marker to open an infowindow. What you want to do is trigger that click, i.e. as if the user had done it themselves.
Something like this:
google.maps.event.trigger(marker, 'click');
The hard part will be for you to identify which marker the click event is firing on. Suggest you have an array of all your markers. At the same time as you call scrollToMarker, also do this trigger, and pass through the index parameter too, to identify which marker in your array you're wanting to 'click'
Update: ok, here's a working example of what I mean. I've removed your Ajax request part and put in some dummy marker data, but it should be simple enough for you to figure out how to integrate into your code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Map My Finds - All Locations</title>
<link rel="stylesheet" href="css/mylocations.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<style>
div#locationslist div{cursor:pointer; }
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { height: 70%; width:70% }
</style>
<script type="text/javascript">
var map;
var gmarkers = [];
var locationslist = "";
var arrMarkers = []; // add our markers to this array
function showLocations() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom:6,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var infoWindow = new google.maps.InfoWindow;
gmarkers = [
{locationname: "One", address: "blah", osgb36lat: "51.482238", osgb36lon: "0.001581"},
{locationname: "Two", address: "blahblah", osgb36lat: "51.473364", osgb36lon: "0.011966"},
{locationname: "Three", address: "blahblahblah", osgb36lat: "51.471974", osgb36lon: "-0.000651"},
{locationname: "Four", address: "blahblahblahblah", osgb36lat: "51.472108", osgb36lon: "-0.002196"},
{locationname: "Five", address: "foobar", osgb36lat: "51.474995", osgb36lon: "-0.003827"},
];
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < gmarkers.length; i++) {
var locationname = gmarkers[i]["locationname"];
var address = gmarkers[i]["address"];
//var locationid = gmarkers[i]["locationid"];
var point = new google.maps.LatLng(
parseFloat(gmarkers[i]["osgb36lat"]),
parseFloat(gmarkers[i]["osgb36lon"])
);
var html = "<b>" + locationname + "</b> <br/>" + address;
bounds.extend(point);
var marker = new google.maps.Marker({
map: map,
position: point
});
arrMarkers.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
locationslist += "<div onclick=scrollToMarker(" + i + ")>"+locationname+"</div>";
}
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
//display company data in html
document.getElementById("locationslist").innerHTML = locationslist;
}
function scrollToMarker(index) {
var point = new google.maps.LatLng(
parseFloat(gmarkers[index]["osgb36lat"]),
parseFloat(gmarkers[index]["osgb36lon"])
);
map.panTo(point);
google.maps.event.trigger(arrMarkers[index], 'click');
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
</script>
</head>
<body onload="showLocations()">
<div id="map"></div>
<div id="locationslist"></div>
</body>
</html>