Reset markers icon in google maps v3 Javascript - google-maps-api-3

I am changing the icon for the current selected marker with something like this:
var icon_active = {
url: '/2018/images/map/location.png',
size: new google.maps.Size(32, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(16, 42)
};
markers[window.VARS.marker_currently_open].setIcon(icon_active);
The problem I'm having, is how to reset it back to what it was before? I've tried to find a list of the standard icons, ie:
Could anyone advise me on how to do this? What I was trying to find was a list of the different (default) icons that are available, and find the standard one?

To set the default icon, call marker.setIcon(null).
i.e.:
markers[window.VARS.marker_currently_open].setIcon(null);
proof of concept fiddle
code snippet:
var markers = [];
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
})
markers.push(marker);
window.VARS = {
marker_currently_open: 0
}
var icon_active = {
url: 'http://maps.google.com/mapfiles/ms/micons/blue.png',
size: new google.maps.Size(32, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(16, 42)
};
markers[window.VARS.marker_currently_open].setIcon(icon_active);
setTimeout(function() {
markers[window.VARS.marker_currently_open].setIcon(null);
}, 5000);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

Related

How to get true centerpoint of offset marker

I don't think this has been asked before - I can't find any answers to this through searching SO and Google, and I find this sort of odd so maybe I'm overlooking something..
Anyways, I am creating a pretty standard series of markers based on lat/lng coordinates, although very often the markers will "stack" on top of each other, since they are at the same lat/lng coordinates. We aren't looking to cluster the markers when this happens, we are offsetting them instead so they appear side by side.
The problem I'm having though, is when I call marker.getPosition to get the lat/lng object of the marker's position, it isn't taking into account the offset. It's giving the original lat/lng coordinates of the centerpoint of where the marker was placed before it was offset.
Is there a way I can find the TRUE centerpoint of a marker, taking its offset into account? I know what the offset is in pixels, if that helps.
Here's a code snippet of what I'm doing
var marker = new google.maps.Marker({
map: obj.map,
position: latlng,
icon: {
url: obj.icon,
size: new google.maps.Size(72, 72),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(obj.offset_x, obj.offset_y),
scaledSize: new google.maps.Size(25, 25)
},
title: obj.title,
zIndex: obj.zIndex
});
var latlng = marker.getPosition();
So when I do
var lat = latlng.lat();
var lng = latlng.lng();
it seems like I get the position of the marker, and not the offset position of the icon that represents the marker. Does anyone know how I can get the offset position of the icon as a latlng object?
You can compute the position:
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
var markerPt = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition());
var point = new google.maps.Point(markerPt.x - obj.offset_x + 12.5, markerPt.y - obj.offset_y + 25);
proof of concept fiddle
code snippet:
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
var obj = {
map: map,
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png",
offset_x: 100,
offset_y: 50,
title: "marker",
zIndex: 0
}
var latlng = {
lat: 37.4419,
lng: -122.1419
};
var marker = new google.maps.Marker({
map: obj.map,
position: latlng,
icon: {
url: obj.icon,
size: new google.maps.Size(72, 72),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(obj.offset_x, obj.offset_y),
scaledSize: new google.maps.Size(25, 25)
},
title: obj.title,
zIndex: obj.zIndex
});
var center = new google.maps.Marker({
map: map,
position: latlng,
icon: "http://maps.google.com/mapfiles/ms/micons/green.png",
title: "center",
draggable: true
});
google.maps.event.addListener(overlay, "projection_changed", function() {
// if (!overlay.getProjection()) return;
var markerPt = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition());
console.log("markerPt=" + markerPt.toString());
// extra offset to bottom middle of marker (12.5, 25)
var point = new google.maps.Point(markerPt.x - obj.offset_x + 12.5, markerPt.y - obj.offset_y + 25);
console.log("point=" + point.toString());
var latLng = overlay.getProjection().fromDivPixelToLatLng(point);
console.log("latLng=" + latLng.toUrlValue(6));
var newMark = new google.maps.Marker({
map: map,
position: latLng,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(3.5, 3.5)
}
});
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(newMark.getPosition().toUrlValue(6));
infowindow.setOptions({
pixelOffset: new google.maps.Size(0, -25)
});
infowindow.setPosition(newMark.getPosition());
infowindow.open(map);
});
var latlng = marker.getPosition();
console.log("latlng=" + latlng.toUrlValue(6));
var infowindow = new google.maps.InfoWindow();
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

