June 16, 2020

jQuery Store Locator Google Map With Country, State, City Dropdown

In Google Map, they are various options to show and get the locations based on that we going to list store locator google map with country, state, city options using jQuery. Well known KFC (Fast food restaurant company) have many branches, so what we going to do is list some of the branches with country, state, & city selection.

Based on jQuery Store Locator Plugin here, I customized with Country, State, & City dropdown options. Here we going to work with the primary two files #index.php & #locations.json to execute the store locations.

Now let us see how it works with country based dropdown, use the below instructions to execute code in your projects as well you can use in your WordPress projects also else you need as a plugin here you have a paid one.

Note: If you like to keep the Google auto Geolocation option, your website required to run with https

Store Location With Country, State, & City Dropdown

Starting with creating custom JavaScript country, state, & city cascading dropdown we going to filter the store locations with the help of taxonomyFilters. See the below file you get an idea.

index.php

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Store Locator Google Map With Country, State, City Dropdown</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="map-assets/css/storelocator.css" />
  </head>

  <body>

 <div class="bh-sl-container">

	<div class="bh-sl-form-container">
	<!-- Forms  -->
		<form id="bh-sl-user-location" method="post" action="#">
			<div class="form-input">
				<label for="bh-sl-address">Enter Area or Zip Code:</label>
				<input type="text" id="bh-sl-address" name="bh-sl-address" />
				<select id="bh-sl-maxdistance" name="bh-sl-maxdistance">
					<option value="5">5 Miles</option>
					<option value="10">10 Miles</option>
					<option value="25">25 Miles</option>
					<option value="50">50 Miles</option>
				</select>
			</div>

			<button id="bh-sl-submit" type="submit">Submit</button>
        </form>
	<!-- Forms  -->
	<!-- Custom Country Filter Dropdown -->
		<div class="bh-sl-filters-container">

			<ul id="country-filter" class="bh-sl-filters">
				<li><h3>Country</h3></li>
				<li>
					<select name="country" id="countyList" size="1">
						<option value="">Please select Country</option>
					</select>
				</li>
			</ul>
			
			<ul id="state-filter" class="bh-sl-filters">
				<li><h3>State</h3></li>
				<li>
					<select name="state" id="stateList" size="1">
						<option value="">Please select State</option>
					</select>
				</li>
			</ul>


			<ul id="city-filter" class="bh-sl-filters">
				<li><h3>City</h3></li>
				<li>
					<select name="city" id="cityList" size="1">
						<option value="">Please select State first</option>
					</select>
				</li>
			</ul>
			
		</div>
	<!-- Custom Country Filter Dropdown -->
		
	</div>

	<!-- List Map Location & Details  -->
	<div id="bh-sl-map-container" class="bh-sl-map-container">
		<div id="bh-sl-map" class="bh-sl-map"></div>
		<div class="bh-sl-loc-list">
			<ul class="list"></ul>
		</div>
	</div>
	<!-- List Map Location & Details  -->
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="map-assets/js/libs/handlebars.min.js"></script>
<script src="https://maps.google.com/maps/api/js?key=APIKEY"></script>
<script src="map-assets/js/plugins/storeLocator/storelocator.js"></script>

<script>
	// Auto Geolocation and other Customization.
	 jQuery(function($) {
		$('#bh-sl-map-container').storeLocator({
			autoGeocode: true,
			maxDistance: false,	
			slideMap : true,
			defaultLoc: true,
			defaultLat: '13.0827',
			defaultLng : '80.2707',
			taxonomyFilters : {
				'country' : 'country-filter',
				'state' : 'state-filter',
				'city' : 'city-filter'
			}
		});
	});
</script>


<script>
// JavaScript Locations Array Data
	var worldData = {
		USA: {
			Alaska: ["Fairbanks", "Anchorage"],
			NewYork: ["Brooklyn", "Island"],
			Texas: ["San Antonio", "Austin"],
		},
		India: {
			Maharashtra: ["Mumbai", "Nagpur"],
			TamilNadu: ["Chennai", "Madurai"],
		},
		Canada: {
			Alberta: ["Grande Prairie", "Edmonton"],
			Saskatchewan: ["Saskatoon"],
		},
	};
	window.onload = function () {
		var countyList = document.getElementById("countyList"),
			stateList = document.getElementById("stateList"),
			cityList = document.getElementById("cityList");
		for (var country in worldData) {
			countyList.options[countyList.options.length] = new Option(country, country);
		}
		countyList.onchange = function () {
			stateList.length = 1;
			cityList.length = 1;
			if (this.selectedIndex < 1) return;
			for (var state in worldData[this.value]) {
				stateList.options[stateList.options.length] = new Option(state, state);
			}
		};
		countyList.onchange();
		stateList.onchange = function () {
			cityList.length = 1;
			if (this.selectedIndex < 1) return;
			var city = worldData[countyList.value][this.value];
			for (var i = 0; i < city.length; i++) {
				cityList.options[cityList.options.length] = new Option(city[i], city[i]);
			}
		};
	};
