javascriptapigoogle-mapsmapsinfowindow
Changing an infoWindow to an iconImage
I am experimenting with creating a map of fire hydrants for my department using the google maps API, so far all is going well, I just need some help with an info window that displays the geolocation, I want to change this to just an icon rather that an infowindow with an icon inside it, please see the attached code and the screenshot of my problem.
<!DOCTYPE html>
<html>
<head>
<title>Hydrants</title>
<meta name="viewport" content="initial-scale=1.0">
<link rel="Shortcut Icon" href=images/hl.png>
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" href="images/hl.png">
<meta charset="utf-8">
<style>
#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>
var map, infoWindow;
function initMap(){
// Map options
var options = {
zoom:12,
center: {lat: 53.428345, lng: -6.244447},
}
var map = new google.maps.Map(document.getElementById('map'), options);
// Array of markers
var markers = [
{
coords:{lat:53.423735,lng:-6.231331},
iconImage:'images/hs.png',
content:'<h1>Hydrant</h1> Number NOT LISTED <br> <img src=images/test.jpg width=100%>'
},
{
coords:{lat:53.423571,lng:-6.231491},
iconImage:'images/hs.png',
content:'<h1>Hydrant</h1> Number 1'
},
{
coords:{lat:53.422468,lng:-6.233256},
iconImage:'images/hs.png',
content:'<h1>Hydrant</h1> Number 14'
},
{
coords:{lat:53.422010,lng:-6.233388},
iconImage:'images/hs.png',
content:'<h1>Hydrant</h1> Number 15'
},
{
coords:{lat:53.421566,lng:-6.233123},
iconImage:'images/hs.png',
content:'<h1>Hydrant</h1> Number 16'
},
{
coords:{lat:53.429458,lng:-6.243520},
iconImage:'images/hs.png',
content:'<h1>Hydrant</h1> Number 151'
},
{
coords:{lat:53.429528,lng:-6.243029},
iconImage:'images/hs.png',
content:'<h1>Hydrant</h1> Number 152'
},
{
coords:{lat:53.428883,lng:-6.244101},
iconImage:'images/hs.png',
content:'<h1>Fire Main</h1> Number 154 <br>No Standpipe Required'
},
{
coords:{lat:53.428315,lng:-6.245948},
iconImage:'images/hs.png',
content:'<h1>Hydrant</h1> Number 99'
},
{
coords:{lat:53.424869,lng:-6.233566},
iconImage:'images/hs.png',
content:'<h1>Hydrant</h1> Number 210'
}
];
// Loop through markers
for(var i = 0;i < markers.length;i++){
// Add marker
addMarker(markers[i]);
}
// Add Marker Function
function addMarker(props){
var marker = new google.maps.Marker({
position:props.coords,
map:map,
//icon:props.iconImage
});
// Check for customicon
if(props.iconImage){
// Set icon image
marker.setIcon(props.iconImage);
}
// Check content
if(props.content){
var infoWindow = new google.maps.InfoWindow({
content:props.content
});
marker.addListener('click', function(){
infoWindow.open(map, marker);
});
}
}
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('<img src=images/truck.png>');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYAPICODE&callback=initMap">
</script>
Solution
Instead of making an InfoWindow at the location returned by the Geolocation service, make a marker:
var truck = new google.maps.Marker({
position:pos,
map: map,
icon: "images/truck.png"
});
<div id="map"></div>
<script>
var map, infoWindow;
function initMap() {
// Map options
var options = {
zoom: 12,
center: {
lat: 53.428345,
lng: -6.244447
},
}
var map = new google.maps.Map(document.getElementById('map'), options);
// Array of markers
var markers = [
{
coords: {
lat: 53.423735,
lng: -6.231331
},
iconImage: 'images/hs.png',
content: '<h1>Hydrant</h1> Number NOT LISTED <br> <!-- <img src=images/test.jpg width=100%> -->'
},
{
coords: {
lat: 53.423571,
lng: -6.231491
},
iconImage: 'images/hs.png',
content: '<h1>Hydrant</h1> Number 1'
},
{
coords: {
lat: 53.422468,
lng: -6.233256
},
iconImage: 'images/hs.png',
content: '<h1>Hydrant</h1> Number 14'
},
{
coords: {
lat: 53.422010,
lng: -6.233388
},
iconImage: 'images/hs.png',
content: '<h1>Hydrant</h1> Number 15'
},
{
coords: {
lat: 53.421566,
lng: -6.233123
},
iconImage: 'images/hs.png',
content: '<h1>Hydrant</h1> Number 16'
},
{
coords: {
lat: 53.429458,
lng: -6.243520
},
iconImage: 'images/hs.png',
content: '<h1>Hydrant</h1> Number 151'
},
{
coords: {
lat: 53.429528,
lng: -6.243029
},
iconImage: 'images/hs.png',
content: '<h1>Hydrant</h1> Number 152'
},
{
coords: {
lat: 53.428883,
lng: -6.244101
},
iconImage: 'images/hs.png',
content: '<h1>Fire Main</h1> Number 154 <br>No Standpipe Required'
},
{
coords: {
lat: 53.428315,
lng: -6.245948
},
iconImage: 'images/hs.png',
content: '<h1>Hydrant</h1> Number 99'
},
{
coords: {
lat: 53.424869,
lng: -6.233566
},
iconImage: 'images/hs.png',
content: '<h1>Hydrant</h1> Number 210'
}
];
// Loop through markers
for (var i = 0; i < markers.length; i++) {
// Add marker
addMarker(markers[i]);
}
// Add Marker Function
function addMarker(props) {
var marker = new google.maps.Marker({
position: props.coords,
map: map,
});
// Check content
if (props.content) {
var infoWindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
}
}
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var truck = new google.maps.Marker({
position:pos,
map: map,
icon: "https://maps.google.com/mapfiles/ms/micons/blue.png"
})
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices