google-maps-api-3

Using Address Instead Of Longitude And Latitude With Google Maps API

See this example, initializes the map to “San Diego, CA”. Uses the Google Maps Javascript API v3 Geocoder to translate the address into coordinates that can be displayed on the map. <html> <head> <meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”/> <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/> <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title> <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script> <script type=”text/javascript”> var … Read more

How to use SVG markers in Google Maps API v3

You can render your icon using the SVG Path notation. See Google documentation for more information. Here is a basic example: var icon = { path: “M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0”, fillColor: ‘#FF0000’, fillOpacity: .6, anchor: new google.maps.Point(0,0), strokeWeight: 0, scale: 1 } var marker = new google.maps.Marker({ position: event.latLng, map: map, draggable: … Read more

Places for Android API deprecated alternative

Google Places SDK for Android is Deprecated, so we need to migrate for Places API. For implementing AutoComplete Place using new Places API.. please follow below steps. First enable PlacesAPI in developer console, then install Client Library by updating in gradle. (Note: You can only install either the client library or the compatibility library, NOT … Read more

How to limit google autocomplete results to City and Country only

You can try the country restriction function initialize() { var options = { types: [‘(cities)’], componentRestrictions: {country: “us”} }; var input = document.getElementById(‘searchTextField’); var autocomplete = new google.maps.places.Autocomplete(input, options); } More info: ISO 3166-1 alpha-2 can be used to restrict results to specific groups. Currently, you can use componentRestrictions to filter by country. The country … Read more

Google Maps API: No ‘Access-Control-Allow-Origin’ header is present on the requested resource

https://maps.googleapis.com/maps/api doesn’t support getting requests from frontend JavaScript running in web apps in the way your code is trying to use it. Instead you must use the supported Google Maps JavaScript API, the client-side code for which is different from what you’re trying. A sample for the Distance Matrix service looks more like: <script> var … Read more

Google Maps Api v3 – find nearest markers

First you have to add the eventlistener google.maps.event.addListener(map, ‘click’, find_closest_marker); Then create a function that loops through the array of markers and uses the haversine formula to calculate the distance of each marker from the click. function rad(x) {return x*Math.PI/180;} function find_closest_marker( event ) { var lat = event.latLng.lat(); var lng = event.latLng.lng(); var R … Read more

Google Maps API v3: How to remove all markers?

Simply do the following: I. Declare a global variable: var markersArray = []; II. Define a function: function clearOverlays() { for (var i = 0; i < markersArray.length; i++ ) { markersArray[i].setMap(null); } markersArray.length = 0; } OR google.maps.Map.prototype.clearOverlays = function() { for (var i = 0; i < markersArray.length; i++ ) { markersArray[i].setMap(null); } … Read more