Googlemap shows grey box on all browsers

I have a simple test site to show google map here:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script>
<script src="js/GoogleMap/GoogleMap_thread_view.js"></script>
<link href="js/GoogleMap/GoogleMap.css" rel="stylesheet" />
<script type="text/javascript">$(document).ready(function () {
$("#googlemap").GoogleMap({addr: "105K Ho Thi Ky Phuong 1 Quan 10 Ho Chi Minh", lat: 43.37049234, lng: 30.3480382});
/*var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('googlemap'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});*/
});</script>
</head>
<body style="width: 1000px; height: 600px;">
<div id="googlemap" style="width: 1000px; height: 600px; ">abc</div>
</body>
</html>
The page just shows grey div without map.
I searched around on this site but nothing works (resize window event, overflow: visible, width: 100% ... etc ...)
The thing is when I uncomment the Google's sample code, it works. So there must be something wrong with my script, file GoogleMap_thread_view.js
(function ($) {
var map, place, myMarker;
$.widget('4phuong.GoogleMap', {
options: {
addr: 'unknown',
lat: 0,
lng: 0,
zoom: 2
},
_create: function () {
var $widget = this;
$widget.element.children().hide();
$widget._$container = $('<div class="googlemap-container"><div class="map-canvas"></div></div>');
$widget.element.append($widget._$container);
var mapOptions = {
center: new google.maps.LatLng($widget.options.lat, $widget.options.lng),
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_BOTTOM
},
mapTypeControl: false,
streetViewControl: false
};
map = new google.maps.Map(document.getElementsByClassName('map-canvas')[0], mapOptions);
myMarker = new google.maps.Marker({
map: map,
title: $widget.options.addr,
position: new google.maps.LatLng($widget.options.lat, $widget.options.lng)
});
},
destroy: function () {
this._$container.remove();
$.Widget.prototype.destroy.apply(this, arguments);
this.element.show();
},
control: function () {
return this._$control;
}
});
}(jQuery));
Could someone please tell me where I am wrong?
I know the reason. It's because I didn't give value to the field "zoom" when creating map. It should look like below
var mapOptions = {
center: new google.maps.LatLng($widget.options.lat, $widget.options.lng),
zoom: $widget.options.zoom,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_BOTTOM
},
mapTypeControl: false,
streetViewControl: false
};
It's really stupid as Google should make default value for it.

svg static image within the area of a polygon

How do I get the svg image is static when I zoom in on the map, which always remains in the same place.
This is my fiddle
If I use png images works , but it is not visually well for me and is not what i'm looking for.
Help is appreciated
Sorry for my english.
new Fiddle
The anchor is expected to be a Point, not a LatLng.
The default-acnchor is the bottom-middle of the icon, as it seems you need to set it to the top-left, so it has to be:
new google.maps.Point(0,0)
When you want to have a scaled icon based on the zoom you must calculate the scale-property and re-assign the icon to the marker.
The formula would be(assuming the scale-factor at zoom 12 is 1):
Math.pow(2,map.getZoom()-12)
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-32.95041520, -60.66641804),
zoom: 12,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
triangleCoords = [
new google.maps.LatLng(-32.93831432, -60.69379806),
new google.maps.LatLng(-32.96337859, -60.67860603),
new google.maps.LatLng(-32.96352262, -60.66633224),
new google.maps.LatLng(-32.95041520, -60.66641807)
];
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
IsInactivo: true
});
bermudaTriangle.setMap(map);
var bounds = new google.maps.LatLngBounds();
var i;
for (i = 0; i < triangleCoords.length; i++) {
bounds.extend(triangleCoords[i]);
}
console.log(bounds.getCenter());
centroPolygon = bounds.getCenter();
var inactive = new google.maps.MVCObject();
inactive.set('icon', {
path: 'M27.314 4.686c-3.022-3.022-7.040-4.686-11.314-4.686s-8.292 1.664-11.314 4.686c-3.022 3.022-4.686 7.040-4.686 11.314s1.664 8.292 4.686 11.314c3.022 3.022 7.040 4.686 11.314 4.686s8.292-1.664 11.314-4.686c3.022-3.022 4.686-7.040 4.686-11.314s-1.664-8.292-4.686-11.314zM28 16c0 2.588-0.824 4.987-2.222 6.949l-16.727-16.727c1.962-1.399 4.361-2.222 6.949-2.222 6.617 0 12 5.383 12 12zM4 16c0-2.588 0.824-4.987 2.222-6.949l16.727 16.727c-1.962 1.399-4.361 2.222-6.949 2.222-6.617 0-12-5.383-12-12z',
fillColor: '#FF5858',
fillOpacity: 0.4,
scale: 1,
strokeColor: '#FF5858',
strokeWeight: 1,
//set the anchor to the top left corner of the svg
anchor: new google.maps.Point(0, 0)
});
google.maps.event.addListener(map, 'zoom_changed', function() {
inactive.get('icon').scale = Math.pow(2, this.getZoom() - 12);
//tell the marker that the icon has changed
inactive.notify('icon');
});
google.maps.event.trigger(map, 'zoom_changed');
new google.maps.Marker({
map: map,
position: centroPolygon
}).bindTo('icon', inactive, 'icon');
}
google.maps.event.addDomListener(window, 'load', initialize)
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?v=3&.js"></script>
<div id="map-canvas"></div>

