Adding Google Map with multiple markers without jQuery plugins

Some time ago we have seen how to add a simple Google Map with a single marker using the Google API 3. Very simple! Here is the code to display multiple markers. I advice you to use this script in place of the old one, also for a single marker map.

Javascript/Coffeescript

Notice: place this code inside the document.ready (or load the api js inside the <head> tag and not just before the </body> tag as usual), otherwise you will get the error: Uncaught ReferenceError: google is not defined

/*
 * Google Map with multiple markers
 */
var initializeMap = function(id) {
  var i, infowindow, locations, map, mapOptions, marker, _results, image;

  /* Settings */
  // Custom image marker
  image = "path-to-theme-folder/assets/images/icons/map_icon.png"

  // Map Options
  mapOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.92, 151.25),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false
  };

  // Markers
  locations = [
    [
      "<h5>Marker 1</h5> Your address<br/> Your town", // Popup text
      -33.890542, // Coordinates
      151.274856, 
      100 // Z-index position of the marker
    ], 
    [
      "<h5>Marker 2</h5> Your address<br/> Your town", 
      -33.923036, 
      151.259052, 
      100
    ], 
    [
      "<h5>Marker 3</h5> Your address<br/> Your town", 
      -34.028249, 
      151.157507, 
      100
    ]
  ];
  /* End Settings */
  
  // Initialize the map with options (inside #map element)
  map = new google.maps.Map(document.getElementById(id), mapOptions);

  // Initialize the pop up
  infowindow = new google.maps.InfoWindow();

  // Popup function
  var popup = function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    };
  };
  // Add a marker and a popup for each locations
  marker = void 0;
  i = 0;
  _results = [];
  while (i < locations.length) {
    // Marker
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      zIndex: locations[i][3],
      map: map,
      icon: image
    });
    // Pop Up
    google.maps.event.addListener(marker, "click", (popup)(marker, i));
    _results.push(i++);
  }
  return _results;
};

// Display the map into the element ID (if it exists) passed to the initializeMap function (in this case into element #map)
if ($("#map").length) {
  google.maps.event.addDomListener(window, "load", initializeMap("map"));
}

// You can also show the map into another element
// google.maps.event.addDomListener window, "load", initializeMap("map-2")
  #
  # * Google Map with multiple markers
  #
  initializeMap = (id) ->
    ### Settings ###
    # Custom image marker
    #image = "assets/img/custom_icon.png"

    # Map Options
    mapOptions =
      zoom: 10
      center: new google.maps.LatLng(-33.92, 151.25)
      mapTypeId: google.maps.MapTypeId.ROADMAP
      scrollwheel: false

    # Markers
    locations = [
      [
        "<h5>Marker 1</h5> Your address<br/> Your town" # Popup text
        -33.890542 # Coordinates
        151.274856
        100 # Z-index position of the marker
      ]
      [
        "<h5>Marker 2</h5> Your address<br/> Your town"
        -33.923036
        151.259052
        100
      ]
      [
        "<h5>Marker 3</h5> Your address<br/> Your town"
        -34.028249
        151.157507
        100
      ]
    ]
    ### End Settings ###

    # Initialize the map with options (inside #map element)
    map = new google.maps.Map(document.getElementById(id), mapOptions)

    # Initialize the pop up
    infowindow = new google.maps.InfoWindow()

    # Add a marker and a popup for each locations
    marker = undefined
    i = 0
    while i < locations.length
      # Marker
      marker = new google.maps.Marker(
        position: new google.maps.LatLng(locations[i][1], locations[i][2])
        zIndex: locations[i][3]
        map: map
        #icon: image
      )
      # Popup
      google.maps.event.addListener marker, "click", ((marker, i) ->
        ->
          infowindow.setContent locations[i][0]
          infowindow.open map, marker
          return
      )(marker, i)
      i++

  # Display the map into the element ID (if it exists) passed to the initializeMap function (in this case into element #map)
  if $("#map").length
    google.maps.event.addDomListener window, "load", initializeMap("map")

    # You can also show the map into another element
    # google.maps.event.addDomListener window, "load", initializeMap("map-2")

HTML
Load the Google Maps API in your page.

The map will be created inside the div #map

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
...
<div id="map"></div>

LESS
Remember to set the height of the div that contains the map. And if you want to change some styles for the pop up you can do it adding styles to the gm-style-iw class

#map{
  height:200px;

  // PopUp (info window)
  .gm-style-iw{
    text-align:center;
  }
}
  • HeavyC

    Hey you fucking retarded, how the hell is supose to close the left horible menu ?????

Categories

Category BootstrapCategory CoffeescriptCategory DrupalCategory GravCategory HTMLCategory JavascriptCategory JoomlaCategory jQueryCategory LaravelCategory MagentoCategory PHPCategory SharePointCategory SpringCategory ThymeleafCategory WordPressCategory Workflow

Comments

Developed and designed by Netgloo
© 2016 Netgloo