Working with GoogleMaps in jQuery style

jQuery plugin for GoogleMaps

  • Share

I've used GoogleMaps on several web projects and it seemed to me that I'm repeating a lot of code used in the previous projects which lead me to write a common Javascript library to help me easily reuse the code by only copying the JavaScript library to a project or referencing it from CDN.

I could not think of a better way to build this library than to use jQuery and build a pligin for this.

Jquery Google Maps

Of course, this is not the only library available online which is wrapping GooglemMaps for better and easier web page building. It is a set of functionalities that I often used on one place.

The plugin can work in two modes:

  • Editor
  • Viewer

Since it has editor mode, it means you need to be able to take out the map state and save it somehow. For that purpose, plugin generates the output in JSON which can be used later to load the map.

You can check out the functionality on these plunker demo pages:

Plugin also support various type of style already build from snazzymaps.com, so no need to build your maps style from the scratch. This website provides a large number of style you can use for GoogleMaps and they also provide it as a webservice API including JSON https://snazzymaps.com/api/styles.json and XML format https://snazzymaps.com/api/styles.xml

One big advantage of tis jQury plugin is that it foes not require from you to reference any other plug in or GoogleMpas API which is used. It will check whether required pug-ins are loaded or if GoogleMaps API reference is loaded, load them if not or just skip loading because you are probably ising it somewhere else on the page.

That's why you do not need to reference a bunch of external css or javascript as you can see from the following example:


<html>
 
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>JQuery GoogleMaps Editor With Data Loading</title>
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
  <script type="text/javascript" src="https://rawgit.com/dejanstojanovic/JQuery-GoogleMaps/master/src/jquery.googlemaps.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//rawgit.com/dejanstojanovic/JQuery-GoogleMaps/master/src/css/mapstyle.min.css">

  <script type="text/javascript">
    //<![CDATA[ 
    $(window).load(function() {
      $(document).ready(function() {
        $(".map-container").GoogleMapEditor({
          height: 400,
          richtextEditor: true,
          editTemplatesPath: "//rawgit.com/dejanstojanovic/JQuery-GoogleMaps/master/src/html/",
          markerPinsPath: "//rawgit.com/dejanstojanovic/JQuery-GoogleMaps/master/src/img/pin/",
          stylesPath: "//rawgit.com/dejanstojanovic/JQuery-GoogleMaps/master/src/styles.json",
          dataChange: function(sender, data) {
            $(sender.container).next().next().val(data);
          }
        });
      });
    }); //]]>
  </script>
</head>

<body>
  <p>Map editor</p>
  <div class="map-container"></div>
  <textarea rows="10" cols="100" style="width:100%"></textarea>
</body>

</html>

    

If you are using Microsoft Visual Studio for development you can even install it from NuGet. However if you are ASP.NET developer, I create another project on GitHub as well as NuGet package which serializes and deserializes JSON map data from and to strongly typed C# objects.

To use this plugin in ASP.NET MVC application is pretty easy. You just need to install the package and start using HTML helpers which will render the needed HTML structure and javascript code.

@Html.GoogleMapEditor("test", new Mvc.GoogleMaps.Models.Map()
           {
               editMode = true,
               stylesPath = "//cdn.jsdelivr.net/jquery.googlemaps/2.2.4/styles.json",
               markerPinsPath = "//cdn.jsdelivr.net/jquery.googlemaps/2.2.4/img",
               editTemplatesPath = "//cdn.jsdelivr.net/jquery.googlemaps/2.2.4/html"
           })
    

For more details about jQuery GoogleMaps plugin and GoogleMaps MVC package and code you can find out from the reference links and GitHub pages.

References

  • Share

Disclaimer

Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.

Comments for this article

comments powered by Disqus