</script>

  </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

<!DOCTYPE html>

<html>

<head>

<title>jQuery Store Locator Google Map With Country, State, City Dropdown</title>

</head>

<body>

<label for="bh-sl-address">Enter Area or Zip Code:</label>

<option value="5">5 Miles</option>

<option value="10">10 Miles</option>

<option value="25">25 Miles</option>

<option value="50">50 Miles</option>

</select>

</div>

<button id="bh-sl-submit" type="submit">Submit</button>

</form>

<li><h3>Country</h3></li>

<li>

<option value="">Please select Country</option>

</select>

</li>

</ul>

<li><h3>State</h3></li>

<li>

<option value="">Please select State</option>

</select>

</li>

</ul>

<li>

<option value="">Please select State first</option>

</select>

</li>

</ul>

</div>

</div>

</div>

</div>

// Auto Geolocation and other Customization.

jQuery(function($) {

$('#bh-sl-map-container').storeLocator({

autoGeocode: true,

maxDistance: false,

slideMap : true,

defaultLoc: true,

defaultLat: '13.0827',

defaultLng : '80.2707',

taxonomyFilters : {

'country' : 'country-filter',

'state' : 'state-filter',

'city' : 'city-filter'

}

});

</script>

// JavaScript Locations Array Data

var worldData = {

USA: {

Alaska: ["Fairbanks", "Anchorage"],

NewYork: ["Brooklyn", "Island"],

Texas: ["San Antonio", "Austin"],

India: {

Maharashtra: ["Mumbai", "Nagpur"],

TamilNadu: ["Chennai", "Madurai"],

Canada: {

Alberta: ["Grande Prairie", "Edmonton"],

Saskatchewan: ["Saskatoon"],

};

window.onload = function () {

var countyList = document.getElementById("countyList"),

stateList = document.getElementById("stateList"),

cityList = document.getElementById("cityList");

for (var country in worldData) {

countyList.options[countyList.options.length] = new Option(country, country);

}

countyList.onchange = function () {

stateList.length = 1;

cityList.length = 1;

if (this.selectedIndex < 1) return;

for (var state in worldData[this.value]) {

stateList.options[stateList.options.length] = new Option(state, state);

}

};

countyList.onchange();

stateList.onchange = function () {

cityList.length = 1;

if (this.selectedIndex < 1) return;

var city = worldData[countyList.value][this.value];

for (var i = 0; i < city.length; i++) {

cityList.options[cityList.options.length] = new Option(city[i], city[i]);

}

};

</script>

</body>

</html>

Note: In the above code you need to replace APIKEY text with your Google Map APIKEY

If you like to customize the map then here you have jQuery store locator Standard settings. You can customize with the map-assets -> js -> plugins -> storelocator.js file.

Store Locations Data File

What we doing here is inserting all the data in JSON format and stored in the map-data -> locations.json file and now we need to enter the locations.json file path with dataLocation in storelocator.js file.

locations.json

[
  {
     "id":"1",
     "name":"KFC Fairbanks",
     "lat":"64.854810",
     "lng":"-147.712790",
     "category":"Franchise",
     "address":"62",
     "address2":"College Rd,",
     "city":"Fairbanks",
     "state":"Alaska",
     "country":"USA",
     "postal":"99701",
     "phone":"+19073768089",
     "hours1":"10:30 AM - 9:30 PM",
     "hours2":"",
     "hours3":"",
     "featured":"",
     "features":"",
     "date":"10/17/18"
  },
  {
    "id":"2",
    "name":"KFC Anchorage",
    "lat":"61.1415148",
    "lng":"-149.8490146",
    "category":"Franchise",
    "address":"1751,",
    "address2":"Abbott Rd",
    "city":"Anchorage",
    "state":"Alaska",
    "country":"USA",
    "postal":"99507",
    "phone":"+19073446801",
    "hours1":"10:30 AM - 9:30 PM",
    "hours2":"",
    "hours3":"",
    "featured":"",
    "features":"",
    "date":"10/17/18"
 },
 {
  "id":"3",
  "name":"KFC Anchorage",
  "lat":"61.2113357",
  "lng":"-149.8098796",
  "category":"Franchise",
  "address":"656R+GW",
  "address2":"Russian Jack Park,",
  "city":"Anchorage",
  "state":"Alaska",
  "country":"USA",
  "postal":"35215",
  "phone":"+19073337733",
  "hours1":"10:30 AM - 9:30 PM",
  "hours2":"",
  "hours3":"",
  "featured":"",
  "features":"",
  "date":"10/17/18"
},
  {
     "id":"4",
     "name":"KFC Anchorage",
     "lat":"61.3600318",
     "lng":"-149.9266628",
     "category":"Franchises",
     "address":"45R3+J7",
     "address2":"Abbott Loop,",
     "city":"Anchorage",
     "state":"Alaska",
     "country":"USA",
     "postal":"35215",
     "phone":"+19073446801",
     "hours1":"Mon-Sat 10am-08pm",
     "hours2":"",
     "hours3":"",
     "featured":"",
     "features":"",
     "date":"07/17/18"
  },
  {
     "id":"5",
     "name":"KFC Island",
     "lat":"40.624660",
     "lng":"-74.1013309",
     "category":"Franchises",
     "address":"1453 Forest Ave,",
     "address2":"Staten,",
     "city":"Island",
     "state":"NewYork",
     "country":"USA",
     "postal":"10302",
     "phone":"+17184472822",
     "hours1":"Mon-Sat 10am-08pm",
     "hours2":"",
     "hours3":"",
     "featured":"",
     "features":"",
     "date":"06/17/18"
  },
  {
    "id":"6",
    "name":"KFC Brooklyn",
    "lat":"40.607650",
    "lng":"-73.962230",
    "category":"Franchises",
    "address":"2026",
    "address2":"Coney Island Ave,",
    "city":"Brooklyn",
    "state":"NewYork",
    "country":"USA",
    "postal":"11223",
    "phone":"+17183750234",
    "hours1":"Mon-Sat 10am-08pm",
    "hours2":"",
    "hours3":"",
    "featured":"",
    "features":"",
    "date":"06/17/18"
  },
  {
     "id":"8",
     "name":"KFC Bandra West",
     "lat":"19.063600",
     "lng":"72.835180",
     "category":"Franchises",
     "address":"Kenilworth Mall,",
     "address2":"Linking Road, Bandra West,",
     "city":"Mumbai",
     "state":"Maharashtra",
     "country":"India",
     "postal":"400050",
     "phone":"+912233994444",
     "hours1":"Mon-Sat 10am-08pm",
     "hours2":"",
     "hours3":"",
     "featured":"",
     "features":"",
     "date":"03/17/18"
  },
  {
     "id":"9",
     "name":"KFC Powai",
     "lat":"19.123960",
     "lng":"72.917520",
     "category":"Franchises",
     "address":"Hiranandani Complex,",
     "address2":"Hiranandani Gardens, Powai,",
     "city":"Mumbai",
     "state":"Maharashtra",
     "country":"India",
     "postal":"400072",
     "phone":"+912233994444",
     "hours1":"Mon-Sat 10am-08pm",
     "hours2":"",
     "hours3":"",
     "featured":"",
     "features":"",
     "date":"03/17/18"
  },
  {
     "id":"10",
     "name":"KFC Sitabuldi",
     "lat":"21.14337",
     "lng":"79.0782813",
     "category":"Franchises",
     "address":"G1, G2, Ground Floor, Eternity Mall,",
     "address2":"Variety Square, Sitabuldi,",
     "city":"Nagpur",
     "state":"Maharashtra",
     "country":"India",
     "postal":"440012",
     "phone":"+917123399444",
     "hours1":"Mon-Sat 10am-08pm",
     "hours2":"",
     "hours3":"",
     "featured":"",
     "features":"",
     "date":"03/17/18"
  },
  {
     "id":"11",
     "name":"KFC Ashok Nagar",
     "lat":"13.0317132",
     "lng":"80.2093813",
     "category":"Franchise",
     "address":"Old No 96 & 97, New No 43 & 44,",
     "address2":"11th Ave, Ashok Nagar,",
     "city":"Chennai",
     "state":"TamilNadu",
     "country":"India",
     "postal":"600083",
     "phone":"+914433994444",
     "hours1":"Mon-Sat 10am-08pm",
     "hours2":"",
     "hours3":"",
     "featured":"",
     "features":"",
     "date":"09/17/18"
  },
  {
     "id":"12",
     "name":"KFC T. Nager",
     "lat":"13.0394621",
     "lng":"80.2127328",
     "category":"Franchises",
     "address":"Plot No 18, Sir Theagaraya Rd,",
     "address2":"Parthasarathi Puram, T. Nagar,",
     "city":"Chennai",
     "state":"TamilNadu",
     "country":"India",
     "postal":"600017",
     "phone":"+914433994444",
     "hours1":"Mon-Sat 10am-08pm",
     "hours2":"",
     "hours3":"",
     "featured":"true",
     "features":"",
     "date":"08/17/18"
  },
  {
     "id":"13",
     "name":"KFC Madurai",
     "lat":"9.9204657",
     "lng":"78.1038899",
     "category":"Franchises",
     "address":"61, 4B, Bypass Rd, Vanamamalai Nagar,",
     "address2":"Durai Samy Nagar,",
     "city":"Madurai",
     "state":"TamilNadu",
     "country":"India",
     "postal":"625010",
     "phone":"+914433994444",
     "hours1":"Mon-Sat 10am-08pm",
     "hours2":"",
     "hours3":"",
     "featured":"",
     "features":"",
     "date":"07/17/18"
  },
  {
     "id":"14",
     "name":"KFC Grande Prairie",
     "lat":"55.1704239",
     "lng":"-118.8158431",
     "category":"Franchises",
     "address":"10533 100 Ave,",
     "address2":"",
     "city":"Grande Prairie",
     "state":"Alberta",
     "country":"Canada",
     "postal":"T8V 0V8",
     "phone":"+17805328520",
     "hours1":"Mon-Sat 10am-08pm",
     "hours2":"",
     "hours3":"",
     "featured":"",
     "features":"",
     "date":"06/17/18"
  },
  {
     "id":"15",
     "name":"KFC San Antonio",
     "lat":"29.3646048",
     "lng":"-98.4419676",
     "category":"Franchises",
     "address":"7009 San Pedro Ave,",
     "address2":"",
     "city":"San Antonio",
     "state":"Texas",
     "country":"USA",
     "postal":"78216",
     "phone":"+12105910679",
     "hours1":"Mon-Sat 10am-08pm",
     "hours2":"",
     "hours3":"",
     "featured":"",
     "features":"",
     "date":"05/17/18"
  },
  {
     "id":"16",
     "name":"KFC Austin",
     "lat":"30.2385056",
     "lng":"-97.7275859",
     "category":"Franchises",
     "address":"2224 E Riverside Dr,",
     "address2":"",
     "city":"Austin",
     "state":"Texas",
     "country":"USA",
     "postal":"78741",
     "phone":"+15123262133",
     "hours1":"Mon-Sat 10am-08pm",
     "hours2":"",
     "hours3":"",
     "featured":"",
     "features":"",
     "date":"04/17/18"
  },
  {
     "id":"17",
     "name":"KFC Edmonton",
     "lat":"53.5991043",
     "lng":"-113.4334704",
     "category":"Franchises",
     "address":"5807 137 Ave NW,",
     "address2":"",
     "city":"Edmonton",
     "state":"Alberta",
     "country":"Canada",
     "postal":"T5A 0P1",
     "phone":"+15123262133",
     "hours1":"Mon-Sat 10am-08pm",
     "hours2":"",
     "hours3":"",
     "featured":"",
     "features":"",
     "date":"04/17/18"
  },
  {
     "id":"18",
     "name":"KFC Saskatoon",
     "lat":"52.131957",
     "lng":"-106.729888",
     "category":"Franchises",
     "address":"3110 Diefenbaker Dr,",
     "address2":"",
     "city":"Saskatoon",
     "state":"Saskatchewan",
     "country":"Canada",
     "postal":"S7L 6T4",
     "phone":"+13066682640",
     "hours1":"Mon-Sat 10am-08pm",
     "hours2":"",
     "hours3":"",
     "featured":"",
     "features":"",
     "date":"04/17/18"
  }
]

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

[

{

"id":"1",

"name":"KFC Fairbanks",

"lat":"64.854810",

"lng":"-147.712790",

"category":"Franchise",

"address":"62",

"address2":"College Rd,",

"city":"Fairbanks",

"state":"Alaska",

"country":"USA",

"postal":"99701",

"phone":"+19073768089",

"hours1":"10:30 AM - 9:30 PM",

"hours2":"",

"hours3":"",

"featured":"",

"features":"",

"date":"10/17/18"

{

"id":"2",

"name":"KFC Anchorage",

"lat":"61.1415148",

"lng":"-149.8490146",

"category":"Franchise",

"address":"1751,",

"address2":"Abbott Rd",

"city":"Anchorage",

"state":"Alaska",

"country":"USA",

"postal":"99507",

"phone":"+19073446801",

"hours1":"10:30 AM - 9:30 PM",

"hours2":"",

"hours3":"",

"featured":"",

"features":"",

"date":"10/17/18"

{

"id":"3",

"name":"KFC Anchorage",

"lat":"61.2113357",

"lng":"-149.8098796",

"category":"Franchise",

"address":"656R+GW",

"address2":"Russian Jack Park,",

"city":"Anchorage",

"state":"Alaska",

"country":"USA",

"postal":"35215",

"phone":"+19073337733",

"hours1":"10:30 AM - 9:30 PM",

"hours2":"",

"hours3":"",

"featured":"",

"features":"",

"date":"10/17/18"

{

"id":"4",

"name":"KFC Anchorage",

"lat":"61.3600318",

"lng":"-149.9266628",

"category":"Franchises",

"address":"45R3+J7",

"address2":"Abbott Loop,",

"city":"Anchorage",

"state":"Alaska",

"country":"USA",

"postal":"35215",

"phone":"+19073446801",

"hours1":"Mon-Sat 10am-08pm",

"hours2":"",

"hours3":"",

"featured":"",

"features":"",

"date":"07/17/18"

{

"id":"5",

"name":"KFC Island",

"lat":"40.624660",

"lng":"-74.1013309",

"category":"Franchises",

"address":"1453 Forest Ave,",

"address2":"Staten,",

"city":"Island",

"state":"NewYork",

"country":"USA",

"postal":"10302",

"phone":"+17184472822",

"hours1":"Mon-Sat 10am-08pm",

"hours2":"",

"hours3":"",

"featured":"",

"features":"",

"date":"06/17/18"

{

"id":"6",

"name":"KFC Brooklyn",

"lat":"40.607650",

"lng":"-73.962230",

"category":"Franchises",

"address":"2026",

"address2":"Coney Island Ave,",

"city":"Brooklyn",

"state":"NewYork",

"country":"USA",

"postal":"11223",

"phone":"+17183750234",

"hours1":"Mon-Sat 10am-08pm",

"hours2":"",

"hours3":"",

"featured":"",

"features":"",

"date":"06/17/18"

{

"id":"8",

"name":"KFC Bandra West",

"lat":"19.063600",

"lng":"72.835180",

"category":"Franchises",

"address":"Kenilworth Mall,",

"address2":"Linking Road, Bandra West,",

"city":"Mumbai",

"state":"Maharashtra",

"country":"India",

"postal":"400050",

"phone":"+912233994444",

"hours1":"Mon-Sat 10am-08pm",

"hours2":"",

"hours3":"",

"featured":"",

"features":"",

"date":"03/17/18"

{

"id":"9",

"name":"KFC Powai",

"lat":"19.123960",

"lng":"72.917520",

"category":"Franchises",

"address":"Hiranandani Complex,",

"address2":"Hiranandani Gardens, Powai,",

"city":"Mumbai",

"state":"Maharashtra",

"country":"India",

"postal":"400072",

"phone":"+912233994444",

"hours1":"Mon-Sat 10am-08pm",

"hours2":"",

"hours3":"",

"featured":"",

"features":"",

"date":"03/17/18"

{

"id":"10",

"name":"KFC Sitabuldi",

"lat":"21.14337",

"lng":"79.0782813",

"category":"Franchises",

"address":"G1, G2, Ground Floor, Eternity Mall,",

"address2":"Variety Square, Sitabuldi,",

"city":"Nagpur",

"state":"Maharashtra",

"country":"India",

"postal":"440012",

"phone":"+917123399444",

"hours1":"Mon-Sat 10am-08pm",

"hours2":"",

"hours3":"",

"featured":"",

"features":"",

"date":"03/17/18"

{

"id":"11",

"name":"KFC Ashok Nagar",

"lat":"13.0317132",

"lng":"80.2093813",

"category":"Franchise",

"address":"Old No 96 & 97, New No 43 & 44,",

"address2":"11th Ave, Ashok Nagar,",

"city":"Chennai",

"state":"TamilNadu",

"country":"India",

"postal":"600083",

"phone":"+914433994444",

"hours1":"Mon-Sat 10am-08pm",

"hours2":"",

"hours3":"",

"featured":"",

"features":"",

"date":"09/17/18"

{

"id":"12",

"name":"KFC T. Nager",

"lat":"13.0394621",

"lng":"80.2127328",

"category":"Franchises",

"address":"Plot No 18, Sir Theagaraya Rd,",

"address2":"Parthasarathi Puram, T. Nagar,",

"city":"Chennai",

"state":"TamilNadu",

"country":"India",

"postal":"600017",

"phone":"+914433994444",

"hours1":"Mon-Sat 10am-08pm",

"hours2":"",

"hours3":"",

"featured":"true",

"features":"",

"date":"08/17/18"

{

"id":"13",

"name":"KFC Madurai",

"lat":"9.9204657",

"lng":"78.1038899",

"category":"Franchises",

"address":"61, 4B, Bypass Rd, Vanamamalai Nagar,",

"address2":"Durai Samy Nagar,",

"city":"Madurai",

"state":"TamilNadu",

"country":"India",

"postal":"625010",

"phone":"+914433994444",

"hours1":"Mon-Sat 10am-08pm",

"hours2":"",

"hours3":"",

"featured":"",

"features":"",

"date":"07/17/18"

{

"id":"14",

"name":"KFC Grande Prairie",

"lat":"55.1704239",

"lng":"-118.8158431",

"category":"Franchises",

"address":"10533 100 Ave,",

"address2":"",

"city":"Grande Prairie",

"state":"Alberta",

"country":"Canada",

"postal":"T8V 0V8",

"phone":"+17805328520",

"hours1":"Mon-Sat 10am-08pm",

"hours2":"",

"hours3":"",

"featured":"",

"features":"",

"date":"06/17/18"

{

"id":"15",

"name":"KFC San Antonio",

"lat":"29.3646048",

"lng":"-98.4419676",

"category":"Franchises",

"address":"7009 San Pedro Ave,",

"address2":"",

"city":"San Antonio",

"state":"Texas",

"country":"USA",

"postal":"78216",

"phone":"+12105910679",

"hours1":"Mon-Sat 10am-08pm",

"hours2":"",

"hours3":"",

"featured":"",

"features":"",

"date":"05/17/18"

{

"id":"16",

"name":"KFC Austin",

"lat":"30.2385056",

"lng":"-97.7275859",

"category":"Franchises",

"address":"2224 E Riverside Dr,",

"address2":"",

"city":"Austin",

"state":"Texas",

"country":"USA",

"postal":"78741",

"phone":"+15123262133",

"hours1":"Mon-Sat 10am-08pm",

"hours2":"",

"hours3":"",

"featured":"",

"features":"",

"date":"04/17/18"

{

"id":"17",

"name":"KFC Edmonton",

"lat":"53.5991043",

"lng":"-113.4334704",

"category":"Franchises",

"address":"5807 137 Ave NW,",

"address2":"",

"city":"Edmonton",

"state":"Alberta",

"country":"Canada",

"postal":"T5A 0P1",

"phone":"+15123262133",

"hours1":"Mon-Sat 10am-08pm",

"hours2":"",

"hours3":"",

"featured":"",

"features":"",

"date":"04/17/18"

{

"id":"18",

"name":"KFC Saskatoon",

"lat":"52.131957",

"lng":"-106.729888",

"category":"Franchises",

"address":"3110 Diefenbaker Dr,",

"address2":"",

"city":"Saskatoon",

"state":"Saskatchewan",

"country":"Canada",

"postal":"S7L 6T4",

"phone":"+13066682640",

"hours1":"Mon-Sat 10am-08pm",

"hours2":"",

"hours3":"",

"featured":"",

"features":"",

"date":"04/17/18"

}

]

Here we worked with major three files index.php, storelocator.js, and locations.json.

Conclusion:

I hope this will help you to create the store locations based on the country, state, and city. Do you need any other customization? then let me know in the comment section. If you loved this article share it with your friends.

Preview & Download

Cascading Dropdown Dependent Dropdown Get Current Location Google Map Google Map API Maps

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]

jQuery Store Locator Google Map With Country, State, City Dropdown

Share:

Store Location With Country, State, & City Dropdown

Store Locations Data File

Preview & Download

Mraj

Don't miss on latest updates