I have a Google map whose previous developer created it on WordPress with Advanced Gmaps. The site is no longer on WP, so I have to work with a json string in the div tag.

I need to add a URL to the marker, so when it's clicked it opens a new page. Or at the very least, I need to customize the title box that appears when a marker is clicked. The element and json look like this:

<div class="mk-advanced-gmaps js-el" data-advancedgmaps-config='  
     { "places": [{
          "address": "23 Some Street, 867-5309",
          "latitude": "42",
          "longitude": "-70",
          "marker": "../logo.png"
      "options": {
        "zoom": 10,
        "draggable": true,
        "panControl": true,
        "zoomControl": true,
        "scaleControl": false,
        "mapTypeControl": false,
        "mapTypeId": "ROADMAP",
        "apikey": "Aiza****"
      "style": [
          "stylers": [
            {"hue": "#709ec8"},
            {"saturation": "-35"},
            {"lightness": "35"},
            {"featureType": "landscape.man_made",
             "stylers": [
                {"visibility": "on"}
      "icon": ""
    }'data-mk-component='[ "AdvancedGMaps" ]' 
      id="mk-advanced-gmaps-5badb2015caa2" style="height: 600px;"></div>

I'm wondering at this point if I should just create a new Google map with javascript in order to be able to customize it the way I need to, or is there a way to add more functionality to this Advanced Gmaps shortcode?

  • 1
    You could try to add some config options in the data-advancedgmaps-config, see here for infobox options: developers.google.com/maps/documentation/javascript/examples/… , but I'm really not sure it would work. If not, you're better off creating your own map. Snazzymaps is also pretty good for easily embedding maps. – Pim Oct 17 '18 at 10:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.