![]() Note: we set the scrollwheel option to false to disable scrollwheel zooming on the map.Īs final touch, we appended to the map our custom #cd-zoom-in/#cd-zoom-out buttons (we defined the CustomZoomControl function to do that) and placed them on the top-left of the map: map.controls. With this easy online ZIP Code mapping tool, you can quickly create free interactive custom area maps on Google Maps based on any combination of 5-digit and 3-digit ZIP Codes. No need to download complicated software. You can have a look at the complete list of the featureTypes on the Google developer's guide. This service area map generator helps you create a territory map with ZIP Codes free of charge. set highway colors/brightness/saturation I.e., to style the highways we set: var style= [ These 3 values determine the style of our custom map. To style our map, we defined a main color, a value of saturation and a value of brightness: var main_color = '#2d313f', We used a svg image as custom marker, but added a png fallback for IE11. ![]() Var marker_url = ( is_internetExplorer11 ) ? 'img/cd-icon-location.png' : 'img/cd-icon-location.svg' Var is_internetExplorer11= ().indexOf('trident') > -1 Events handlingįirst of all, we defined our google map parameters: var latitude = 51.5255069, One thing to note: on mobile, we reduced the high of the map to facilitate scrolling through the page (scrolling on the map just drags the map but doesn't scroll the page). The style of the map has been set into the jQuery file. We also added some basic style to the #cd-zoom-in/#cd-zoom-out buttons. ![]() We set width: 100% to the section#cd-google-map (and to the div#google-container) so that the map covers the entire width of the viewport. You have to replace with a real key number ( here you can find out how to create an API key). We inserted the link to the Google Map API before the body closing tag: ![]() The #cd-zoom-in and #cd-zoom-out buttons will be appended to the map using jQuery (more in the Events handling section). We created a section#cd-google-map to contain our google map, the custom #cd-zoom-in and #cd-zoom-out buttons and the address bar. The default map controls have been replaced with custom zoom-in/zoom-out buttons. This resource allows you to set a main colour for your map (plus a saturation and brightness level) an to add a custom map marker. Unfortunately the style of the map doesn't always fit properly the website style. It requires just a couple of minutes to create a new map! When it comes to location, Google map is a really powerful tool.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |