Google map custom marker with pop-up (Info Windows) on click

Question

I have customized Google Map with Custom Markers. I need to integrate Info Windows to each marker.

Custom Marker code from: https://developers.google.com/maps/documentation/javascript/custom-markers

Tried to integrate Info windows from: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

Here is a related question i found (but it is not exactly what i want): https://stackoverflow.com/a/3059129/6191987

My code below:

  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 added JSFiddle: https://jsfiddle.net/vishnuprasadps/7g33j2kz/

score 2 · Accepted Answer · answered Oct 23 '17 at 09:15

2

What do you want to put as content of your infoWindow ?

But this seems to do the trick :

<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'
    }];

    var infowindow = new google.maps.InfoWindow({
      content: "test"
    });

    // Create markers.
    features.forEach(function(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map
      });
      marker.addListener('click', function() {
        infowindow.open(map, marker);
      });
    });





  }

</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvkk7wNQcIYXZ7S8XNG8cG-elq0QE2v3k&callback=initMap">


</script>

https://jsfiddle.net/uqLxnyca/

Have a good day.

answered Oct 23 '17 at 09:15

Quentin Roger

6,410
2
23
36

Great..! How can i put a link to pop-up window? means, same like that info window? Eg: `Link` Can we possible to customize the pop-up? – vishnu Oct 23 '17 at 09:21
Sure like this : https://jsfiddle.net/uqLxnyca/1/ you can find may informations on the google documentation https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple – Quentin Roger Oct 23 '17 at 09:24
One more thing.. It seems same contents for all Markers.. Is it possible to add separate content? – vishnu Oct 23 '17 at 09:30
Like this ? https://jsfiddle.net/pL0n6xu1/ I set the content of the info window when you click on a marker – Quentin Roger Oct 23 '17 at 09:54
Not like that, i need to show some custom contents for each marker.. not that `LatLng` positions – vishnu Oct 23 '17 at 09:56
I putted the location but you can put whatever you want (I used LatLng because its different for each marker) – Quentin Roger Oct 23 '17 at 10:11
I just updated like this: [https://jsfiddle.net/vishnuprasadps/pL0n6xu1/1/](https://jsfiddle.net/vishnuprasadps/pL0n6xu1/1/) but not working.. – vishnu Oct 23 '17 at 10:19
Yes.. Great..! It is worked... [https://jsfiddle.net/vishnuprasadps/pL0n6xu1/2/](https://jsfiddle.net/vishnuprasadps/pL0n6xu1/2/) – vishnu Oct 23 '17 at 10:31
Quentin Roger, Have a Great day..! Happy coding – vishnu Oct 23 '17 at 10:32

Google map custom marker with pop-up (Info Windows) on click

1 Answers1