javascript,google-maps,google-maps-api-3
You'll want to read this: https://developers.google.com/maps/documentation/javascript/infowindows Steps below with comments: Construct an infoWindow object new google.maps.InfoWindow() In the creation of each marker bind a click event to that marker. Pass at a minimum, the marker you created to that callback through a closure. The callback will setContent of the infoWindow....
So firstly setup the map and marker as global variables: <script> var map, marker; ... </script> Refactor your initialize function to create them: function initialize() { var myLatlng = new google.maps.LatLng(33.8903964, 35.497148); var myOptions = { center: myLatlng, zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL } }...
As far as my understand, you have unlimited access to Google Maps using Android or iOS API. The API key is for tracking purpose only.
jquery,google-maps,google-maps-api-3,autocomplete
I think that you're getting the null pointer when it is attempting to assign the country. Try adding in field for the country, such as <div class="form-group"> <label class="control-label">Country</label> <input type="text" name="country" id="country" value="" placeholder="" class="form-control" maxlength="15"/> </div> When I added that to the JSFiddle you submitted, it worked correctly....
javascript,jquery,google-maps,google-maps-api-3
Edit: Turns out you have to set the .ajaxComplete handler before you make the ajax request since you have set async to false. Here is a working example. I would suggest saving the markers in an array if you intend to use the markers later on(i.e.: move them, or remove...
javascript,google-maps,google-maps-api-3,infowindow
Probably the easiest way would be to modify markerOnClick function, in that case once the next info window will be initialized the current (currentInfoWindow) will be closed: self.markerOnClick = function (cj) { // when a marker is clicked if (currentInfoWindow) currentInfoWindow.close(); //close current info window currentInfoWindow = cj.infowindow; //save current...
google-maps,google-maps-api-3,label
The Label javascript depends on the Google Maps Javascript API v3 which you are loading dynamically. You need to load label.js after the Google Maps Javascript API is loaded. The simplest fix is to not load it dynamically. working fiddle code snippet: var map; //0.574853, 123.048032 var data = '[{"id":"1","latitude":"0.57","longitude":"123.04","no_tiang":"stuff...
javascript,google-maps,google-maps-api-3
If you don't want the HYBRID map type available, remove it from the types available. https://developers.google.com/maps/documentation/javascript/maptypes The following map types are available in the Google Maps API: MapTypeId.ROADMAP displays the default road map view. This is the default map type. MapTypeId.SATELLITE displays Google Earth satellite images MapTypeId.HYBRID displays a mixture...
javascript,google-maps,google-maps-api-3,svg
After @geocodezip mentioned that it looked too big, I found the solution from another stackoverflow post. Even though I had tried to resized the image in Inkscape to be a small 24 pixel icon, this wasn't sufficient to make the icon appear at all. I found this post, which was...
css,google-maps,google-maps-api-3,jquery-gmap3
to apply css on a marker, you can try the following method to include var marker = new MarkerWithLabel. Link
google-maps,google-maps-api-3,maps,geocoding
If what you mean is "is it possible to get boundaries of any place returned by Google Places API as we can see in Google Maps ?", the answer is no, you have to use KML files describing the polygon representing the boundaries of the place. Depending of what you...
javascript,angularjs,google-maps,google-maps-api-3,ionic
This should do the trick. Javascript var options = { timeout: 10000, enablehighAccuracy: false }; $cordovaGeolocation.getCurrentPosition(options) .then(function(position) { var myLat = position.coords.latitude; var myLong = position.coords.longitude; console.log(myLat, myLong); var center = new google.maps.LatLng(myLat, myLong); var mapOptions = { center: center, zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: false, mapTypeControl: false, zoomControl: false...
javascript,google-maps,google-maps-api-3
Try this: function initialize() { var mapOptions = { zoom: 9, center: new google.maps.LatLng(-33.9, 151.2), }; var mapElement = document.getElementById('googlemap'); var map = new google.maps.Map(mapElement, mapOptions); setMarkers(map, locationSet); google.maps.event.addDomListener(window, "resize", function() { var center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); }); } // Locations var locationSet = [ ['Bondi Beach', -33.890542,...
javascript,jquery,google-maps,google-maps-api-3
First, it is not true that you have to load the Maps API asynchronously when you want to create a map dynamically. You can load the API either using the asynchronous method or with a conventional <script> tag. Loading the API does not create a map; it merely loads the...
There is no div with id="mapbox' on your page (it has a class of "mapbox"). It works if you use getElementsByClassName('mapbox')[0] to get the reference to the map (and give it a reasonable height). function initialize() { var mapOptions = { center: { lat: -34.397, lng: 150.644 }, zoom: 8...
javascript,google-maps,google-maps-api-3
You can use function closure to associate the number with the request: function geocodeAddress(x, map) { //populate the map based on addresses using the geocoder to look up lat/lng $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x].ADDRESS +'&sensor=false', null, function (data) { var p = data.results[0].geometry.location; var latlng = new google.maps.LatLng(p.lat, p.lng); var image = 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/marker' +...
javascript,html,google-maps,google-maps-api-3,coordinates
create a polyline (See the documentation for options availble) var polyline = new google.maps.Polyline({ // set desired options for color, opacity, width, etc. strokeColor:"#0000FF", // blue (RRGGBB, R=red, G=green, B=blue) strokeOpacity: 0.4 // opacity of line }); // create the polyline (global) var path = []; // global variable...
google-maps,google-chrome,google-maps-api-3,printing,webkit
I found workaround for what I think is a bug in WebKit. Since caching of map tiles didn't seem to be the problem, I started playing around with CSS display and position properties. Adding display:inline-block; to my .map_canvas seems to solve the problems in the printout… The tiles are now...
javascript,google-maps,google-maps-api-3,key,quota
The quota belongs to "projects", so you may say it's specific to a key, because each project does have it's own key. When you can't give a guarantee that access to your key will be granted in the future you should either not use a key or force the client...
Because path is an MVCArray, we can simply remove the last coordinate by path.pop() and it will automatically disappear. I have a quick demo, which is modified from the documentation's example: http://jsfiddle.net/cx5n29ff/ Hope it helps:)...
javascript,html5,google-maps,google-maps-api-3,html5-canvas
According to the documentation: scaleControl enables/disables the Scale control that provides a simple map scale. By default, this control is not visible. When enabled, it will always appear in the bottom right corner of the map. So unfortunately, you won't be able to put it in the bottom left position....
javascript,json,google-maps-api-3
Rather than a distance matrix, you should use the Directions Service in Google Maps JavaScript API to calculate a path between your user's location and your hospital. The function: directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { return a response, with multiple routes. And the distance of the first...
javascript,google-maps,google-maps-api-3
You could consider the following approach: generate marker collection per every location display a marker using marker.setVisibility(value) Example var markers = []; function initialize() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 6, center: new google.maps.LatLng(59.526964, 23.617352), mapTypeId: google.maps.MapTypeId.ROADMAP }); var startPos = new google.maps.LatLng(60.174039, 24.940939); var endPos = new...
javascript,css,google-maps,google-maps-api-3
Set the pixelOffset of the InfoWindow appropriately: From the documentation on InfoWindows pixelOffset | Type:Size | The offset, in pixels, of the tip of the info window from the point on the map at whose geographical coordinates the info window is anchored. If an InfoWindow is opened with an anchor,...
javascript,html,google-maps-api-3,google-maps-markers
create an array to hold references to the google.maps.Marker objects in the global scope: var gmarkers = []; push your markers onto that array when you create them: function addMarker(i) { var draftMarker = markers[i]; var myLatLng = new google.maps.LatLng(draftMarker[1], draftMarker[2]); var marker = new google.maps.Marker({ position: myLatLng, map:...
javascript,jquery,google-maps,google-maps-api-3
Set the center of the map once it has a size. Call .show, trigger resize, then center the map (otherwise it centers in a zero size map in the upper left hand corner of your div...) function showMap() { $("#mymap").show(); google.maps.event.trigger(map, 'resize'); map.fitBounds(bounds); } working fiddle code snippet: function hideMap()...
google-maps,google-maps-api-3,google-street-view
2 possible options(there may be more): prevent the streetView from being visible: google.maps.event.addListener(map.getStreetView(), 'visible_changed', function(){ if(this.getVisible()){this.setVisible(false)} }); try to make the streetview-link in the infowindow un-clickable .gm-sv-label{display:none;} .gm-wsv{pointer-events:none;} I would suggest to use both options together, because the 2nd option may fail in the future(the classNames may change)...
javascript,codeigniter,google-maps,google-maps-api-3
You can use the $config['zoom'] = 'auto'; It'll act like the fitbound function of the JS map library. You can also set he minimum zoom level to get the not very deep zoom and for good user experience....
javascript,google-maps,google-maps-api-3,google-maps-markers
This is not a solution, and a bit half-assed. A year old nodejs-project I dug up. Maybe it can give you a few ideas. Yeah, I realize you want a browser solution. (Sorry!) Browser javascript doesn't work with files very well. But you absolutely can use data URI to make...
javascript,google-maps,google-maps-api-3,google-polyline
google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) { // assuming you want the points in a div with id="info" document.getElementById('info').innerHTML += "polygon points:" + "<br>"; for (var i = 0; i < polygon.getPath().getLength(); i++) { document.getElementById('info').innerHTML += polygon.getPath().getAt(i).toUrlValue(6) + "<br>"; } }); proof of concept fiddle code snippet: var geocoder; var map; var...
android,google-maps-api-3,arcgis
Use the BingMapsLayer class to add a Bing Maps layer to the MapView. You'll need to obtain a Bing Maps key from Microsoft. There's no direct interface for adding Google Maps to the MapView. But you could try extending TiledServiceLayer if you must use Google Maps. Do a web search...
As far as I remember, there's no other possibility. That's the standard return value. Try to use a filter in your program. You could split CSV file and cut off the needed part.
javascript,google-maps,google-maps-api-3
You can use Symbols function pinSymbol(color) { return { path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z', fillColor: color, fillOpacity: 1, strokeColor: '#000', strokeWeight: 2, scale: 1 }; } example fiddle code snippet: var data = [ /* ['Lat', 'Long', 'Name',...
javascript,jquery,ajax,google-maps,google-maps-api-3
You are calling map.fitBounds(bounds) in each iteration of your loop. Move this call after the loop instead of calling it each time. You need all of the points added to the bounds before calling fitBounds(). Also, there is a large chunk of code duplicated between your two blocks of code....
Read the comments in the code, for explanations. <html> <head> <title></title> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> <style type="text/css"> #googlemap { width:100%; height:100%; position: absolute; top:0px; left:0px; } </style> <script type="text/javascript"> var infowindow = null; var markers = []; // we store the marker objects here, so we can see which one is...
The value you are receiving from your SelectToken is in metres. To change that to miles you should multiply that value by 0.00062137. distance = (int)o.SelectToken("routes[0].legs[0].distance.value"); return distance*0.00062137; ...
android,google-maps-api-3,sharedpreferences
Sometimes you get tunnel vision with these kind of things but I did see something immediately. 59.4185 ends with 5 16.403 ends with 3 (it's also strangely only 3 decimals) = 35 I'm pretty sure your readLine() methods are to blame, you probably initialized them incorrectly somehow. I would also...
javascript,angularjs,google-maps,google-maps-api-3
I have created the fiddle. Here is the HTML. <div ng-app="main" ng-controller="mainCtrl"> <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" events="map.events"> <ui-gmap-marker ng-repeat="m in map.markers" coords="m.coords" icon="m.icon" idkey="m.id"></ui-gmap-marker> </ui-gmap-google-map> </div> The controller is like this. angular.module('main', ['uiGmapgoogle-maps']) .controller('mainCtrl', function ($scope) { angular.extend($scope, { map: { center: { latitude:...
From https://developers.google.com/maps/documentation/javascript/markers: The marker's title will appear as a tooltip. If you do not wish to pass any Marker options in the marker's constructor, instead pass an empty object {} in the last argument of the constructor. ...
your button click is submitting a form which is causing the page to reload.
javascript,google-maps,google-maps-api-3,meteor
Change this line: heatMapLayer.setMap(issueMap); to heatMapLayer.setMap(issueMap.instance); The setMap method requires a google map instance. the callback of .ready does not directly provide this as it also has an options object for extra convenience. I confirmed it works on your site: ...
To display the map again call directionDisplay.setMap(map). map must be in the global scope (as does directionsDisplay). var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.850033, -87.6500523); var mapOptions = { zoom: 7, center: chicago }; map =...
javascript,google-maps,google-maps-api-3
markers is a DOMNodeList, which doesn't have a method push Create an array and populate the array with the google.maps.Marker's var markers = xml.documentElement.getElementsByTagName("marker"), markerArray=[]; for (var i = 0; i < markers.length; i++) { /** * your code **/ //markers.push(marker);<--error, remove it, currently the script will stop here markerArray.push(marker);//add...
javascript,google-maps,google-maps-api-3,geojson,infowindow
it should be: + "<img src= '" + myIMAGE + "' alt='Dale la Cara AC'>" currently you set the src of the <img/> to the string myIMAGE and not the the value of the variable myIMAGE...
javascript,google-maps,google-maps-api-3
If you want to turn on and off the items you should first collect them in arrays of objects and then recursively should be assigned to each of these items the value null for map with the overlay's setMap() method in this case yourObj.setMap(null);. To turn them on just reassign...
css,asp.net,vb.net,google-maps-api-3
When you use percentual values in CSS the parent element of the particular element needs to have the particular property(height in this case) set, otherwise the browser is not able to calculate the value for the property. The parent element of #map-canvas is form#form1 , and it doesn't have a...
add an infowindow with a form at the point clicked var formStr = "<input type='text' id='text4mrkr' value='marker text' /><input type='button' value='submit' onclick='addPlace();' />" google.maps.event.addListener(map, 'click', function (e) { infowindow.setContent(formStr); infowindow.setPosition(e.latLng); infowindow.open(map); }); capture the data from the form and add (in this case) a marker with an infowindow containing...
javascript,jquery,mongodb,google-maps,google-maps-api-3
You can first set the visibility of the div which contains map to hidden; then listen to the first tilesloaded event, and set the visibility back to visible. Doing this the Maps should only pop up after all it tiles is loaded (so no gray screen) Here is a quick...
google-maps,google-maps-api-3,geojson,points
Surfing the web I found an example that I adapted to your needs. I hope you will be useful. <!DOCTYPE html> <html> <head> <title>Simple json test</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> </head> <body>...
javascript,google-maps,google-maps-api-3
define directionsDisplay only 1 time(outside of the click-handler)
android,api,google-maps,google-maps-api-3,reverse-geocoding
Make sure you have latest Google play library in your project. I am using this code and working for me. private class ReverseGeocodingTask extends AsyncTask<LatLng, Void, String> { Context mContext; public ReverseGeocodingTask(Context context) { super(); mContext = context; } // Finding address using reverse geocoding @Override protected String doInBackground(LatLng... params)...
c#,google-maps,google-maps-api-3
I think it is the componentForm you have to change. in the documentation's example, https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform componentForm is setted as follow: var componentForm = { street_number: 'short_name', route: 'long_name', locality: 'long_name', administrative_area_level_1: 'short_name', country: 'long_name', postal_code: 'short_name' }; if I change administrative_area_level_1 from 'short_name' to 'long_name', then the states would be...
javascript,google-maps-api-3,markerclusterer
Not checked but I see the code where you are creating marker in loop. Here position should refer to placeLoc and not latLng var marker = new google.maps.Marker({ position: placeLoc }); ...
jquery,ajax,google-maps,symfony2,google-maps-api-3
Your problem is in the wrong scope. You declared var marker inside function definition. Outside of the function it will not exist. But you need it in the outer scope. Try declare it before closure: $(document).ready(function() { var myLatlng = new google.maps.LatLng(49.47143, 11.107489999999984); var mapOptions = { zoom: 8, center:...
javascript,google-maps,google-maps-api-3
from the documentation addListenerOnce(instance:Object, eventName:string, handler:function(?)) Return Value: MapsEventListener Like addListener, but the handler removes itself after handling the first event. google.maps.event.addListenerOnce(map,'bounds_changed', function() {}); ...
Building off Vasil's answer google.maps.event.addListener(MAP, "tilesloaded", function(){ [].slice.apply(document.querySelectorAll('#map a')).forEach(function(item) { item.setAttribute('tabindex','-1'); }); }) Here is it in action....
google-maps,google-maps-api-3,filter,markerclusterer
A look into the console would have been useful: ReferenceError: markerCluster is not defined the markerCluster-variable isn't accessible in Markers() remove var-keyword: var markerCluster = new MarkerClusterer(map,gmarkers,mcOptions);...
javascript,google-maps,google-maps-api-3,scoping
Using "this" inside a function does not return your main object. I changed your code by removing this.activeInfoWindow and changing it to myApplication.activeInfoWindow and now it works as expected. var data = { "cities": [{ "cityCntrLat": "45.49463", "cityCntrLng": "-73.57819", "censusName": "MONTREAL" }, { "cityCntrLat": "43.65674", "cityCntrLng": "-79.39819", "censusName": "TORONTO" },...
javascript,jquery,google-maps,google-maps-api-3
if you try this google maps event demo site on your phone/tablet, you would realize nothing happen even when you do a long click. It just means Google Maps support no tablet events. But with jQuery, you can detect a long click, or other "mobile only" events. However, jQuery has...
javascript,api,google-maps,google-maps-api-3,google-api-v3
There is a mistake in your code in the destinationGeocoder you must use address instead of destination the geocode property is always address destinationGeocoder.geocode( { 'address': destination }, function(results, status) { var addr_type = results[0].types[0]; // type of address inputted that was geocoded if ( status == google.maps.GeocoderStatus.OK ) ShowLocation(...
You can see the full definition of the StyleOptions object literal here. Unfortunately although you can set stroke width, colour and opacity, there is no way to specify broken strokes per your question.
android,google-maps,google-maps-api-3
In the same class that you implement onMapLongClick implement OnMarkerClickListener As such: public class MyMapView implements OnMarkerClickListener { ... @Override public boolean onMarkerClick(Marker marker) { // your code here return true; } ... } Then in the onMarkerClick(Marker marker) you can remove the marker. you remove the saved marker from...
cause no one trying to answer and just vote down to this question so I do some little trick for this in my .php files <!-- read json --> <?php $getjsonstring = file_get_contents('json.txt'); $arrayforcheck = array(); // hold value for check with in_array $arraytouse = array(); // result array will...
javascript,html,google-maps,google-maps-api-3,coordinates
Use lastCoordinates as an object, store for each coordinate a property in the object with a name based on the coordinate, e.g. x+'_'+y; Before you create a marker check if lastCoordinates already contains a property with the particular name: var lastCoordinates={}; function gotdata(){ if (xmlhttp.readyState == 4){ var d =...
The createPolygon function needs to return the resulting polygon to GeoXml3 so it can manage it. function addMyPolygon(placemark) { var polygon = geoXml.createPolygon(placemark); google.maps.event.addListener(polygon, 'click', function(event) { var myLatlng = event.latLng; infowindow.setContent("<b>"+placemark.name+"</b><br>"+placemark.description+"<br>"+event.latLng.toUrlValue(6)); infowindow.setPosition(myLatlng); infowindow.open(map); }); return polygon; }; Also, if you are going to use event inside the polygon...
javascript,google-maps-api-3,kml
There is a bug in the Google KML renderer. Issue 8015...
javascript,php,jquery,ajax,google-maps-api-3
You need to move the map initialization into your success callback. Otherwise the AJAX request begins, the map is initialized, and then your success callback fires off with the coordinates. function readyf() { var map; var info; var lat; var lon; function initialize() { $.ajax({ method: "POST", //dataType: "json", //type...
javascript,arrays,google-maps,google-maps-api-3
You can't hide a marker based on the elements in your array. They don't have .setMap methods. The markers need to be google.maps.Marker objects. When you create the markers, keep references to them in another array (say "gmarkers"), then use that to hide/show them. proof of concept fiddle (using your...
javascript,google-maps,google-maps-api-3
You can't pass a special set of coordinates to your Searchbox, nor to the Autocompelte field. However, you can limit your result to a type of area. All types are defined in the documentation. Depending of what you call "regions", you should take a look to restrict your search to...
Your code is fine. On your webpage you have much more stuff that interfere with the map. Remove col-xs-12 class from the div that surrounds map-canvas and it will work: <div class="content"> <div id="map-canvas"></div> </div> ...
Try this <!DOCTYPE html> <html> <head> <title>Simple click event</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> <script> var map function initialize() { var mapOptions = { zoom: 4, center: new google.maps.LatLng(-25.363882, 131.044922) }; map = new...
javascript,jquery,google-maps,google-maps-api-3
Solved this by replacing (for example): this.styleIcon.set('zIndex', google.maps.Marker.MAX_ZINDEX + 1); with this.set('zIndex', google.maps.Marker.MAX_ZINDEX + 1); ...
javascript,google-maps-api-3,laravel-5
It looks like the problem is that you are sending out the ajax request, but you are not doing anything with the returned data. Try changing $.ajax({ type: "POST", url: "updatenearbies/"+mapCenter.lat()+"/"+mapCenter.lng(), async: false }); to $.ajax({ type: "POST", url: "updatenearbies/"+mapCenter.lat()+"/"+mapCenter.lng(), success: function(data, textStatus, jqXHR) { // request succeeded // data...
javascript,google-maps,google-maps-api-3
You have your allowedBounds defined incorrectly. It should be (from the documentation): LatLngBounds(sw?:LatLng, ne?:LatLng) Constructs a rectangle from the points at its south-west and north-east corners. This: var allowedBounds = new google.maps.LatLngBounds( new google.maps.LatLng(85, -180), new google.maps.LatLng(-85, 180) ); Should be: var allowedBounds = new google.maps.LatLngBounds( new google.maps.LatLng(-85, -180), //sw...
javascript,google-maps,google-maps-api-3
If you want to have one marker per map, create a separate InfoWindow for each map, and associate it with the marker like you do the map. for (var i = 0; i < ListeDesPoints.length; i++) { marker[i] = new google.maps.Marker({ position: new google.maps.LatLng(ListeDesPoints[i]['lat'], ListeDesPoints[i]['lng']), title: ListeDesPoints[i]['address'] }); var max_lat...
javascript,google-maps,google-maps-api-3,webbrowser-control
about:blank is not a URL, it is in some sense the absence or a URL. In fact, loading the API from about:blank does not send a referer header, and window.location in about:blank is empty. What this means is that you cannot restrict your client id to a specific URL whitelist...
javascript,html,google-maps,google-maps-api-3,google-fusion-tables
Modified showHide function from this question (Simple setting off display: none / block with javascript): function showHide(id, btn) { var el = document.getElementById(id); var btns = document.getElementsByName(btn.name); for (var i=0; i<btns.length; i++) { if (btns[i].checked && btns[i].value == "ON") el.style.display = 'block'; if (btns[i].checked && btns[i].value == "OFF") el.style.display =...
javascript,android,ios,google-maps-api-3,web-applications
if you are talking about web app runs on the same devices, you can at least use some URL scheme to open the native Maps app. But there seems to have no way for returning the information back to your web app. (well, for the sign-in app, there seems to...
assign the json output to a javascript variable then you can do the following : var polylinePlanCoordinates = []; var polyline_data = <?php echo json_encode( $json ); ?>; for (var i=0;i< polyline_data.length;i++ ){ polylinePlanCoordinates.push(new google.maps.LatLng(polyline_data[i][0], polyline_data[i][1])); } var path= new google.maps.Polyline({ path: polylinePlanCoordinates, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight:...
javascript,html5,google-maps-api-3,marker
Insert a button for refresh and solve the problem..
javascript,arrays,google-maps,google-maps-api-3,polygons
Create a function to return the click listener function. Pass the index and the polygon into that function so you get function closure on them to keep them associated: function attachInfoWindow(newPoly, i) { return function (event) { var eventNo = newPoly.get("eventNum"); var outTime = newPoly.get("offTime"); var resTime = objArray[i].restoreTime; var...
php,mysql,google-maps,google-maps-api-3
You can update your content string to use hidden fields for lat and lng var contentString = '<form action="addlocation" method="POST">' + '<input type="hidden" name="lat" value="' + location.lat() + '" />' + '<input type="hidden" name="lng" value="' + location.lng() + '" />' + '<div id="addMarkerInfoWindow">' + '<b>Name:</b> <input type="text" name="name"><br>' + '<b>Facilities:</b> <input type="text"...
javascript,google-maps,google-maps-api-3,google-maps-markers
GoogleMap allows you to add event listeners to multiple markers. However, your code above won't work due to the fact that you are reusing the marker variable for all different markers. What you should be doing is, assign a marker variable for each of your objects. Don't reuse object_marker for...
javascript,google-maps,google-maps-api-3,infowindow,raty
Instead of using a string use a node to create the content(to be able to easily access the content via jQuery) store the rating as a attribute of the particular node(to be able to use a single function to create the stars) simple demo: function initialize() { var mapOptions...
javascript,jquery,google-maps,google-maps-api-3
You must also register the custom mapType for the map. Place this line after the line where you create the google.map.Map-instance: gmap.mapTypes.set('Styled', styledMapType); However, when you only want the map to appear in a single style you don't need to create a custom mapType, you may apply the styles directly...
javascript,google-maps,firefox,google-maps-api-3
innerText is not supported in Firefox. references: 'innerText' works in IE, but not in Firefox W3C DOM Compatibility - HTML ...
wordpress,google-maps,google-maps-api-3,acf
You can create a custom query and loop through all locations. var locations = [ <?php $args = array( 'post_type' => 'your_post_type', 'posts_per_page' => -1 ); $locations = new WP_Query($args); if($locations->have_posts()){ while($locations->have_posts()){ the_post(); $loc = get_field('location') ?> ['<?php echo get_the_title(); ?>', <?php echo $loc[0]; ?>, <?php echo $loc[1]; ?>], <?php...
google-maps,google-maps-api-3,google-places-api
Thanks for your question. Unfortunately there is no way of directly plotting PlaceIds on a map without also specifying a lat/lng. As you note the correct way to do this is to perform Places API lookups to resolve the PlaceId. The performance issue you mention is problematic for the number...
javascript,html,css,google-maps,google-maps-api-3
You have a couple of problems: The function initialize has not been called so the maps wont ever get generated. This can be called on window load by using google.maps.event.addDomListener(window, 'load', initialize); You are using the variables myLatlngOH, myLatlngCA and myLatlngUK to center the maps - they don't exist and...
javascript,arrays,google-maps,google-maps-api-3
You need to modify a little bit your code, this should do the trick: for (var i = 0; i < stories.length; i++) { var storydata = stories[i]; var iconString = ''; switch (storydata.type) { case 'Agrifood': iconString = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'; break; case 'Biotechnology': iconString = 'http://maps.google.com/mapfiles/ms/icons/pink-dot.png'; break; case 'BuiltEnvironment': iconString...
javascript,google-maps,google-maps-api-3,kml,parcel
geoxml3 parses the KML to native google.maps.Polygon objects. You can process those polygons in the afterParse function: var myParser = new geoXML3.parser({ map: map, afterParse: useTheData }); var kml = myParser.parse('kml/SO_20150619a.kml'); function useTheData(doc) { for (var i=0; i < doc[0].gpolygons.length; i++) { var centroid = new google.maps.Marker({map:map,position: get_polygon_centroid(doc[0].gpolygons[i].getPath().getArray())}); } }...