paulmolluzzo / google-map-markers Goto Github PK

View Code? Open in Web Editor NEW

An example plugin that uses the Google Maps API in JavaScript to put markers on a map

License: MIT License

HTML 18.29% JavaScript 42.89% CSS 38.82%

google-map-markers's Introduction

Google Maps Plugin

This plugin will create an interactive map using Google's Maps JavaScript API v3. It will create a map in the specified HTML element, center the map on the specified Lat/Long coordinates, plot a marker for each valid marker supplied (and add in an infowindow if supplied), and will number each marker.

Implementing

First, source the Google Maps API script with your API Key (optional, depending on needs) and source the plugin JS file:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[YOUR_KEY_HERE]"></script>
<script type="text/javascript" src="path/to/map-plugin.js"></script>

Next, add an emtpy HTML element for the map and some small CSS:

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

#map-holder {
  display: block;
  margin: 0 auto;
  width: 600px;
  height: 100%;
  max-height: 600px;
}

Last, include the initialization command mapPlugin.createMap() at the bottom of the HTML before the closing </body> tag to create the map with markers:

<script>
  var markers = [
                {
                  lat:40.7412541,
                  long:-74.0031284,
                  infoContent:'<p>This is <a href="https://google.com">Google</a></p>',
                  maxWidth: 150
                },
                {
                  lat:40.7638337,
                  long:-73.9729656,
                  infoContent:'<p>This is <a href="https://apple.com">Apple</a></p>',
                  maxWidth: 500
                }
              ];

mapPlugin.createMap('map-holder',
                    37.09024, -95.71289100000001,
                    markers,
                    true
                    )
  );
</script>

Recommend Projects