Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

🌏 FreeDraw allows the free-hand drawing of shapes on your Leaflet.js map layer – providing an intuitive and familiar UX for creating geospatial boundaries similar to Zoopla and others. Included out-of-the-box is the concaving of polygons, polygon merging and simplifying, as well as the ability to add edges and modify existing shapes.

Stars: ✭ 446 (-56.32%)

Mutual labels: maps, markers

React Native Map Clustering

React Native map clustering both for Android and iOS.

Stars: ✭ 450 (-55.93%)

Mutual labels: maps, markers

Snazzy Info Window

Customizable info windows using the Google Maps JavaScript API.

Stars: ✭ 560 (-45.15%)

Mutual labels: google-maps, google-maps-api

react-google-static

🌍 A React wrapper for Google Static Maps API.

Stars: ✭ 37 (-96.38%)

Mutual labels: google-maps, google-maps-api

polylineencoder

A C++ implementation of Google Encoded Polyline Algorithm Format (encoder/decoder)

Stars: ✭ 15 (-98.53%)

Mutual labels: maps, google-maps

Firebase-Realtime-Car-Moving-On-JavaScript-Google-Maps

This is the solution for moving realtime cars on Google Maps JavaScript using Google Firebase Realtime Database.

Stars: ✭ 26 (-97.45%)

Mutual labels: google-maps, google-maps-api

hopOn

A car rental flutter application using firebase and google maps API

Stars: ✭ 68 (-93.34%)

Mutual labels: google-maps, google-maps-api

Prunecluster

Fast and realtime marker clustering for Leaflet

Stars: ✭ 473 (-53.67%)

Mutual labels: maps, markers

Leku

🌍 Map location picker component for Android. Based on Google Maps. An alternative to Google Place Picker.

Stars: ✭ 612 (-40.06%)

Mutual labels: google-maps, maps

React Google Maps Api

React Google Maps API

Stars: ✭ 791 (-22.53%)

Mutual labels: google-maps, google-maps-api

Use Places Autocomplete

😎 📍 React hook for Google Maps Places Autocomplete.

Stars: ✭ 739 (-27.62%)

Mutual labels: google-maps, google-maps-api

Sketch Map Generator

Sketch plugin to fill a shape with a map generated from a given location using Google Maps and Mapbox

Stars: ✭ 824 (-19.29%)

Mutual labels: google-maps, maps

View All Similar Projects ➔

Maplace.js - currently unmaintained

Helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map.

Demo

See demo website

Setup

Download the latest version of Maplace.js and include the Google Maps API v3 along with jQuery.

JS

new Maplace({
	locations: data,
	controls_type: 'list',
	controls_on_map: false
}).Load();

HTML

<div id="controls"></div>
<div id="gmap" style="with:300px;height:250px;"></div>

Locations Array

var data = [{
	    lat: 45.9,
	    lon: 10.9,
	    title: 'Title A1',
	    html: '<h3>Content A1</h3>',
	    zoom: 8,
	    icon: 'http://www.google.com/mapfiles/markerA.png'
	},{
	    lat: 44.8,
	    lon: 1.7,
	    title: 'Title B1',
	    html: '<h3>Content B1</h3>',
	    show_infowindow: false
	}
];

Options

Option	Type	Default	Description
map_div	string	#gmap	Where you want to show the Map
controls_div	string	#controls	Where you want to show the menu. generate_controls must be true controls_on_map must be false At least more than one location on map
generate_controls	boolean	true	If false, the menu will not generated
controls_type	string	dropdown	To set the menu type choose between: dropdown \| list
controls_on_map	boolean	true	If *false, the menu will be generated into the element defined by the property controls_div*
controls_title	string		Add a title/header text to the menu
controls_cssclass	string		Add a custom class to the menu element
controls_applycss	boolean	true	If *false*, default styles to the menu will not be applied
controls_position	string	'RIGHT_TOP'	Controls position on the right, below top-right elements of the map.
type	string	marker	To set the Map type choose between: marker \| polyline \| polygon \| directions \| fusion
view_all	boolean	true	If *false* the link "view all" will not be created
view_all_text	string	View All	Set a custom text for the link "view all"
start	integer	0	Set the first location to show, 0 stands for "view all"
locations	Array [locations]	[]	List of locations being marked on the map
commons	object	{}	Overwrite every location with a set of common properties
show_markers	boolean	true	If *false*, markers will not be visible on the map
show_infowindows	boolean	true	If *false*, infowindows will not be created
infowindow_type	string	bubble	Only bubble is supported
map_options	Object	`{ mapTypeId: google.maps.MapTypeId.ROADMAP, //or roadmap zoom: 1 }`	Map options object, as defined by Google. The property center will be ignored. Check at the Install page to see how to center the map with only one location
styles	Object	{}	Style options as defined by Google
stroke_options	Object	`{ strokeColor: '#0000FF', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#0000FF', fillOpacity: 0.4 }`	Stroke options object, as defined by Google. Used in Polyline/Polygon/Directions/Fusion Map type.
directions_options	Object	`{ travelMode: 'DRIVING', unitSystem: 'METRIC', optimizeWaypoints: false, provideRouteAlternatives: false, avoidHighways: false, avoidTolls: false }`	Direction options object, as defined by Google
directions_panel	string	null	ID or class of the div in which to display the directions steps.
fusion_options	Object	{}	Fusion tables options as defined by Google
draggable	boolean	false	If true, allows the user to drag and modify the route, the polyline or the polygon
listeners	Object	{}	Example: `listeners: { click: function(map, event) { map.setOptions({scrollwheel: true}); } }` Docs: Google maps Events

