Custom InfoWindow and Marker using gmap3

Question

I am using gmap3 to create a Google Map with an InfoWindow of the information I specify. It works but I want to customize the InfoWindow to be a rounded rectangle and no arrow point to the location and I want a custom marker on the actual location.

How do I do this?

(I find the docs of gmap3 to be a bit confusing.)

Here is the JS I am currently using:

$("#map").gmap3({
map:{
   options:{
   zoom:18,
   mapTypeControl: true,
   mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
   },
   navigationControl: true,
   scrollwheel: true,
   streetViewControl: true
  }
},
infowindow:{
   address:"Boulder, Colorado",
   options:{
   content: "Text"
  }
 }
});

How would I change the InfoWindow to a rounded rectangle with no arrow and a custom marker?

Answer 1

I would use infobox which are described as:

This class behaves like google.maps.InfoWindow, but it supports several additional properties for advanced styling. An InfoBox can also be used as a map label.

However it is not gmap3 based library and in that sense I believe that you need to start initializing infowindow(s) using the "normal way aka. google maps api v3 #infowindows ". But I will recommend infobox since I have got my infowindows to work and styled as I have wanted.

Also, whats more - it comes with packed and not packed version so you will be having complete control over code its using.

Check out these links:

• infobox docs
• infobox api
• released versions

Edit:

Since the question had also the custom marker issue I noticed that gmap3 supports (however) passing values for marker options so you can customize them with ease. (Based on your needs of course.) To simply change the icon of the marker you can do like following:

... somewhere within initialization ...
    marker:{
        options:{
          draggable: false,
          icon: "urlToYourImage.png",
          optimized: false // needed to be false when using images
        },
...

But if you are here to ask real tips ;) I would recommend not to use gmap3 at all - I have tried it and eventually swapped to use just normal google maps api v3 since gmap3 only confuses and hides code to top of google maps api. But its your choice of course.

Cheers.

Answer 2

I know that this is quite an old question but I thought I could add a bit of input based on my recent experiences with gmap3 and the Google Maps API.

Instead of going down the route of using the infobox library (which I found a bit of a mare to get working with the gmap3 library) I decided to it by binding the marker click event to spawn an overlay which I could style to however I wanted.

So, I'd have my JSON with all my addresses on like so

// JSON
var data = JSON.parse('[
{
    "address":"New Street, Salisbury, UK",
    "content":"hello world from salisbury"
},
{
    "address":"86000 Poitiers, France"    ,
    "content":"hello world from poitiers"
},
{
    "address":"66000 Perpignam, France",
    "content":"hello world from perpignam"
}

]');

I set my gmap defaults

// Gmap Defaults
$map.gmap3({
    map:{
        options:{
            center:[46.578498,2.457275],
            zoom: 5
        }
    }
});

I loop through my JSON and build the map

// Json Loop
$.each(data, function(key, val) {
    $map.gmap3({
        marker:{
            values:[{
                address:val.address,
                events: {
                    click: function() {

                        gmap_clear_markers();

                        $(this).gmap3({
                            overlay:{
                                address:val.address,
                                options:{
                                    content:  '<div class="infobox">'+val.content+'</div>',
                                    offset:{
                                        y:-32,
                                        x:12
                                    }
                                }
                            }
                        });
                    }
                }
            }]
        }
    });
});

The gmap_clear_markers() function triggers all other infobox(overlays) instances to be removed.

// Function Clear Markers
function gmap_clear_markers() {
    $('.infobox').each(function() {
        $(this).remove();
    });
}

Now I can add as many addresses as I want to my JSON and it will have an infobox with just a plain div wrapper with class infobox which I can style accordingly.

I'm not sure if this is the best way to do this - I'm just saying that this has worked for me.

Here is the JSFIDDLE example