简体   繁体   中英

google maps custom markers setting default icon

I have a google maps app that pulls the marker info from a database and writes it to a json file. The googlemaps loads the json and creates the points etc. I have an option for custom icons depending on the json type field. If a user enters a different type or puts a space in the field it breaks the map.

I would like to set a default marker icon to deal spaces and new types in the database that are not in the javascript selector. Ideally a wildcard or default icon. I can trim spaces with mysql and limit the input type in the submission form. It seems more flexible to apply it in the googlemap js. It would allow new types without coding the custom icons.

My javascript code from the google maps api:

// set the base url for icons
var iconBase = '/kml/icons/';
    var icons = {
      Camping: {
        icon: iconBase + 'camping.png'
      },
      Access: {
        icon: iconBase + 'boat-ramp.png'
      },
      Showers: {
        icon: iconBase + 'shower.png'
      }
      /* to deal with spaces and types not included above *
        %wildcard%: {
        icon: iconBase + 'red.png'
       }
      */
    };

And the json looks like this:

    var siteData =[  
   {  
      "id":"13",
      "name":"Banks",
      "river":"Payette",
      "type":"Access",
      "lat":"44.085070",
      "lng":"-116.115750"
   },
   {  
      "id":"57",
      "name":"Slides",
      "river":"Pack River",
      "type":"Camping ",
      "lat":"48.127099",
      "lng":"-116.604248"
   }, 
    {  
      "id":"58",
      "name":"Cold Springs",
      "river":"Payette",
      "type":"",
      "lat":"48.127099",
      "lng":"-116.604248"
   }, 

The second and third instances, second has a space, third is blank in the type field. Those will break the map.

There is no method to define a default value while object["somePropertyName"] is undefined by naive javascript.
And so far, javascript have not supported for using regular expression as property name either.
(Or maybe there Is but I don't know.)

I guess property:icon of google.maps.Marker is the cause breaking the map when data type is not matching icons.

The sample code of google map api document :

var marker = new google.maps.Marker({
  position: feature.position,
  icon: icons[feature.type].icon,
  map: map
});

In your case, when the data type is "Camping " or "", icons[feature.type] is undefined. And icons[feature.type].icon (= undefined.icon) is going to break the map.

If as I guessed, you can change your google.maps.Marker as follows :

var marker = new google.maps.Marker({
  position: feature.position,
  icon:icons[feature.type] ? icons[feature.type].icon : '',
  map: map
});

or

var marker = new google.maps.Marker({
  position: feature.position,
  icon:function(){
     /* some conditions*/
  }(),
  map: map
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM