Loop - Map Search

Short Description

Loop - locations search, based on Google Maps service. Allows to use search through marked locations, select them from the map or from locations lists and more. Also you can group locations and select locations by groups. It has a simple locations submission and good commented code, that allows you to easily use or modify functionality and styles.

Installation

Upload script files, via FTP client to any place in your project. To know more about using FTP and uploading files fallow this link use FTP Instructions

To connect script to your project you need to connect styles and scripts before google map script. Example:

<link rel="stylesheet" href="assets/styles/style.css">
<script defer src="assets/scripts/script.js"></script>
<script defer src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script defer src="https://maps.googleapis.com/maps/api/js?key=here_your_key&callback=initMap&language=en"></script>

After you connected files, you need to add your Google API key to 'key' value in google script link. To know more about this key fallow this link use Get API Key

And at the end add div with id 'map' to place where you want map to appear. Example:

<div id="map"></div>

Now you may find you need to change some styles, you can do it in uploaded CSS file. To change settings or add markers follow this instruction.

Map Configuration

You can apply any Google Maps setting to this script. To know more about fallow this link use Google Maps Platform Documentation But most common setting you can configure via data attribute of the map div. This is the example of applying settings:

<div id="map"
	data-zoom="5"
	data-center-lat="-25.363"
	data-center-lng="136.044"
	data-markers="assets/scripts/markers.json"
	data-clustering="false"
	data-cluster="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
	data-control-search="true"
	data-control-list="true"
	data-control-groups="true"
	data-layer-traffic="false"
	data-layer-transit="false"
	data-layer-bicycling="false"
></div>

Center & Zoom

Probably first you would like to setup it`s a map`s first view. To do it you need to choose zoom scale and find GPS coordinates of the center. Read more at Zoom Levels and Find Place for Coordinates. After that add this data to map div. For example:

<div id="map"
	data-zoom="5"
	data-center-lat="-25.363"
	data-center-lng="136.044"
></div>

Locations

Maps download markers data from JSON file with structured data. You can put name, coordinates and HTML template of Info Window. You can edit default .json or create your own with the same structure. JSON example:

json_markers_upload({
	"markers":[
		{
			"title":"Banana",
			"info":"This is InfoWindow content Banana",
			"location":{
				"lat":-25.363,
				"lng":131.044
			}
		}
	]
});

Also, you can setup your own source of data putting link in 'data-markers' attribute, example:

<div id="map"
	data-zoom="5"
	data-center-lat="-25.363"
	data-center-lng="136.044"
	data-markers="assets/scripts/markers.json"
></div>

Icons

You can add custom icon to your marker by signing url to image file in JSON, example:

json_markers_upload({
	"markers":[
		{
			"title":"Banana",
			"icon":"assets/images/koala.svg",
			"info":"This is InfoWindow content Banana",
			"location":{
				"lat":-25.363,
				"lng":131.044
			}
		}
	]
});

Language

You can choose language of your map by changing 'language' variable in GET parameter of the maps.googleapis.com request script, example:

<script defer src="https://maps.googleapis.com/maps/api/js?key=here_your_key&callback=initMap&language=ja"></script>

You also can read more about this here Maps Localization.

Clustering

You can make markers combine to a groups if you enable clustering. To do it you need to setup two attributes - switcher and link to image of the cluster, example:

<div id="map"
	data-zoom="5"
	data-center-lat="-25.363"
	data-center-lng="136.044"
	data-clustering="true"
	data-cluster="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
></div>

Search

You can enable custom search control by switching it`s attribute to true, example:

<div id="map"
	data-zoom="5"
	data-center-lat="-25.363"
	data-center-lng="136.044"
	data-control-search="true"
></div>

List

You can enable custom list control by switching it`s attribute to true, example:

<div id="map"
	data-zoom="5"
	data-center-lat="-25.363"
	data-center-lng="136.044"
	data-control-list="true"
></div>

Groups

You can enable custom list control by switching it`s attribute to true, example:

<div id="map"
	data-zoom="5"
	data-center-lat="-25.363"
	data-center-lng="136.044"
	data-control-groups="true"
></div>

To group markers you need to add additional value to markers JSON, example:

json_markers_upload({
	"markers":[
		{
			"title":"Banana",
			"group":"Fruits",
			"info":"This is InfoWindow content Banana",
			"location":{
				"lat":-25.363,
				"lng":131.044
			}
		}
	]
});

Layers

You can enable traffic, transit and bicycling map layers on your map by adding attributes to map div, example:

<div id="map"
	data-zoom="5"
	data-center-lat="-25.363"
	data-center-lng="136.044"
	data-layer-traffic="true"
	data-layer-transit="true"
	data-layer-bicycling="true"
></div>

File Structure

Get a Free Gift