Is there a way to mark areas with multiple markers? - javascript

In my project users make reports and leave a marker on the map.
I was wondering if it was possible to mark the zones with more markers in the map with different colors.
Thanks
Below I wrote a part of my javascript code (also because StackOverflow doesn't let me insert everything).
You can view the data on the database and insert the marker on the map.
Markers are automatically inserted when the site starts.
I would like to mark the area with more red marker for example.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 45.6140747, lng: 8.8427703},
zoom:14
});
var markerCluster = new MarkerClusterer(map, markersArray,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
$( document ).ready(function() {
dbRef.on('value', function(snapshot) {
snapshot.forEach(function(child) {
var childs=child.val();
//var dataSegn = new Date(childs.data2.year,childs.data2.month,childs.data2.date);
var contentString = 'Segnalazione del: '+childs.data+'<br>Per: '+childs.motivo+'<br><img src="'+childs.urlimmagine+'" alt="Foto" style="width:200px;height:300px;">';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
if(childs.motivo =='ESCREMENTI') {
var marker = new google.maps.Marker({
position: {lat: childs.lat, lng: childs.lon},
map: map,
title: childs.motivo,
icon : 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
});
markersArray.push(marker);
marker.addListener('click', function() {
map.setZoom(16);
map.setCenter(marker.getPosition());
infowindow.open(map, marker);
});
}
if(childs.motivo =='PERICOLOSI'){
var marker = new google.maps.Marker({
position: {lat: childs.lat, lng: childs.lon},
map: map,
title: childs.motivo,
icon : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
markersArray.push(marker);
marker.addListener('click', function() {
map.setZoom(16);
map.setCenter(marker.getPosition());
infowindow.open(map, marker);
});
}
if(childs.motivo =='RANDAGIO'){
var marker = new google.maps.Marker({
position: {lat: childs.lat, lng: childs.lon},
map: map,
title: childs.motivo,
icon : 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
});
markersArray.push(marker);
marker.addListener('click', function() {
map.setZoom(16);
map.setCenter(marker.getPosition());
infowindow.open(map, marker);
});
}
if(childs.motivo =='MALTRATTATI'){
var marker = new google.maps.Marker({
position: {lat: childs.lat, lng: childs.lon},
map: map,
title: childs.motivo,
icon : 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'
});
markersArray.push(marker);
marker.addListener('click', function() {
map.setZoom(16);
map.setCenter(marker.getPosition());
infowindow.open(map, marker);
});
}
});
});

Related

When I click a marker on Google map it should open multiple markers, but the marker that has been clicked should also appear

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 = [];

How can I show text when clicking on a Google Maps API marker?

How can I set a text when I click on the icon marker from google map?
The request is: when I click on a icon the text should appear and on I click on other icon only the selected icon should have text
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {
lat: 45.9356343,
lng: 25.9017273
}
});
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
icon: "/resources/service-points.png",
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
var locations = [{
lat: 44.426049,
lng: 26.047637
},
{
lat: 44.428430,
lng: 26.140104
},
{
lat: 44.487002,
lng: 26.078824
},
{
lat: 44.431288,
lng: 26.110165
}
]
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<body>
<div id="map"></div>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
</body>

You should use the InfoWindow object from Google :
*
https://developers.google.com/maps/documentation/javascript/infowindows?hl=fr
The code looks like this, create your object and then add a listener to your marker so it can launch the display of your window :)
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});

you could use an info window
var contentString = 'my text for this marker'
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
icon: "/resources/service-points.png",
title: 'my marker'
});
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
here you can find a google sample https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

Is there a way to add location to the label of a marker that is randomly placed in google maps with javascript?

Is it possible to add the LatLng to the label of the marker that is placed at random to show where that marker is? Also considering the infoWindow option but have not been successful yet.
var map;
var markers = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markersIndex = 0;
function initialize() {
var Wilm = new google.maps.LatLng(34.2257,-77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map-
canvas'),mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
label: markers[markersIndex++ % markers.length],
map: map
});
google.maps.event.addListener(marker, 'rightclick', function(event) {
marker.setMap(null);
});
markers.push(marker);
}
google.maps.event.addDomListener(window, 'load', initialize);