Methods

Function	Params	Return	Description
AddControl	string [name], function		Add you own menu type to the map
CloseInfoWindow			Close the current infowindow
ShowOnMenu	integer [index]	boolean	Checks if a location has to be shown on menu
ViewOnMap	integer [index]		Triggers to show a location on map
SetLocations	array [locations], boolean [reload]		Replace the current locations
AddLocations	array [locations] \| object [location], boolean [reload]		Adds one or many locations
AddLocation	object [location], integer [index], boolean [reload]		Adds one location at the specific index
RemoveLocations	array [indexes] \| integer [index], boolean [reload]		Delete one or many locations
Load	null \| boolean \| object [options]		Loads, updates the current options or force to reload the current options and construct the map
Loaded			Checks if a Load() was already been called

Events

</tbody>

Option	Type	Default	Description
beforeViewAll	function		Fires before showing all the locations
afterViewAll	function		Fires after showing all the locations
beforeShow	function	(index, location, marker){}	Fires before showing the current triggered location
afterShow	function	(index, location, marker){}	Fires after showing the current triggered location
afterCreateMarker	function	(index, location, marker){}	Fires after a marker creation
beforeCloseInfowindow	function	(index, location){}	Fires before closing the infowindow
afterCloseInfowindow	function	(index, location){}	Function called after closing the infowindow
beforeOpenInfowindow	function	(index, location, marker){}	Fires before opening the infowindow
afterOpenInfowindow	function	(index, location, marker){}	Fires after opening the infowindow
afterRoute	function	(distance, status, result){}	Fires after the route calcoule
onPolylineClick	function	(obj) {}	Fires when click on polylines
circleRadiusChanged	function	(index, location, marker){}	This event is fired when the circle's radius is changed.
circleCenterChanged	function	(index, location, marker){}	This event is fired when the circle's center is changed.
drag	function	(index, location, marker){}	This event is fired while a marker is dragged.
dragEnd	function	(index, location, marker){}	This event is fired when the drag event ends.
dragStart	function	(index, location, marker){}	This event is fired when the drag event starts.

Requirements

Maplace.js requires jQuery and Google Maps Library v3.

Source code

All efforts have been made to keep the source as clean and readable as possible.
Maplace.js is released under an MIT License.

Changelog

v0.2.10

Fixed afterRoute not passing status or location with draggable #147 and #139
Added listener for 'insert_at' polygon events #164

v0.2.9

Fixed #137
All event functions are now scoped to the current Maplace instance object

v0.2.8

Fixed #161
Fixed #160

v0.2.7

Fixed #132
Fixed #127

v0.2.0

Updated to jQuery ~2.1
Source directory for the build moved from "src" to "dist"
Use Grunt tasks to generate distribution artifacts
Changed default border color for in-map menu panel to match with Google Maps new UI
Updated package.json and bower.js

v0.1.3

Added circles support allowing mixed markers/circles
Removed 'hide_marker' option for consistency with "visible"
Added support to set the initial center position and zoom of the Map
Improved editable polyline and polygon when visible markers
Added drag events between markers, circles, polyline and polygon
Return "this" for public functions to allow method chaining
Renamed property 'commons' to 'shared' now overridden by location specific options
Added external reference to Snazzy Maps website for Google Map styling
Changed debug strategy
General fixes and enhancements

v0.1.2

General fixes and enhancements

v0.1.0

Initial release

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 1,021

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (40) 🔗