How to Overlay Polygon Shapes Onto Google Maps - Resources

1. Create Google Cloud Platform Project · 2. Add Google Maps to your webpage · 2. Download shape/polygon data · 3. Convert Shapefile to GEOJSON. image/svg+xml Mapsfdfd Togglenavigation USMap WorldMap Features Docs Pricing Contact Products Maps WorldMap USAStateMap USACountyMap USACongress NorthAmerica Europe Canada UnitedKingdom Australia CustomMap City/Neighborhood City/Zip Moremaps... Data USZips USCities CanadaCities USCounties USNeighborhoods WorldCities AllMapProducts AllDataProducts OverlayPolygonShapesOntoGoogleMaps|Resources By:BenElfner Inthistutorial,you'lllearnhowtooverlaypolygonshapesontoGoogleMapsandembeditintoawebsite.Asanexample,we'lloverlayU.S.stateshapesontoamap.Dataprocessingwillbedonewithmapshaper.orgwhichyoucanlearnmoreaboutinourGuidetoMapShaper.Whenyouaredone,you'llhaveamapthatlookslikethis: DownloadDemo(.zip)ViewDemoOnline 1.CreateGoogleCloudPlatformProject BeforewebeginyoumustgetanAPIkeyfromGoogle.TodothisyoumustfirstcreateaGoogleCloudPlatformProject,ActivatetheMapsJavaScriptAPI,andthengenerateanAPIkey. ImportantNote:Tofollowthistutorial,youmustusetheMapsJavaScriptAPInottheMapsEmbedAPI. 2.AddGoogleMapstoyourwebpage AddthefollowingCSStoyourwebpageviaastyletag: Theninsertthissnippetwhereveryouwantyourmaptobelocated: Finally,we'lladdtheJavaScripttoinitializethemap.Addthefollowingtoyourwebpage.ReplaceYOUR_KEY_HEREwiththekeyfromyourprojectinStep1. 2.Downloadshape/polygondata OnceyouhaveGoogleMapsembeddedintoyourwebsite,youcanaddgeographicdatatoit. Forthistutorialwe'llbegettingourU.S.statedatafromtheUSCensusBureau.Acleanedversionthatyoucanusewiththistutorialcanbedownloadedhere.ThedataisinShapefileformat.AShapefileisactuallycomprisedof4differentfileswiththeextensions(.shp,.shx,.dbf,.sbn). You'llneedtounzipthisfolderbeforemovingforward. 3.ConvertShapefiletoGEOJSON TousethisdatawithGoogleMapsitwillneedtobeconvertedfromtheShapefileformattotheGeoJSONformat.Todothisyouwillfirstneedtouploadittomapshaper.org.Thistoolgivesusaneasymethodtoconvertbetweendifferentgeographicdatafileformats. Gotomapshaper.org Opentheunzippedfolderthatcontainsthestatesdata Selectanddragallofthefilesfromyourcomputeranddropthemwithinthemapshaper.orgbrowserwindow ClickImport Ifyoudidthingsproperly,youshouldseethemapappear.ClickontheinformationiconandhoveroverastatetomakesurethatMapShaperhasimportedtheassociateddataforeachstate: Optional Ifyouwanttomanipulatethedataofthepolygons,youcanviewthe"EditingShapefileswithMapShaper"sectiononourguidetoMapShaper. Finally,toexportthedata: ClickontheExportbuttoninthetoprightcornerofthewebsite SelectGeoJSONastheFileformatonthewindowthatpoppedup ClickExport ThiswilldownloadthedataintheGeoJSONformat. 4.AddGEOJSONGoogleMaps Toaddthedatatotheembeddedmap: Uploadthedownloadedfiletoyourwebsite AddthislineofcodetoinitMap()andreplacePATHwiththepathtotheGeoJSONfileonyourwebsite: map.data.loadGeoJson('PATH'); aexampleofthiscouldbe: map.data.loadGeoJson('http://example.com/states.json'); yourcodeshouldenduplikethis Testyourwebsiteandyoushouldseetheshapesonthemap: 5.Adjustthecoloroftheshapes Youcancustomizethestylingoftheshapeslikethis: map.data.setStyle({ fillColor:'green', strokeWeight:1 }); whichyouwouldinsertintotheinitMap()function: tomakethemaplooklikethis: 6.Makeshapesclickable Finally,todisplayinformationwhenclickingonashapeaddthislinetotheinitMap()function: varinfowindow=newgoogle.maps.InfoWindow(); Nowyouneedtocreateacustomfeaturewhereyoucanchoosewhatwillbedisplayedonaclick.Thebasicoutlinewilllooklikethis. map.data.addListener('click',function(event){ ... infowindow.setContent(html);//showthehtmlvariableintheinfowindow infowindow.setPosition(event.latLng);//anchortheinfowindowatthemarker infowindow.setOptions({pixelOffset:newgoogle.maps.Size(0,-30)});//movestheinfowindowupslightlytothetopofthemarkericon infowindow.open(map); }); Thetextyouwanttodisplayneedstobeputinthehtmlvariable.Togetinformationfromtheshapethatwasclickedonyouneedtospecifythenameoftheattributeyouwantinthislineofcode event.feature.getProperty("..."); Anexample: letstate=event.feature.getProperty("NAME"); lethtml='State:'+state;//combinestatenamewithalabel ThiscodegetstheNAMEattributefromtheshapethatisclickedonandthensetsthestatevariabletothatname.Thenthenameiscombinedwiththestring'State:'andthenitissavedintothehtmlvariable.Anexampleofthetextthatcouldbestoredis'State:Montana'.Whenthiscodeiscombinedwiththecodeaboveitthescriptsectionshouldlooklikethis. That'sit.You'veaddedstateshapestoyourGoogleMapandmadethestatesclickable! Resources Tools,freebies,andarticlesaboutmappingandwebdevelopment.Thingswe'velearnedandwanttoshare! Introduction FreeSVGMaps AllFreeSVGMaps WorldSVGMap USASVGMap FreeInteractiveMaps FreeWorldMap FreeUSMap FreeContinent TutorialsandArticles GuidetoMapShaper OverlaypolygonsonGoogleMaps UsingGoogleCloud Locationdistancecode(.jsand.py) ImportCSVintoMySQL IntroductiontocustomizingSVG SoftwareweuseatSimpleMaps AlternativetoGoogleMaps Flashvs.HTML5maps DataandTools USAddress/CitiesGeocoder Worldcitiesdata(bycountry) Vizualizations USGoldMedalistsRio2016 USUnemployment(auto-updated) SnakesandBears ZipCodeVisualizations Links Raphael.js MapShaper OldarticlesaboutFlashmaps Home|License|Privacy|Releases|Testimonials|Resources|Documentation|OrderLookup|AllMaps FormerlyFlashUSAmap.comandFlashWorldMap.com SimpleMaps.comisaproductofParetoSoftware,LLC.©2010-2022.