40+ jQuery Custom Google Map Plugins

jQuery Custom Google Map Plugins – Are you looking for jQuery Custom Google Map Plugins, If yes then in this post I am going to share hand-picked jQuery Custom Google Map Plugins for you. There are many business websites which integrate Google Maps so that people can easily locate them. It is all done with the help of jQuery Google Map plugins. jQuery Google Map plugins allow you to easily integrate Google Maps in your webpage. These plugins are quite useful and extensively used over the globe. You can use these jQuery Custom Google Map Plugins in your next web based projects.

jQuery Custom Google Map Plugins

Following are the list of jQuery Custom Google Map Plugins.

Custom Google Map DEMO

 Custom Google Map

A custom google map to show company location on your website. It can be easily customised to perfectly fit your website style! – By codyhouse


Angular.js – Google Map DEMO

 Angular.js - Google Map

Angular UI Google maps – https://angular-ui.github.io/angular-google-maps – By joe-watkins


Google Maps Polygon Coordinates Tool DEMO

 Google Maps Polygon Coordinates Tool

Outputs the coordinates (longitude, latitude) for Google Maps whenever the Polygon is moved or re-shaped. Recently added a ‘Copy to Clipboard’ button and had data output into a textarea for easier copying & pasting – By jhawes



Responsive Google Map DEMO

 Responsive Google Map

Responsive google map that re-centers the pin on resize and load… Every other version I have seen does not recenter! – By hubpork


AngularJS + Google Maps API DEMO

 AngularJS + Google Maps API

Using Google Maps API as a service in an Angular app. – By MarcMalignan


Responsive/customisable Google Maps DEMO

 Responsive/customisable Google Maps

Loads static or dynamic Google Map based on configurable breakpoint (resize window to preview). Support for custom map styles, markers, info window, legend. – By clintabrown


Responsive contact form using Bootstrap 3 and Google Maps API DEMO

 Responsive contact form using Bootstrap 3 and Google Maps API

Responsive contact form using Bootstrap 3 and Google Maps API – By craigwheeler


Google Maps API v3 – Basic Map DEMO

 Google Maps API v3 - Basic Map

Simple explanation of how to add a map to a website using Google Maps API v3 – By dbugger



Custom Animated Google Maps Markers DEMO

 Custom Animated Google Maps Markers

A css map marker with animations on a google map. Dependencies / Credits jQuery Google Maps dynamics.js | Michaël Villar – By dylanvann


Google map: marker cluster by country DEMO

 Google map: marker cluster by country

A way to group marker by countries or whatever you want – By jvallet


Custom Google Map DEMO

 Custom Google Map

Custom Google Map using javascript – By samuelkavin


Google Maps Example: Nightly DEMO

 Google Maps Example: Nightly

– By ionic


Gradient over Google Maps DEMO

 Gradient over Google Maps

Just a little demo to show you how to put a gradient using CSS over a Google Map. I’ve used HAML & SCSS to keep the code nice and clean! If you have any questions or problems, just ask in the comments below or follow me on Twitter. – By mattsince87


Toggling Google Map DEMO

 Toggling Google Map

Toggles a Google map. – By twelve31


Custom Google Maps DEMO

 Custom Google Maps

Dribble Inspiration: https://dribbble.com/shots/1603413-Cody-Custom-Pages Map Source: http://codyhouse.co/gem/custom-google-map/ – By tobydennison



Two Google Maps on the same page DEMO

 Two Google Maps on the same page

How to display two maps on the same page with Google Maps JavaScript API v3. http://en.marnoto.com – By Marnoto


Google Map Directive AngularJS DEMO

 Google Map Directive AngularJS

Google Map Directive AngularJS, Available on Github – By elmahdim


Nearby Hospital using Google Map and Geolocation API DEMO

 Nearby Hospital using Google Map and Geolocation API

Author: arsho Facebook: https://www.facebook.com/ars.shovon Customized Google map to display nearby hospitals in current location. – By arsho


Generate A Google Map Image DEMO

 Generate A Google Map Image

Generate a Google map image via jQuery. – By CSWApps


Simple Google Maps API shortest route calculator DEMO

 Simple Google Maps API shortest route calculator

Given a number of interesting places, which is the shortest distance away from a “current position”. This code demonstrates how easy it is to find out this information using the Google Maps routing API. The distances we use here are the route distances, not straight line ones, so is more realistic estimate as it takes in to account road directions etc. – By jasonmayes



Angular google maps + firebase DEMO

 Angular google maps + firebase

