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.