Google Maps: Add Multiple Markers with Info box to Custom map

Question

hi i´m quite new to the topic and after a few hours trying i´m close to the goal, but not there i think i would need a little kick.

so far i was able to create a styled map and get 2 markers in position on the map. zoom and some other stuff is clear to me how to influence.

here is the code:

<html>
<head> 
<title> test map </title>

<style type="text/css">
        #map {
            width: 750px;
            height: 500px;
        }
</style>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false"></script>
<script type="text/javascript"> 
    google.maps.event.addDomListener(window, 'load', init);

    function init()
    {

    var mapOptions = {
        zoom: 2,
        panControl: true,
        zoomControl: true,
        center: new google.maps.LatLng(33.524385, -112.048899),
        // 
        styles: [
        {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 17}]}, {
            "featureType": "landscape",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 20}]}, {
            "featureType": "road.highway",
            "elementType": "geometry.fill",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 17}]}, {
            "featureType": "road.highway",
            "elementType": "geometry.stroke",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 29}, {
                "weight": 0.2}]}, {
            "featureType": "road.arterial",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 18}]}, {
            "featureType": "road.local",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 16}]}, {
            "featureType": "poi",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 21}]}, {
            "elementType": "labels.text.stroke",
            "stylers": [
            {
                "visibility": "on"}, {
                "color": "#000000"}, {
                "lightness": 16}]}, {
            "elementType": "labels.text.fill",
            "stylers": [
            {
                "saturation": 36}, {
                "color": "#000000"}, {
                "lightness": 40}]}, {
            "elementType": "labels.icon",
            "stylers": [
            {
                "visibility": "off"}]}, {
            "featureType": "transit",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 19}]}, {
            "featureType": "administrative",
            "elementType": "geometry.fill",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 20}]}, {
            "featureType": "administrative",
            "elementType": "geometry.stroke",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 17}, {
                "weight": 1.2}]}]
    };

    var mapElement = document.getElementById('map');

    var myMap = new google.maps.Map(mapElement, mapOptions);


    var pos = new google.maps.LatLng(33.524385, -12.048899);
    var poi_marker = new google.maps.Marker(
    {
        map: myMap,
        draggable: false,
        animation: google.maps.Animation.DROP,
        position: pos
    });

    var pos = new google.maps.LatLng(5.524385, -12.048899);
    var poi_marker = new google.maps.Marker(
    {
        map: myMap,
        draggable: false,
        animation: google.maps.Animation.DROP,
        position: pos



    });

} 
</script>
</head> 
<body>

<div id="map"> </div>
</body>
</html>

what works fine for me. i see the style i like plus 2 positions with the classic marker.

Map from code above Sample

then i looked a bit more around and found out that you can have info boxes with markers. i would like to add HTLM to those boxes for each marker i create.

the google rep. gives this example which works fine for me:

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple-max?hl=en

i would like to add a couple of those to my map like i did on the 2 simple marker postions, but i honestly do not know where to place the code i see in the above link.

tried all kinds for the last 2h and now feed up. i do something wrong, as this should work.

the cherry on the candy would then, if someone would know, where to place the code for giving the Marker my own style. i have found some examples for that. so i would be cool to have it custom all the way.

thx for your help, ideas or whatever you contribute!

possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Dec 19 '13 at 01:50
hi geocodezip. i have seen the post you mention as possible duplicate, it was helpfull to understand the topic on markers better for me, but it is not telling about talking about adding certain styles to a map with those info box markers. that is really my issue. as you saw i could built a map with infoboxes and also html in it, but not give it the black style i want in combo. — user3116868, Dec 20 '13 at 11:43
The map styling is separate from the markers. You can use the multiple marker code with your styled map. — geocodezip, Dec 20 '13 at 12:27
do you have any link where i can find a how to. i need to place all in one html doc. — user3116868, Dec 20 '13 at 16:52

Matthew Paxman · Answer 1 · 2013-12-22T21:37:03.060

You want the infobox to propogate when you click on the marker right? For this you'll need to set a listener that listens for each plotted marker to be clicked and then generate an infobox once it's done.

function infoBoxCreator() {

  var raInfoBoxElement = document.createElement('div');

  var infoBoxInfo = document.createElement('div');
  infoBoxInfo.className = 'infobox_content';
  infoBoxInfo.innerHTML = 'Text In My Infobox';

  raInfoBoxElement.appendChild(raNameElement);

  var infoBoxText = raInfoBoxElement;

  plotMarker(infoBoxText);
}


function plotMarker(infoBoxText) {

  var coordinate = new google.maps.LatLng(someLAT, someLONG);
  var infowindow = new google.maps.InfoWindow();

// Create the marker
  var marker = new google.maps.Marker({
    map: map,
    position: coordinate
  });

// Create Info window and destroy any other open infowindows
google.maps.event.addListener(marker, "click", function() {
    if (infowindow)
        infowindow.close();
    infowindow = new google.maps.InfoWindow({content: infoBoxText});
    infowindow.open(map, marker);
});

EDIT: By marker style do you mean custom icons? In google.maps.Marker just put in icon: new google.maps.MarkerImage(FILEPATH) and then the file path to the image you'd like to use as the custom marker.

EDIT 2: Still early in the morning. I forgotvar infowindow = new google.maps.InfoWindow(); I've added it in now.

EDIT 3: In the map with the infoboxes already working, just make your mapOptions look like this:

var mapOptions = {
    center: new google.maps.LatLng(37.276087947677254, -12.048898999999995),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]}],
    streetViewControl: false
};

That's got it working for me.

hey matthew, thx a ton for giving an answer. i will give it a try and see how far i will come. once done with all i will share the result and code with you for your help in case you need it. no worries about the early morning ;-) thats how it roles sometimes. — user3116868, Dec 19 '13 at 07:54

Google Maps: Add Multiple Markers with Info box to Custom map

1 Answers1