Angular google maps + firebase v2.2.4 with custom map skin(https://snazzymaps.com). view, create and delete polygons in realtime. – By jealeat96


Custom google map DEMO

 Custom google map

Pen show how easy you can customize google map. – By jakubtursky


Custom Google Map with animated markers DEMO

 Custom Google Map with animated markers

Custom Google Map with a custom style, custom Infobox, custom Zoom Control, custom Markers and custom Marker animations. – By zzavrski


Custom Google Map in Black Fullscreen with Custom Icon and Drop Animation DEMO

 Custom Google Map in Black Fullscreen with Custom Icon and Drop Animation

Using the google map embed API with custom styling and arrow marker. – By simsketch


Google Map Hover Effect DEMO

 Google Map Hover Effect

A cool hover effect for a Google map. Uses Google’s static map generator. You can change the lat/long values in the DOM and it will update everything for you. Sizes in the DOM and CSS should be equal. – By redouglas


SVG Marker for Google Maps API Example DEMO

 SVG Marker for Google Maps API Example

Google Maps JavaScript API overlay class to easily add markers with an SVG image as the icon. – By defvayne23


Google Map Menu DEMO

 Google Map Menu

Just a tabbed menu of google maps. – By SMLMRKHLMS



Proof of concept: Google Maps Autocomplete DEMO

 Proof of concept: Google Maps Autocomplete

A simple prototype of a Google Maps autocompletion input field with a preview of the location and the JSON response. – By hofmannsven


Google Maps SVG Marker DEMO

 Google Maps SVG Marker

Use a SVG as an Google Maps Marker. Including gradients and shadows. – By ro-ka


Angular Google Maps DEMO

 Angular Google Maps

Angular Google Maps experiment. – By EvanWieland


Responsive Auto-Centered Google Map DEMO

 Responsive Auto-Centered Google Map

A Google map that auto-centers on resize, powered by the Google Maps API. Complete explaination in a post my my blog. Derived from work by James New – By dudleystorey


Custom SVG Pin with Label in Google Maps DEMO

 Custom SVG Pin with Label in Google Maps

Notice how I can pass a SVG data-uri as the icon image for a google maps marker & change its content via js. This way we retain all the behaviour for default maker but with our custom pin! Only real caveat to this technique is you have to style and position your label in the svg – By TheMarufm



Waypoints in directions – Google maps API DEMO

 Waypoints in directions - Google maps API

Trying out the google maps api – By josephrexme


Input Form on Google map background DEMO

 Input Form on Google map background

Based on http://www.labnol.org/internet/embed-google-maps-background/28457/ – By adamrifai


Google Maps and Leaflet.js DEMO

 Google Maps and Leaflet.js

A quick pen to show integration with Google Maps and Leaflet.js into a web page. For leaflet to work you need to make sure you include their JS file and CSS file as you can see here if you look at the details for those areas. See comments in HTML for how to change default Google Maps zoom level and comments in JS for how to change the default zoom and location for leaflet. – By chris0stein


Google Map using Maplace.js DEMO

 Google Map using Maplace.js

implementation of Google Map using Maplace.js http://maplacejs.com/ – By invincibleking77


5 ways to customize the Google Maps infowindow DEMO

 5 ways to customize the Google Maps infowindow

How you can create an infowindow header, repositioning of its tail, change the infowindow size and background color, give a new look to the infowindow close button, rounded corners and a fade effect. – By Marnoto


Syncing chart with Google Maps DEMO

 Syncing chart with Google Maps

This demo shows how to use events to two-way sync a JavaScript Chart and Google Map. – By team


Google Maps Custom Colors DEMO

 Google Maps Custom Colors

Example of styling Google maps with custom colours. Production version also uses custom infobox styling. – By DarrellWilson



Google Map with Multiple Markers (Simple) DEMO

 Google Map with Multiple Markers (Simple)

This is a simple way of embedding a Google Map with multiple markers. You can add more markers, change the map size, zoom level, center of the map, etc. If you have any questions, feel free to contact me. – By engza


Google Map itinéraire style dark DEMO

 Google Map itinéraire style dark

Google Map itin̩raire style dark РBy MAX-P


vue2-google-maps DEMO

 vue2-google-maps

– By leonardo-dev


Custom Google Maps Info Window DEMO

 Custom Google Maps Info Window

Source: http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html I’ve changed the code, so that multiple markers are possible and infobox styling is now done with css. – By emgerold


Lazy Load Google Maps API (jQuery) DEMO

 Lazy Load Google Maps API (jQuery)

Lazyload the Google Maps API, using data attributes for lat/long, responsive map canvas. – By svinkle



Google Map Click on link/tab to change marker location map DEMO

 Google Map Click on link/tab to change marker location map

This Pen is for Google Map change marker location on click tab. Feel free to let me know if this project can be improve. – By honminyue


Responsive Google Map DEMO

 Responsive Google Map

Responsive google map that re-centers the pin on resize and load… Every other version I have seen does not recenter! – By jamesnew


Google Maps Static Map Generator DEMO

 Google Maps Static Map Generator

Input your parameters and I’ll create you a Static Map URL! Pretty simple, but it should provide nice easy ways to create maps without CTRL+C the Google Maps Documentation every time! 🙂 – By simeydotme


Custom markers – Google Maps DEMO

 Custom markers - Google Maps

Custom Google Maps markers with text labels – ex. room prices for hotels. – By thomasclausen


I Hope you liked Hand-picked list of jQuery Custom Google Map Plugins, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.