I'm not able to add multiple marker on Google map, Can someone see the code below and suggest. my Google not showing the marker for locations[] array.
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
var home = new google.maps.Marker({
position: initialLocation,
map: map,
icon: 'http://www.wicfy.com/images/newmarkers/home-marker.png'
});
var myCity = new google.maps.Circle({
center:initialLocation, map:map, radius:25000, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4,
editable:true
});
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
var locations = [
["New Mermaid",28.8909,76.5796,1,"Georgia Mason","","Norfolk Botanical Gardens, 6700 Azalea Garden Rd.","coming soon"],
["1950 Fish Dish",28.6800,76.9200,2,"Terry Cox-Joseph","Rowena's","758 W. 22nd Street in front of Rowena's", "found"],
];
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,
icon: 'http://www.wicfy.com/images/newmarkers/home-marker.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
}
})(marker, i));
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Add the markers and initialize the map to a valid center before trying to center it using geolocation.
var map;
function initialize() {
var mapOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var locations = [
["New Mermaid",28.8909,76.5796,1,"Georgia Mason","","Norfolk Botanical Gardens, 6700 Azalea Garden Rd.","coming soon"],
["1950 Fish Dish",28.6800,76.9200,2,"Terry Cox-Joseph","Rowena's","758 W. 22nd Street in front of Rowena's", "found"],
];
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][1], locations[i][2]),
map: map,
icon: 'http://www.wicfy.com/images/newmarkers/home-marker.png'
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
working example
Related
I have written code for Google Maps API where when I click a marker multiple markers should appear, but the marker that has been clicked should also appear. Means the page should not refresh. Please help me. Here is my code where if you click on the marker multiple markers will appear, but the marker disappears.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 25.2138, lng: 75.8648};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: 'Hello World!',
map: map
});
marker.addListener('click', function() {
clicktoOpenMAp();
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
});
marker.addListener('mouseout', function() {
infowindow.close();
});
}
function clicktoOpenMAp() { var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.setTilt(50);
var markers = [
['chittorgarh', 24.8887, 74.6269],
['morak', 24.7265, 75.9739],
['mangrol', 25.3362, 76.5112]
];
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
map.fitBounds(bounds);
}
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(8);
google.maps.event.removeListener(boundsListener);
});
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key='YourGoogleApiBecauseicantsharemine'&callback=initMap"></script>
</body>
</html>
Please use your Google API key, because I can't share mine.
Ok, this is how I fixed it:
function initMap() {
var uluru = {
lat: 25.2138,
lng: 75.8648
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: 'Hello World!',
map: map
});
marker.addListener('click', function() {
clicktoOpenMAp();
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
});
marker.addListener('mouseout', function() {
infowindow.close();
});
function clicktoOpenMAp() {
// var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.mapTypeId = "roadmap";
map.setTilt(50);
var markers = [
['chittorgarh', 24.8887, 74.6269],
['morak', 24.7265, 75.9739],
['mangrol', 25.3362, 76.5112]
];
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
map.fitBounds(bounds);
}
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(8);
google.maps.event.removeListener(boundsListener);
});
}
}
You were "creating" another map everytime you clicked in the marker (I commented the line so you know), then you need to put the Function clicktoOpenMap inside initmap.
Note: I also added async defer to the script where you call the api
<script
src="https://maps.googleapis.com/maps/api/js?key='YourGoogleApiBecauseicantsharemine'&callback=initMap" async defer></script>
You can hide the markers with
markers[i].setMap(null);
and to erase them
var markers = [];
I am creating a project using google map. My project contains hospital address ( in longitude and latitude) to be stored in database. But I want to show nearest hospital from my current location. And I am unable to figure out how to do it. Please help me with best algorithm and with some code.
Following code is used just to display all hospital address in map now I want is how to show only 3 nearest hospital from my current positiom.
function initMap() {
var mapType = google.maps.MapTypeId.ROADMAP;
var animationType = google.maps.Animation.DROP;
var currentLocationAnimationType = google.maps.Animation.BOUNCE;
var mapElement = document.getElementById('map');
var nepalLocation = {
lat: 28.3949,
lng: 84.1240
};
var mapOptions = {
center: nepalLocation,
zoom: 7,
mapTypeId: mapType,
};
// actual map
map = new google.maps.Map(mapElement, mapOptions);
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var geocoder = geocoder = new google.maps.Geocoder();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(p) {
var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: "My Location",
animation: currentLocationAnimationType
});
google.maps.event.addListener(marker, "click", function(e) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(marker.title);
infoWindow.open(map, marker);
});
});
} else {
alert('Geo Location feature is not supported in this browser.');
}
for (var i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var image = "img/iconHospital.png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image,
title: data.district,
animation: animationType
});
}
}
google.maps.event.addDomListener(window, 'load', initMap);
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
See this example at. I adapted your code accordingly.
function initMap() {
var mapType = google.maps.MapTypeId.ROADMAP;
var animationType = google.maps.Animation.DROP;
var currentLocationAnimationType = google.maps.Animation.BOUNCE;
var mapElement = document.getElementById('map');
var nepalLocation = {
lat: 28.3949,
lng: 84.1240
};
var mapOptions = {
center: nepalLocation,
zoom: 7,
mapTypeId: mapType,
};
// actual map
map = new google.maps.Map(mapElement, mapOptions);
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var geocoder = geocoder = new google.maps.Geocoder();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(p) {
var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: "My Location",
animation: currentLocationAnimationType
});
google.maps.event.addListener(marker, "click", function(e) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(marker.title);
infoWindow.open(map, marker);
});
});
} else {
alert('Geo Location feature is not supported in this browser.');
}
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: nepalLocation,
radius: 50000,
type: ['hospital']
}, callback);
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
if (i == 2) {
break;
}
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initMap);
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
How can I add labels to my two markers so that when you click on the marker it shows you more details about it and also how can I change the icon of the "Access Point 2" to a different marker
function initialize() {
var myLatlng = new google.maps.LatLng(-26.322402,31.142249),
map = new google.maps.Map(document.getElementById('google-map-default'), {
zoom: 14,
center: myLatlng
}),
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "We are here!"
});
var accessPoint1 = new google.maps.LatLng(-26.315402,31.123924),
marker1 = new google.maps.Marker({
position: accessPoint1,
map: map,
title: "Access Point 1"
});
var accessPoint2 = new google.maps.LatLng(-26.316700,31.138043),
marker2 = new google.maps.Marker({
position: accessPoint2,
map: map,
title: "Access Point 2"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
#google-map-default {
height: 200px;
}
<div id="google-map-default"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
the code above is in a file called maps.mini.js which is currently working fine. I just need to make modifications on it as specified above
Here is a probably more robust and extendable solution that makes use of an array holding your locations (markers), and a single InfoWindow object. With this, you can add as many locations as you need without having to duplicate the rest of the code...
function initialize() {
var myLatlng = new google.maps.LatLng(-26.322402, 31.142249);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: myLatlng
});
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "We are here!"
});
var locations = [
[new google.maps.LatLng(-26.315402, 31.123924), 'Access Point 1', 'Custom text 1'],
[new google.maps.LatLng(-26.316700, 31.138043), 'Access Point 2', 'Custom text 2']
];
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: locations[i][0],
map: map,
title: locations[i][1]
});
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);
#map-canvas {
height: 200px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
For your marker1 you can
var my_contentString1 = 'my text content 1... ' ;
var my_infowindow1 = new google.maps.InfoWindow({
content: my_contentString1
});
var accessPoint1 = new google.maps.LatLng(-26.315402,31.123924),
marker1 = new google.maps.Marker({
position: accessPoint1,
map: map,
title: "Access Point 1"
});
marker1.addListener('click', function() {
my_infowindow1.open(map, marker);
});
do the same for marker2
I ended up doing it this way which worked so well for me
<script type="text/javascript">
var locations = [
['ap7', -26.303139, 31.093508, 7],
['ap6', -26.322402, 31.142249, 6],
['ap5', -26.316700, 31.138043, 5],
['ap4', -26.315402, 31.123924, 4],
['ap3', -26.329244, 31.150478, 3],
['ap2', -26.309525, 31.134632, 2],
['ap1', -26.289923, 31.140195, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(-26.309525, 31.134632),
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>
So I have some working code which fetches results from my DB and displays them on a Google map. I also have some code which uses my location to place a marker on a Google map.
My issue is that when I add them together the page loads the results from the DB then I accept geoloaction and it centers the map to my location but doesn't display my marker and also removes the markers for the DB results.
Here is the DB result 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>PHP/MySQL & Google Maps Example</title>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("/Models/phpsqlajax_genxml2.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
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 onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
This is my geolocation code:
// Check if user support geo-location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var geolocpoint = new google.maps.LatLng(latitude, longitude);
var map = new google.maps.Map(document.getElementById('nearMeMap'), {
zoom: 11,
scaleControl: false,
scrollwheel: false,
center: geolocpoint,
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));
}
// Place a marker
var geolocation = new google.maps.Marker({
position: geolocpoint,
map: map,
title: 'Your Location',
icon: 'https://mt.google.com/vt/icon?psize=20&font=fonts/Roboto-Regular.ttf&color=ff330000&name=icons/spotlight/spotlight-waypoint-blue.png&ax=44&ay=48&scale=1&text=%E2%80%A2'
});
});
}
Also I get this in the console:
ReferenceError: locations is not defined
for (i = 0; i < locations.length; i++) {
As the ReferenceError already says, you do not have the variable locations defined in your geolocation code.
I'm sorry if this has been answered somewhere else but when I add a listener to my maps it causes my markers to hide/ not load so can someone explain how to load infowindow and centre to the marker on click?
Heres my code so far:
<section id="wrapper">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<article>
</article>
<script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '600px';
mapcanvas.style.width = '100%';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 12,
//center: coords,
center: new google.maps.LatLng(51.416741,-0.543854),
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
// Geolocation
var marker = new google.maps.Marker({
position: coords,
map: map,
icon:'http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
title:"You are here!",
});
// Great Fosters
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.416741,-0.543854),
map: map,
icon:'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png',
title:"Great Fosters",
});
// St Matthews
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.432327,-0.459162),
map: map,
icon:'http://maps.google.com/mapfiles/ms/icons/orange-dot.png',
title:"St Matthews",
});
// ----- STAINES HOTELS - START -----
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.435698,-0.514469),
map: map,
icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
title:"Travel Lodge Staines",
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.432156,-0.51617),
map: map,
icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
title:"Thames Lodge Staines",
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.43218,-0.516293),
map: map,
icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
title:"The Boleyn Staines",
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.432534,-0.516422),
map: map,
icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
title:"The Swan Staines",
});
// ----- STAINES HOTELS - END -----
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
</script>
</section>
EDIT:
I have now changed my code to include the arrays and it works quite well but now I want the marker to centre on the map when clicked and I want all markers to be in the window but fitBounds doesn't seem to be doing anything. It can be shown here http://www.everythingcreative.co.uk/marker
<section id="wrapper">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<article>
</article>
<script>
var markers = [
['Great Fosters', 51.416741,-0.543854, 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'],
['St Matthews', 51.432327,-0.459162, 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png'],
// Staines
['Travel Lodge Staines', 51.435698,-0.514469, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
['Thames Lodge Staines', 51.432156,-0.51617, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
['The Boleyn Staines', 51.43218,-0.516293, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
['The Swan Staines', 51.432534,-0.516422, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
// Surrey
['The Runnymede Hotel', 51.43751,-0.537544, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
['The Wheatsheaf Hotel', 51.409151,-0.592704, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
['The Premier Inn Sunbury', 51.419322,-0.42248, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
['The Crown Chertsey', 51.39181,-0.501861, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
// Heathrow
['Sofitel Heathrow', 51.473478,-0.49152, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
['Marriott Heathrow', 51.481263,-0.438209, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
['Premier Inn Heathrow', 51.481615,-0.482288, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png']
];
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '600px';
mapcanvas.style.width = '100%';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 12,
//center: coords,
center: new google.maps.LatLng(51.416741,-0.543854),
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
// Marker Control
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
icon: markers[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
// Geolocation
var GeoMarker = new google.maps.Marker({
position: coords,
map: map,
icon:'http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
title:"You are here!",
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
</script>
</section>
To center the map on a marker when it is clicked, change your code to do that:
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
// center on marker
map.setCenter(marker.getPosition());
// open the infowindow
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
for fitBounds to work, you have to pass the .extend method a google.maps.LatLng object. The simplest way to do that given your existing code would be to put it in your "marker control" loop:
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
icon: markers[i][3]
});
bounds.extend(marker.getPosition());
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);