Menu
  • HOME
  • TAGS

Google map v3 remove last line from poliline

Tag: google-maps-api-3

My script adds markers to the map. When I want remove the last I click back button http://tests.uk4u.pl/goomap/goomap_markers/ Everything works OK but I started something similar with poliline. After many possible changes of my code I cant achieve the same like with my markers. I want remove last line of poliline with back button. After removing last one I want to have possibility to start from this point like with my markers. Please help me cos I cant find solution anywhere and I tried last two days.

var testInput;
var path=[];
var map;
var mapOptions = {
        center: new google.maps.LatLng(53.153691, -2.011640),
        zoom: 15
    };

var poly;
var polyOptions = {
        strokeColor: 'red',
        strokeOpacity: 0.8,
        strokeWeight: 4
    };

function initialize() {

    testInput = document.getElementById('test_input');
    testInput.value = '';   

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

    map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById('menu'));

    poly = new google.maps.Polyline(polyOptions);

    google.maps.event.addListener(map, 'click', function(event) {


        poly.setMap(map);

        var myLatLng = event.latLng;
        var lat = myLatLng.lat();
        var lng = myLatLng.lng();

        addLatLng(event);

    });
    path = poly.getPath();
    function addLatLng(event) {

        path.push(event.latLng);
        testInput.value = path.toString();
    }   
}
function deleteMarker() {

        poly.setMap(null);//remove from map
        path = [];

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

Best How To :

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:)

Android SharedPreference Ghost Number?

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...

Raty Star rating in Google map infowindow

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...

Hidden labels reappear when switching to satellite view

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...

Get Array of all points of Polygon - Google Maps Drawing Tool API-3

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...

unable to hide two dimensional marker array in Google API 3

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...

google map in asp.net page

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...

Google map api load grey map instead of map images

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...

Toggle custom legend on google maps using a radio button

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 =...

Load Google Maps markers via ajax

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:...

SVG Marker on Google Maps Not Appearing

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...

Reverse GeoCoordinate Class gives Location Not found error

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)...

How to add a multiple marker to a moving location google map,Javascript

javascript,google-maps-api-3

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 } }...

export KML google map

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...

Google Maps numbered markers all displaying same number

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' +...

Google map v3 remove last line from poliline

google-maps-api-3

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:)...

Google maps styled marker z-index change not working

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); ...

google maps scaleControlOptions changing position of scale on map

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....

Google Map API: Why we need to set title for Marker object?

javascript,google-maps-api-3

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. ...

Leaving a function to hide the map causes it to show a wrong location as its centre

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()...

Use Google Map V3 API ClientID in Application with no URL

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...

Geocode rest api - filter for only latitude and longitude

google-maps,google-maps-api-3

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.

Laravel and Geocoding markers (nearby users) do not update correctly

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...

Page reloads if a second textSearch performed

google-maps-api-3

your button click is submitting a form which is causing the page to reload.

Google maps not working in Firefox (gray box)

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 ...

Facing error on Maps API v3 Places Autocomplete Form

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....

Dynamically change Google Maps icon by type in array data

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...

How to fully disable streetview from google maps

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)...

google maps refresh without displaying gray

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...

How to update kml file/layer dynamically?

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())}); } }...

Google Maps API Remove stored markers

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...

Google MarkerClusterer does not show the markers

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 }); ...

Creating a text input field precisely where a user clicks on a Google Map

google-maps,google-maps-api-3

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...

Google Maps adding marker from ajax using jquery

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...

Geoxml3 CreatePolygon function

google-maps-api-3,geoxml3

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...

Add Marker in Angular-Google-Maps

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:...

Google map infowindow position on custom marker

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,...

Calculate driving distance between user location and many destinations via javascript loop

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...

Attaching different infowindows to group of polygons google maps

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...

Pop-up info box in google maps

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....

skip or disable google maps marker that are close in radius 5 to 10 meter

php,arrays,google-maps-api-3

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...

HTML5, geolocation in real time with marker

javascript,html5,google-maps-api-3,marker

Insert a button for refresh and solve the problem..

ACF Multiple Map Markers

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...

Cant zoom in and out of google map

javascript,google-maps-api-3

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> ...

Touch events for google maps on mobile

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...

Can I set the stroke style in Google Maps Data Layers?

javascript,google-maps-api-3

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.

Add Google map or bing as base layer in ArcGIS api for android

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...

How can I display the full state/province instead of just the abbreviation when a user chooses an address in google autocomplete API.

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...

Usage of Google Maps API Key v3

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...

How to implement centered marker in Google Maps API v3 with Ionic & Angular

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...

GoogleMaps markers don't work

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...