title: Load Location in Google Map on href Click
body: <p>I want to load Google different coordinates on href click. For Example</p>
  
  <pre><code>&lt;a href="#location1"&gt;Location 1&lt;/a&gt;
  &lt;a href="#location2"&gt;Location 2&lt;/a&gt;
  &lt;a href="#location3"&gt;Location 3&lt;/a&gt;
  </code></pre>
  
  <p>Below this there is a DIV which loads the Google Map which loads the locations from the above links.</p>
  
  <pre><code>&lt;div id="map-container" class="col-md-12 no-gutter" style="height:500px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is the script which is loading the Map with single location.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function initialize() {
              var mapOptions = {
                  center: new google.maps.LatLng(51.520904, -0.107466),
                  zoom: 17,
                  draggable: false,
                  scrollwheel: false,
                  disableDoubleClickZoom: true,
                  zoomControl: false
              };
              var map = new google.maps.Map(document.getElementById("map-container"),
                  mapOptions);
  
              var styles = [
                  {
                      featureType: "landscape.man_made",
                      elementType: "geometry",
                      stylers: [
                          { visibility: "on" },
                          { color: "#d4ebf4" }
                      ]
                  },
                  {
                      featureType: "road",
                      elementType: "labels.text.fill",
                      stylers: [
                          { visibility: "on" },
                          { color: "#202020"}
                      ]
                  },
                  {
                      featureType: "poi.business",
                      elementType: "all",
                      stylers: [
                          { visibility: "on" }
                      ]
                  },
                  {
                      featureType: "poi.park",
                      elementType: "all",
                      stylers: [
                          { color: "#98d1e8" }
                      ]
                  },
                  {
                      featureType: "poi.school",
                      elementType: "all",
                      stylers: [
                          { visibility: "off" },
                          { color: "#808080" }
                      ]
                  },
                  {
                      featureType: "all",
                      elementType: "geometry.stroke",
                      stylers: [
                          { visibility: "off" }
                      ]
                  },
                  {
                      featureType: "poi.park",
                      elementType: "labels.text.fill",
                      stylers: [
                          { visibility: "off" }
                      ]
                  },
                  {
                      featureType: "transit.station.rail",
                      elementType: "labels.icon",
                      stylers: [
                          { hue: "#005eff" },
                          { saturation: -37 }
                      ]
                  },
                  {
                      featureType: "poi.park",
                      elementType: "labels.text.stroke",
                      stylers: [
                          { color: "#808080" }
                      ]
                  },
                  {
                      featureType: "road.local",
                      elementType: "all",
                      stylers: [
                          { color: "#ffffff" }
                      ]
                  },
                  {
                      featureType: "all",
                      elementType: "labels.text.fill",
                      stylers: [
                          { color: "#808080" }
                      ]
                  },
                  {
                      featureType: "transit.line",
                      elementType: "all",
                      stylers: [
                          { color: "#ffffff" }
                      ]
                  }
              ];
  
              map.setOptions({styles: styles});
  
  
              var blueIco = {
                  url: "&lt;?php bloginfo('template_directory'); ?&gt;/images/map-pin.png",
                  size: new google.maps.Size(55, 73),
                  anchor: new google.maps.Point(28, 72)
              };
  
              var latLng = new google.maps.LatLng(51.520904, -0.107466);
  
              marker = new google.maps.Marker({
                  map: map,
                  position: latLng,
                  animation: google.maps.Animation.DROP,
                  icon: blueIco,
                  normalIcon: blueIco
              });
  
              google.maps.event.addListener(marker, "mouseout", function (event) {
                  this.setIcon(this.normalIcon);
                  infowindow.close();
              });
          }
          google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p></p>