jcadima
1/26/2016 - 9:55 PM

Control the location of Google Map Controls

Control the location of Google Map Controls

new_gist_file.html
content_copyfile_download
https://developers.google.com/maps/documentation/javascript/examples/control-positioning


<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Control positioning</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: -28.643387, lng: 153.612224},
    mapTypeControl: true,
    // this controls [MAP|SATELLITE] to be on the center
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
    },
    // this controls the plus/minus and yellow icon 
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    streetViewControl: true,
    // this control the yellow man position
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    }
  });
}

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap" async defer>
    </script>
  </body>
</html>
EXAMPLE 2.php
content_copyfile_download
<!-- ===================================  GET LATITUDE AND LONGITUDE   =========================================  -->

    <?php
     // Get latitude and longitude by address         
        $address = get_field('map') ;  
        $prop_title = get_field('property_title') ;
        $property_title = '"' . $prop_title . '"' ;
        $prepAddr = str_replace(' ','+',$address);
        $geocode=file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.$prepAddr.'&sensor=false');
        $output= json_decode($geocode);
        $latitude  = $output->results[0]->geometry->location->lat;
        $longitude = $output->results[0]->geometry->location->lng;
    ?>   


  <script >
	  // locations go here, in this case only one location (marker) will be shown
    var locations = [
        <?php
        echo '[' .$property_title . ',' . $latitude . ',' . $longitude   . '], ' ;
        ?>
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: <?php the_field('map_zoom') ; ?>,  // let the user pick the zoom value for the map
      scrollwheel: false, // disable scrollwheel zoom, this should always be the default  >_<
      center: new google.maps.LatLng(<?php  echo $latitude ?>, <?php echo $longitude ?>),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      // controls map terrain: [map|satellite]
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
      },
      // this controls the plus/minus buttons
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
      },
      // yellow man position
      streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
      }

    });


    var infowindow = new google.maps.InfoWindow();
    var marker, i;
	
	// loop through locations array to build the markers
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    } // end for loop
  </script>