With the help of another StackOverflow post I've got a map working which makes the markers into clickable links.
I also need the markers to have a label of some kind so the user knows where they'll link to (right now, they're just blank pins) but I'm not sure how to modify this code to build that function in.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 53.618939, lng: -2.1602328}
});
var locations = [
["http://www.google.com", {lat: 53.618939, lng: -2.1601132}],
["http://www.google.com", {lat: 53.61953, lng: -2.1623746}],
["http://www.google.com", {lat: 53.6178993, lng: -2.1601596}],
["http://www.google.com", {lat: 53.5369545, lng: -1.9941523}],
["http://www.google.com", {lat: 53.5380496, lng: -1.9974085}],];
var markers = locations.map(function(location) {
var marker = new google.maps.Marker({
map: map,
position: location[1],
url: location[0] //Will be different for each marker
});
google.maps.event.addListener(marker, 'click', function(){
window.location.href = this.url;
});
return marker;
});
// 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'});
}
To label each marker with a unique letter (at least for up to 26 markers), you can follow this example in the documentation
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;
var markers = locations.map(function(location) {
var marker = new google.maps.Marker({
map: map,
position: location[1],
label: labels[labelIndex++ % labels.length],
url: location[0] //Will be different for each marker
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
return marker;
});
proof of concept fiddle
code snippet:
// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {
lat: 53.618939,
lng: -2.1602328
}
});
var locations = [
["http://www.google.com", {lat: 53.618939,lng: -2.1601132}],
["http://www.google.com", {lat: 53.61953,lng: -2.1623746}],
["http://www.google.com", {lat: 53.6178993,lng: -2.1601596}],
["http://www.google.com", {lat: 53.5369545,lng: -1.9941523}],
["http://www.google.com", {lat: 53.5380496,lng: -1.9974085}],
];
var markers = locations.map(function(location) {
var marker = new google.maps.Marker({
map: map,
position: location[1],
label: labels[labelIndex++ % labels.length],
url: location[0] //Will be different for each marker
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
return marker;
});
// 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'
});
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>
Related
Im having a problem with custom icons. I have managed to get different infotext on the markers, i have managed to get the clusters to work, but when i add var icon1 and var icon2 and place them in the location array: "icon: icon2. All fails, is there a way to use both icon, infowindow and clustermarkers?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Marker Clustering</title>
<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>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 63.418719, lng: 10.3685516}
});
var icon1 = {
url: "https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png", // url
scaledSize: new google.maps.Size(50, 50), // size
};
var icon2 = {
url: "https://maps.google.com/mapfiles/kml/shapes/library_maps.png", // url
scaledSize: new google.maps.Size(50, 50), // size
};
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position:location
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
{lat: 63.131623, lng: 10.370243, info:"Test1", icon: icon1},
{lat: 62.432600, lng: 10.300243, info:"Test2", icon: icon2},
{lat: 62.330642, lng: 10.300243, info:"Test2", icon: icon1},
{lat: 63.530691, lng: 10.300243, info:"Test2", icon: icon2},
]
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzoVQ&callback=initMap">
</script>
</body>
</html>
To actually use the icon in the locations array, change your marker definition from:
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position:location
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
To:
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon: location.icon // <--------------------------------add this
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {
lat: 63.418719,
lng: 10.3685516
}
});
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon: location.icon
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
var icon1 = {
url: "https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png", // url
scaledSize: new google.maps.Size(50, 50), // size
};
var icon2 = {
url: "https://maps.google.com/mapfiles/kml/shapes/library_maps.png", // url
scaledSize: new google.maps.Size(50, 50), // size
};
var locations = [{
lat: 63.131623,
lng: 10.370243,
info: "Test1",
icon: icon1
}, {
lat: 62.432600,
lng: 10.300243,
info: "Test2",
icon: icon2
}, {
lat: 62.330642,
lng: 10.300243,
info: "Test2",
icon: icon1
}, {
lat: 63.530691,
lng: 10.300243,
info: "Test2",
icon: icon2
}, ]
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id="map"></div>
When the initial page loads the map is displayed as it's supposed to be, but markers won't show up until page is refreshed once. Any insight would be greatly appreciated. Thanks in advance.
function initMap() {
var school = {lat: 38.901904, lng: -77.021457};
var map = new google.maps.Map(document.getElementById('map'), { zoom: 17,
center: school });
var marker = new google.maps.Marker({ position: school, map: map });
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
var markerCluster = new MarkerClusterer(map, markers, {imagePath:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
{lat: 38.901477, lng: -77.020735},
{lat: 38.901258, lng: -77.021539},
{lat: 38.903763, lng: -77.018829},
{lat: 38.900974, lng: -77.023124}
];
I have created 3 markers using Google Maps API, but I only want one marker to be active at a time because each marker represents a scoring sequence in a game. For example, if the score is 0 I only want the Chicago marker to be active. I am lost on how to do this any help would be great. Here is some of my code:
<script>
var map;
var score;
function initMap() {
var chicago = {lat: 41.8781, lng: -87.6298};
var indianapolis = {lat: 39.7684, lng: -86.1581};
var oklahomaCity = {lat: 35.4819, lng: -97.5084};
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0.0, lng: 0.0},
zoom: 1
});
var chicagoMarker = new google.maps.Marker({
position: chicago,
map: map
});
var oklahomaCityMarker = new google.maps.Marker({
position: oklahomaCity,
map:map
});
var indianapolisMarker = new google.maps.Marker({
position: indianapolis,
map:map
});
chicagoMarker.setVisible(false);
indianapolisMarker.setVisible(false);
oklahomaCityMarker.setVisible(false);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuvsCAF0gVmwv6AF0SoA3xBjV66RG4r7o&callback=initMap"
async defer></script>
Create the marker withoou map attribute and the assugn with setMap(map) only if socre is 0
var map;
var score;
function initMap() {
var chicago = {lat: 41.8781, lng: -87.6298};
var indianapolis = {lat: 39.7684, lng: -86.1581};
var oklahomaCity = {lat: 35.4819, lng: -97.5084};
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0.0, lng: 0.0},
zoom: 1
});
var chicagoMarker = new google.maps.Marker({
position: chicago
});
var oklahomaCityMarker = new google.maps.Marker({
position: oklahomaCity
});
var indianapolisMarker = new google.maps.Marker({
position: indianapolis
});
if ( score == 0) {
chicagoMarker.setMap(map)
}
}
</script>
I have created three markers using Google Maps API. Is there a way that I can add an event listener to each marker so that they will work independently when the corresponding marker is active? I would like to display a message if the user is getting closer to a marker, specifically with bounds_changed. I want to continue giving the user a message until they get to a zoom level of say 5.
<script>
var map;
var score;
score = 0;
function initMap() {
var chicago = {lat: 41.8781, lng: -87.6298};
var indianapolis = {lat: 39.7684, lng: -86.1581};
var oklahomaCity = {lat: 35.4819, lng: -97.5084};
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0.0, lng: 0.0},
zoom: 1
});
var chicagoMarker = new google.maps.Marker({
position: chicago,
});
var oklahomaCityMarker = new google.maps.Marker({
position: oklahomaCity,
});
var indianapolisMarker = new google.maps.Marker({
position: indianapolis,
});
if (score==0) {
chicagoMarker.setMap(map)
}
if (score==1) {
oklahomaCityMarker.setMap(map)
}
if (score==2) {
indianapolisMarker.setMap(map)
}
chicagoMarker.setVisible(false);
indianapolisMarker.setVisible(false);
oklahomaCityMarker.setVisible(false);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuvsCAF0gVmwv6AF0SoA3xBjV66RG4r7o&callback=initMap"
async defer></script>
try this
google.maps.event.addListener(chicagoMarker, 'click', function(){
//do something
})
<script>
function drawMap(){
var balloon = new google.maps.InfoWindow();
var mapOptions = {
center: coords[0],
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
con = con.replace(/[,;]$/,'');
var mystring =con;
var splits = mystring.split(",");
type = type.replace(/[,;]$/,'');
var mystring1 =type;
var splits1 = mystring1.split(",");
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for(var i = 0; i < coords.length; ++i){
var marker = new google.maps.Marker({map: map, position: coords[i], title:splits1[i]+'-'+splits[i], zIndex:i});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
var index = this.zIndex;
balloon.setContent('<b>'+splits1[i]+'</b><br/>'+splits[i]);
balloon.open(map, marker);
}
})(marker, i));
markers.push(marker);
}
}
geocodeClientSide();
</script>
In Above code Split1[i] output returns as either "account" or "lead" .
I want to keep different design images for plotting account and lead .
Currently i am getting red color balloon by default ?
How can i do that ?
Thanks in advance
Asmentioned in google api In new google.maps.Marker().
please check this example. Here we are using two icons, 1 dotted black, and other brown.
var map;
var locations = [{
position: {
lat: -25.363,
lng: 131.044
},
icon: 'http://icons.iconarchive.com/icons/icons8/ios7/256/Maps-Location-icon.png',
}, {
position: {
lat: -28.363,
lng: 135.044,
},
icon: 'http://icons.iconarchive.com/icons/graphicloads/100-flat/256/location-icon.png',
}];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 4,
center: locations[0].position
});
for (var index in locations) {
var image = new google.maps.MarkerImage(
locations[index]['icon'],
null, /* size is determined at runtime */
null, /* origin is 0,0 */
null, /* anchor is bottom center of the scaled image */
new google.maps.Size(20, 20));
var marker = new google.maps.Marker({
position: locations[index].position,
map: map ,
icon: image,
});
}
}
$(document).ready(function() {
initMap();
});
#map {
width: 300px;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>