Not sure what you mean by a label.
this will add markers to the map with an info window with the latlng:
function initMap() {
var Wilm = new google.maps.LatLng(34.2257, -77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var contentString = 'Lat' + marker.getPosition().lat() + ', lng: ' + marker.getPosition().lng();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
function initMap() {
var Wilm = new google.maps.LatLng(34.2257, -77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var contentString = 'Lat' + marker.getPosition().lat() + ', lng: ' + marker.getPosition().lng();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap">
</script>

animated gif in array in google map

I am trying to use optimize:false parameter in my code to use animated gif as a mouseover:
var icon1 = "circle.png";
var icon2 = "circlered.gif";
var markers = [];
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,
visible: false,
icon: icon1
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
when I use for example:
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,
visible: false,
icon: icon2, //here I purposely changed it to animated gif first
optimize: false
});
I have no problems.
but when I try to use the same here:
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
optimize:false;// here is the wrong code obviously
}
})(marker, i));
I get the image disappearing not animating
Please suggest solution
based on the suggestions posted by the #geocoder here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
html,
body,
#map-canvas{
width: 100%;
margin: 0px;
padding: 0px;
height: 880px;
z-index:2
}
#maptwo {
z-index:1
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var map = new google.maps.Map(
document.getElementById("map-canvas"), {
center: new google.maps.LatLng(40.222869, 47.602673),
zoom: 13,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var icon1 = "http://maps.google.com/mapfiles/ms/micons/blue.png";
var icon2 = {
url: "http://blogs.technet.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-01-35/e8nZC.gif",
scaledSize: new google.maps.Size(75, 100)
};
var markers = [];
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,
optimized: false,
visible: false,
icon: icon1
});
bounds.extend(marker.getPosition())
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
/* Change markers on zoom */
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
// iterate over markers and call setVisible
for (i = 0; i < locations.length; i++) {
markers[i].setVisible(zoom >= 11);
}
});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
['Location1', 39.031586, 46.590031, 5],
['Location2', 38.998439, 46.557591, 4],
['Location3', 38.913429, 46.547370, 3],
['Location4', 39.090245, 46.703794, 2],
['Location5', 39.130588, 46.696239, 1]
];
//here I create a function that will show/hide layers that are defined by the latLng values
function toggleLayer(firLayer, id) {
if ($('#' + id).is(':checked')) {
firLayer.setMap(map);
} else {
firLayer.setMap(null);
}
}
//this is the end of the function
// Fir AZE is one of the many layers that are drawn
drawAZE = new google.maps.Polygon({
path: firAZE,
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00CCFF',
fillOpacity: 0.15
});
//end of FirAZE end of layer
// Add a listener for the drawAZE mouseover/mouseout event.
google.maps.event.addListener(drawAZE ,'mouseover',function(){
this.setOptions({fillColor: "#FF0000"},{fillOpacity:"0.8"});
});
google.maps.event.addListener(drawAZE ,'mouseout',function(){
this.setOptions({fillColor: "#00CCFF"},{fillOpacity:"0.5"});
});
//end of drawAZE listener
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="maptwo"></div>
<input id="fir_azerbaijan" type="checkbox" onClick="toggleLayer(drawAZE,'fir_azerbaijan')" /> AZERBAIJAN
</body>
</html>
as you can see the code in "Fir AZE" draws a layer.
then later it(the drawn layer) is supposed to be shown on click , the example provided initially at this link www.visualguide.ca/example shows that.
when I was asking about the solution for the animated marker I thought that I had problem with optimize :false - because all their lines of code were working ok.
as I have tried to implement solution provided below it worked! but I lost my ability to show/hide layers on click.sorry if this was not clear initially
my intial code was:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(40.222869, 47.602673),
mapTypeId: google.maps.MapTypeId.TERRAIN,
zIndex: 3
};
// Set map
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
it was changed to
function initialize() {
var map = new google.maps.Map(
document.getElementById("map-canvas"), {
center: new google.maps.LatLng(40.222869, 47.602673),
zoom: 13,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
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,
optimized: false,
visible: false,
icon: icon1
});
bounds.extend(marker.getPosition())
//....
}
map.fitBounds(bounds);
}
I have compared line by line to locate this, and am stumbled.

One option is to create the marker with {optimized: false}:
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,
optimized: false,
icon: icon1
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
}
code snippet with animated gif:
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var icon1 = "http://maps.google.com/mapfiles/ms/micons/blue.png";
var icon2 = {
url: "http://blogs.technet.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-01-35/e8nZC.gif",
scaledSize: new google.maps.Size(75, 100)
};
var markers = [];
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,
optimized: false,
icon: icon1
});
bounds.extend(marker.getPosition())
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
['palace', 52.231871, 21.005841],
['arkadia', 52.257305, 20.984481],
['stadium', 52.215147, 21.035074]
];
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

somehow I have managed(with the help of geocoder and Alex - thanks
//announce my variables
var icon1 = "circle.png";
var icon2 = "circlered.gif";
var markers = [];
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,
optimized:false, // <-- required for animated gif
visible: false,
icon: icon1
});
I also managed to have my layers appearing on click

Google Map Center and InfoWindow

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);

Categories

Resources