Google maps javascript #1
Create a new map at a specific coordinate:
center:new google.maps.LatLng(51.508742,-0.120850),
Set a text, stating the latitude and longitude of a location:
content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()}
Set the fill color attribute of object:
fillColor:"#0000FF"
Set the fill opacity attribute of object:
fillOpacity:0.4
Displays the "default" behavior (depends on screen size):
google.maps.MapTypeControlStyle.DEFAULT
Select map type via a dropdown menu:
google.maps.MapTypeControlStyle.DROPDOWN_MENU
Display one button for each map type:
google.maps.MapTypeControlStyle.HORIZONTAL_BAR
Picks the best zoom control based on device and map size:
google.maps.ZoomControlStyle.DEFAULT
Displays the standard zoom slider control:
google.maps.ZoomControlStyle.LARGE
Displays a mini-zoom control (only + and - buttons):
google.maps.ZoomControlStyle.SMALL
Zoom to 9 when clicking on marker:
google.maps.event.addListener(marker,'click',function() {map.setZoom(9);map.setCenter(marker.getPosition());});
Open an infoWindow:
infowindow.open(map,marker);
Calling the map's setMapTypeId() method:
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
Set the tilt in a google map:
map.setTilt(0);
Allow map type control:
mapTypeControl: true
mapTypeControlOptions is an attribute that creates an object:
mapTypeControlOptions: {}
Set the map in HYBRID (photographic map + roads and city names):
mapTypeId:google.maps.MapTypeId.HYBRID
Use the setMap() method:
marker.setMap(map);
HTMLElement Specifies in what HTML element to put the map:
new google.maps.Map(HTMLElement,MapOptions)
Allow the control of overview map:
overviewMapControl: true
Allow pan control:
panControl: true
Set the path attribute of an object (Path = myTrip):
path:myTrip
Place a marker on a map, after an event:
placeMarker(map, event.latLng);
You can also position a control, with the ControlPosition property:
position: google.maps.ControlPosition.TOP_CENTER
Allow the rotation of the map control:
rotateControl: true
Allow scale control:
scaleControl: true
Allow street view control:
streetViewControl: true
Set the stroke color attribute of object:
strokeColor:"#0000FF"
Set the stroke opacity attribute of object:
strokeOpacity:0.8
Set the stroke weight attribute of object:
strokeWeight:2
A Polyline is a line that is drawn through a series of coordinates in an ordered sequence:
var flightPath = new google.maps.Polyline({});
Show an InfoWindow with some text content for a marker:
var infowindow = new google.maps.InfoWindow({content:"Hello World!"});
Create a new map within a canvas with the mapOptions object:
var map = new google.maps.Map(mapCanvas, mapOptions);
Defines four maps with different map types:
var map1-4 = new google.maps.Map(document.getElementById("googleMap1-4"), mapOptions1-4);
Creates a new map inside the <div> element with id="googleMap", using the parameters that are passed (mapProp):
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
Create an object regarding map options:
var mapOptions = {};
Disable default GUI in map options:
var mapOptions {disableDefaultUI: true}
Set a map prop, at the center of a coordinate, and zoom in 5:
var mapProp= {center:new google.maps.LatLng(51.508742,-0.120850), zoom:5};
Add the marker to the map:
var marker = new google.maps.Marker({position: myCenter});
How to animate the marker with the animation property:
var marker = new google.maps.Marker({position:myCenter,animation:google.maps.Animation.BOUNCE,icon:'pinkball.png'});
Create a new google maps marker:
var marker = new google.maps.Marker({})
Create a radius around an area:
var myCity = new google.maps.Circle({center:amsterdam,radius:20000});
Set the locations of a trip (3):
var myTrip = [stavanger,amsterdam,london];
Set the variable position to the current zoom:
var pos = map.getZoom();
Allow zoom control:
zoomControl: true
Allow zoom control options:
zoomControlOptions: {}
A MapOptions object that holds the map initialization variables/options:
MapOptions
Call the script to allow google maps to run:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>