Implementing MarkerClusterer into Google Maps API - no markers showing

I have been trying to implement markerclusterer into my website for the past few weeks and everything I have tried has failed. I have no experience with code at all so everything I've been doing is trial and error.
The website I'm trying to add markerclusterer to is rfmaps.com.au.
I'm unsure as to what I'm doing wrong, and what needs to be fixed and really just need some good advice and help.
Here is the html code that I've been trying to get working. This code is simply all the bits and pieces I've been able to find from forums, all stuck together, and slightly edited (what I could figure out from help from forums)
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-25, 133),
zoom: 5,
mapTypeId: google.maps.MapTypeId.HYBRID
});
for (var i = 0; i < 1000; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
markers.push(marker);
}
var map = new google.maps.Map(document.getElementById("map"), options);
var mc = new MarkerClusterer(map);
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'col2'",
from: '1UxncvVQSGcSvuN3t686sNuDQUsn8vQ6mws3zsvk'
},
map: map,
styleId: 4,
templateId: 1
});
}
function changeMapl0() {
var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
layerl0.setOptions({
query: {
select: "'col2'",
from: '1UxncvVQSGcSvuN3t686sNuDQUsn8vQ6mws3zsvk',
where: "'Location' CONTAINS IGNORING CASE '" + searchString + "'"
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label>Location</label><input type="text" id="search-string-l0">
<input type="button" onClick="changeMapl0()" value="Search">
</div>
</body>
</html>
I think you have not added the 'map' object while creating the markers inside the map.
This is your code:
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
Please add map: map while generating your markers, like this:
var marker = new google.maps.Marker({
map: map,
position: latLng,
draggable: true,
icon: markerImage
});
Regarding marker cluster you need to add this js file- markerclusterer.js
markerCluster = new MarkerClusterer(map, marker);

Google maps js api v3: grey map in chrome

Im having some problems with a street view map: http://server.patrikelfstrom.se/johan/fysiosteo/?page_id=118
Sometimes the window gets grey instead of showing the streetview. So my question is; Is there any way to know when the map has finished loading? I guess its treying to render the map before its completly loaded? Thanks
function initialize() {
var myLatlng = new google.maps.LatLng(57.6988062, 11.9683293);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP,
title:"Fysiosteo"
});
var panoramaOptions = {
position: myLatlng,
addressControl: false,
pov: {
heading: 90,
pitch: 0,
zoom: 0
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
map.setStreetView(panorama);
google.maps.event.addListener(panorama, 'idle', function() { console.log('done'); });
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
I tried with this code to print "done" to the console when the map has finished loading, but it didnt work. Am i doing it wrong? :)
The answer to your specific question ("Is there any way to know when the map has finished loading?") is: Yes. When a Map object is finished loading, it will trigger an idle event. Documentation of events that a Map object fires can be found at http://code.google.com/apis/maps/documentation/javascript/reference.html#Map.

Resources