South Florida Spatial Web Apps

Utilizing APIs with Google Maps

Created by Serkan Haytac / Urban4M

On the agenda for this evening:

Brief casual open discussion to understand what everyone would like to see related to GIS web development and learn more about.
Dive into some of the basics of Google Maps API.
Demo of a simple web app built on Angular.js, Google Maps api and the aboutPLACE API.

Your name
Your occupation/experience in web/mobile development.
Why you are interested in GIS web/mobile applications?
What would you like to see more of in next meetups?

Clone the repo from Github.com


							git clone https://github.com/serkanh/google-maps-demo.git

						
							cd google-maps-demo

						
							git checkout basicmap

Include Google Maps JS lib.

CSS to adjust width and height of the map.#map is the div id of the element that will hold the element.

Enter latitude and longitude of where you want to center the map. Adjust zoom level you wish to have the map upon loading.

Clone the repo from Github.com


							git clone https://github.com/serkanh/google-maps-demo.git

						
							cd google-maps-demo

						
							git checkout mapwithmarker

Adding a marker to the map.


... map = new google.maps.Map(document.getElementById('map'),mapOptions);

 --> marker = new google.maps.Marker({
    position:mapOptions.center
  })

  marker.setMap(map);
} <--

... google.maps.event.addDomListener(window, 'load', initialize);

}

Clone the repo from Github.com


							git clone https://github.com/serkanh/google-maps-demo.git

						
							cd google-maps-demo

						
							git checkout mapwithicon

Adding a custom icon to the map.


marker = new google.maps.Marker({
    position:mapOptions.center,
    icon:'urban4m.png'
  })

Clone the repo from Github.com


							git clone https://github.com/serkanh/google-maps-demo.git

						
							cd google-maps-demo

						
							git checkout mapwithmultiplemarkers

Adding multiple markers to the map.


... map = new google.maps.Map(document.getElementById('map'),mapOptions);
  var locations = [
    ['Miami 1',25.7616798, -80.19179021000000],
    ['Miami 2',25.7616798, -80.20179022000000],
    ['Miami 2',25.7616798, -80.21179023000000]
  ]

  var marker, i
  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.addDomListener(window, 'load', initialize);

Adding bounce animations to markers.

git checkout markeranimatedbounce


		...marker = new google.maps.Marker({
        position:new google.maps.LatLng(locations[i][1],locations[i][2]),
        map:map,
        animation: google.maps.Animation.BOUNCE
      });

Adding drop animations to markers.

git checkout markeranimateddrop


		...marker = new google.maps.Marker({
        position:new google.maps.LatLng(locations[i][1],locations[i][2]),
        map:map,
        animation: google.maps.Animation.DROP
      });

Clone the repo from Github.com


							git clone https://github.com/serkanh/google-maps-demo.git

						
							cd google-maps-demo

						
							git checkout mapwithpolygon

Adding a polygon to the map.


var miami1=new google.maps.LatLng(25.7616798, -80.19179021000000);
var miami2=new google.maps.LatLng(25.8616798, -80.20179022000000);
var miami3=new google.maps.LatLng(25.7616798, -80.31179023000000);
var locations = [miami1,miami2,miami3]

  var tri=new google.maps.Polygon({
    path:locations,
    strokeColor:"#0000FF",
    strokeOpacity:0.8,
    strokeWeight:2,
    fillColor:"#0000FF",
    fillOpacity:0.4
  });
  
  tri.setMap(map);
}

Clone the repo from Github.com


							git clone https://github.com/serkanh/google-maps-demo.git

						
							cd google-maps-demo

						
							git checkout geocode

Assign latLng variable and set initial value for center of the map.


var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latLng = new google.maps.LatLng(25.7616798,-80.19179020000001)
  var mapOptions = {
    zoom: 13,
    center: latLng
  };
  map = new google.maps.Map(document.getElementById('map'),mapOptions);

}

Create a function to run geocode based on given address.


function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode failed, reason was ' + status);
    }
  });
}

Add form and div element to take input from the screen.

Clone the repo from Github.com


							git clone https://github.com/aboutPLACE/cheapeats.git

						
							cd cheapeats

Clone the repo from Github.com


							git clone https://github.com/aboutPLACE/vibe.git

						
							cd vibe