I have successfully created a personalized Google Map using Custom Markers. Now, I am looking to incorporate Info Windows for each marker.
The code for the Custom Markers can be found at: https://developers.google.com/maps/documentation/javascript/custom-markers
I attempted to add Info windows following this example: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
While researching, I came across a somewhat related question here:
Here is a snippet of my code:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: new google.maps.LatLng(40.712696, -74.005019),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
var features = [{
position: new google.maps.LatLng(40.712696, -74.005019),
type: 'parking'
}, {
position: new google.maps.LatLng(40.712753, -74.006081),
type: 'parking'
}, {
position: new google.maps.LatLng(40.713664, -74.007819),
type: 'library'
}];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvkk7wNQcIYXZ7S8XNG8cG-elq0QE2v3k&callback=initMap">
</script>Also, here is the JSFiddle link for reference: https://jsfiddle.net/vishnuprasadps/7g33j2kz/