The No Code Custom Google Maps Marker Icons With Colors ...

Even better, most of these examples require absolutely zero code. Easy Single Color Marker Maps. The most basic map you can have has icons that all are the ... makemaps features propricing mobile support blog makemaps features propricing mobile support blog Thesedaysit’seasierthanevertocreateamapontheweb.Forthousandsofyearsmapsweredifficultandpeoplespenttheirwholelifetimesexploringandstudyingtoimprovetheirmaps.Thankfullyyoudon’tneedtosetsailforanunknowndestination,orevenleaveyourcomputer,tobuildamaptoday.NowthereisGoogleMapstoaddamaptoyoursitewithafewlinesofcode,orevennocodeatall. Oneofthethingsthathasmademapseasieristhatyoucanbuilduponabasemapchosenbyexperts.Backinthedaysofexploration,everymapwasanewmap.Thatmeanseachmapwasdifferentthananother,butitalsomeanteachmapprojectbegananew.ByusingGoogleMaps,wecanletyourmapstandoutbythedatayouputuponitviamapmarkers. Thispostwillshowhowtofurthercustomizeyourmapwithdifferentcolors,labels,andgraphicsinyourmapmarkers.Evenbetter,mostoftheseexamplesrequireabsolutelyzerocode. EasySingleColorMarkerMaps ThemostbasicmapyoucanhavehasiconsthatallarethebasicGoogleMapsmarkeryou’reprobablyfamiliarwith.It’sanreverseteardrop,reddishiconwithablackdotinthecenter.Likethis: We’relookingtocreatecustomizedmarkershere,sowe’lltossthatguyoutthewindow.It’sstillbesttohavethemarkerlookfamiliar,suchasmaintainingthesameshape.Ataminimum,youwanttochooseacolorthatjumpsoutfromthemapbehindit,soyourmarkerwillberecognizable.Themapwe’llcreateinthisexamplewillgiveyoucustomizablechoices,whilealsofulfillingtherequirementsofagoodwebmap. Thefirstthingyou’llneedisalistoflocationsyouwanttomap.We’vefoundjustabouteveryonehasalistoftheirfriends’addresses,perhapsusedtosendholidaycards. Ifit’sinaspreadsheet,you’rereadytosimplycopy-pastethemintothiscustommapmaker Pasteyourdataintothebox,thenclick“Validateandsetoptions” Foroursimplemap,“groupby”shouldbesetto“SingleColor” Click“ShowAdvancedOptions”andyou’llseesomeprettygreatcustomizationalternatives Clickintotheexistingcolortoselectfromthesevencoloroptions(10choicesforBatchGeoPro) ViewHolidayCardList(nogrouping)inafullscreenmap Youcanalsochangethetypeofmarkerweused.Youcanseeinthemapabove,Ichoseorangecirclemarkers.Thismaplooksverydifferentthanmostthatareoutthere,butisstilleasilyreadableandexplorable.Oncesaved(emailrequiredtosendyoualinktomakefutureedits),you’llbeabletolinkthemaptoothers,orevenembedinyourownwebsite. ChangeMarkersBasedonData Thefirstexampleshowedyouhowtocreateasimplecustommap.Theshapeandcolorofthemarkersgoalongway!Wheremapsreallybegintotellastoryiswhenthemarkerschangebasedontheotherdatainthemap.Themostbasicmapdatamayonlybealistofaddresses.Butoften,ourspreadsheetshavemanydifferentcolumns.Youmayhavesalesdata,homeprices,orevenrestauranthealthratings,tonamethreeexamples. Theholidaycardlistincludeda“type”column,whichweusedtodescriberich,famous,andfictionalfriends(wekeepstrangecompany).Afuncustomizedmapwouldincludeadifferentcolortorepresenteachofthethreefriendtypes.Let’sdoit! Followthestepsfromabovetocreateyourmap,clicking“Validateandsetoptions” Herewewantthe“groupby”tobesetto“Type” Click“ShowAdvancedOptions”andthistimewe’llbeabletoselectacolorforeachtypeoffriend Nowwe’recreatingamapthatisverydifferentthanmanythatwouldhaverequiredyoutowriteabunchofcode. ViewHolidayCardListinafullscreenmap Peopleusingthemapcanevenchoosetoshowonlycertaintypes.Clickthenameinthebottomandthemapautomaticallyfilterstoonlythecolors/typesselected.Usingthesesimpletools,youcancreatecustomized,interactivemapsthatwillhelpothersunderstandthedatabeneaththemap. FullyCustomizableMapMarkers(RequiresCode) Changingcolorsandshapesisgreat,butsometimesyouwantsomethingevenmorecustom.Ifyou’dliketochangetheiconitself,youlikelyneedtowritesomecode.Googlehassomegreatexamplesonitssitetogetyoustarted.Here’sthebasicgistofacustommarkerforaGoogleMap: varmarker=newgoogle.maps.Marker({ position:newgoogle.maps.LatLng(37.8077333,-122.4750286), icon:"http://maps.google.com/mapfiles/ms/micons/truck.png", map:map }); ThesefewlinesofcodeusesJavaScriptandtheGoogleMapsAPItocreateamarkerobjectwiththreeattributes: Thepositionofthemarkeronthemap,declaredbylatitudeandlongitudecoordinates AURLtoanimageyouwanttouseastheicon(findmorehere) Thepre-existingmapobject(declaredelsewhereincode)whereyouwanttoputtheicon Youwouldneedtorepeatthiscodeforeveryplaceyouwanttoaddtoyourmap.Todothis,you’llneedtohavethecoordinatesforeachlocation.Ifyoudon’thavethem,you’dneedtoperformyourowngeocoding.Finally,you’dneedtohaveyourownwebsitetoloadupthiscode. Ifitsoundsadvanced,itis.Inordertohavefullcustomizationofamap,thisistheonlyrealoptionformapmakers.Unlessyou’recomfortableincode,orhavethetimetolearn,we’drecommendusingoneofthenon-codeoptionswe’vedescribed. OtherWaystoCustomizewithBatchGeo Thecustommapmakingtoolweshowedearlierhassomeotherprettygreatfeaturesinadditiontochangingmarkershapesandcolors.Youcanalsolabelmarkerswithlettersornumbers,whichcanbeusedintandemwiththemapdata,optionallydisplayedbelowthemap. https://batchgeo.com/ ViewScaryPlaceNamesforHalloweeninafullscreenmap Orsimplychangethebasemapitself.TherearesixmapstylestocompletelychangethecolorsfromthetypicalGoogleMap.YoucanseeadarkexampleweusedabovefortheHalloween-themedFrighteningPlacesintheUS. ExploremoreBatchGeofeaturesormakeyourfirstmapnow. Postnavigation PreviousPreviouspost:GoingNuclear:LocationsofNuclearWeaponsintheUnitedStatesandWorldwideNextNextpost:EnergyProductionWorldwide:WhoLeadsinOil,Coal,andNaturalGas? Main MakeMaps Features Pricing Enterprise Mobile Support Blog LearnMore AboutBatchGeo ExampleMaps MapExcelData Privacy Terms Developers EmbeddingMaps StoreLocators Languages Chinese English French Dutch German Italian Japanese Korean Portuguese Russian Spanish ©2022BatchGeoLLCAllRightsReserved PrivacyPolicy Terms&Conditions