Skip to content

Refactored Baidu Map implementation with search box autocomplete. Map is in a Bootstrap modal and pops up when user navigates away from address text field. Markers can be moved by dragging or clicking another point in the map.

Notifications You must be signed in to change notification settings

wongwf82/baidu-map-refactored-draggable-marker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

baidu-map-refactored-draggable-marker

Refactored Baidu Map implementation with search box autocomplete. Map is in a Bootstrap modal and pops up when user navigates away from address text field. Markers can be moved by dragging or clicking another point in the map.

A few things to note

  1. The implementation is in Ruby on Rails. Feel free to extract what you need (esp. the Javascript portion).

  2. Baidu map does not seem to have HTTPS version. So you will get blocked mixed content error. The solution is:

  • Add the following to Gemfile:
gem 'rack-ssl-enforcer'
  • Run "bundle install"
  • Add the following to config/application.rb:
    if Rails.env == "production" || Rails.env == "staging"
        config.middleware.use Rack::SslEnforcer, except: [ /edit_venues/ ], strict: true 
    end
  • Replace edit_venues with your own url where you want to display the map

###The flow is:

  • User navigates away from address text field
  • The modal pops up
  • User enters a location to be searched
  • User can click/drag marker
  • User clicks Done button
  • The city field gets updated
  • The next field (Phone) is highlighted

Creating Baidu Map API Key

  1. Install Google Translate Chrome extension (so you can click on "Translate this page" for every page)
  2. Visit http://developer.baidu.com/map/
  3. Click on API控制台 (or API Console)
  4. Create an account and get the key

Happy Mapping!

About

Refactored Baidu Map implementation with search box autocomplete. Map is in a Bootstrap modal and pops up when user navigates away from address text field. Markers can be moved by dragging or clicking another point in the map.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published