I know how to change icon on standard google map api v3.
Is there any way to change icons on map with directions?
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize(){
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions={
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel")
);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: 'marker/image.png',
title: 'Click to zoom'
});
google.maps.event.addListener(marker, 'click', function(){
map.setZoom(15);
map.setCenter(marker.getPosition());
});
google.maps.event.addDomListener(window, 'load', initialize);
}
function calcRoute() {
var start = document.getElementById("start").value;
var end = '-34.397, 150.644';
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
Above code display map with my custom icon marker but when I generate directions than on top of my custom marker I see another standard green maker with letter B.
How to overide that?
What you need to do is use the suppressMarkers option of the DirectionsRenderer, that will prevent it from adding any markers.
Example with custom icons, that doesn't use the DirectionsRenderer at all, it is from before that option was available.
Related
This code takes a big list of (400) markers and adds it to the map, at the end, it shows the whole map including all the markers.
What I have tried to achieve is: when geolocation is available, center the map on location, zoom to level 16 and refresh the map to show it, otherwise, let the whole big map show... I have read and tried many different things, but the geolocation must happen before the map is created. I want to make it happen after. I show you my code here and the temporary link to the working site: http://studioteknik.co/brasseursillimites.com/detaillants/
function initialize()
{
var map = new google.maps.Map(document.getElementById('map-canvas'));
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
for (var i in locations) {
var p = locations[i];
var latlng = new google.maps.LatLng(p[1], p[2]);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: p[0]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.title);
infowindow.open(map, this);
});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
Here is a simple example of geolocation. Just add the geolocation code anywhere after the map object is created. If the user doesn't allow geolocation, the map will be shown at the default location / zoom level.
function initialize() {
var mapOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(0,0)
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Geolocation code
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
map.setZoom(16);
});
}
}
initialize();
JSFiddle demo
I developed a map application using gmap2. I used a groundoverlay (a temperature map) to help users to determine the location of interest and click to select. After gmap2 being replaced by gmap3, it stops working. The bigger problem is that I could not find a way to add markers on the groundoverlay by clicking in gmap3. Someone raised a similar question, but no answer has been available. I hope that such a function is not lost in gmap3. Your help is appreciated.
enter code here
<script>
var map;
var mapCenter = new google.maps.LatLng(54.508742, -125.120850);
var pngBounds = new google.maps.LatLngBounds(new google.maps.LatLng(48.3367, -139.0402),
new google.maps.LatLng(59.99008, -114.1095));
function initialize() {
var mapProp = { center: mapCenter, zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var groundoverlay = new google.maps.GroundOverlay(
"http://www.genetics.forestry.ubc.ca/cfcg/ClimateBC40/overlays/climate/MAT_1961_1990.png", pngBounds);
groundoverlay.setMap(map);
google.maps.event.addListener(map, 'click', function (event) { placeMarker(event.latLng); });
}
function placeMarker(location) {
var marker = new google.maps.Marker({ position: location, map: map, draggable: true });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
In v3 you have to make the groundOverlay non-clickable
var groundoverlay = new google.maps.GroundOverlay(
"http://www.genetics.forestry.ubc.ca/cfcg/ClimateBC40/overlays/climate/MAT_1961_1990.png", pngBounds, **{clickable:false}**);
use below code as simple as that..
let overlayGeoMapImg = new google.maps.GroundOverlay(
'../assets/GNDVI.png',
imageBounds);
overlayGeoMapImg.setMap(map);
google.maps.event.addListener(overlayGeoMapImg, 'click', (event: any) => {
this.ngZone.run(() => {
marker = new google.maps.Marker({
position: event.latLng,
map: map,
title: 'Hello World!'
});
});
});
I want to import kml files that contains more than 2000 placemarks into googla map.
I use google api v3.
I can only show 200 placemarks.
I know that I can use more layers, but I want only one because I have to refresh it weekly and I don't want to split every time.
Thanks for your replays
THIS IS THE CODE:
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(47.25,19.5),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
loadKmlLayer(map);
}
function loadKmlLayer(map) {
var ctaLayer2 = new google.maps.KmlLayer('https://.../asdf.kml', {
suppressInfoWindows: false,
preserveViewport: false,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
If your KML isn't very complex, you could try rendering it with a third-party KML parser (geoxml3 or geoxml-v3), see if that works (or points to the problem you are having with KmlLayer)
(function() {
window.onload = function() {
// Creating a new map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.10,19.5),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Creating the JSON data
var json = [
DATA HERE LIKE:
{"title" :"City ZIP CODE STREET" , "lat" :47.2876 , "lng" :20.4978 ,"description" :"YOUR DESCRIPTION"},
]
// Creating a global infoWindow object that will be reused by all markers
var infoWindow = new google.maps.InfoWindow();
// Looping through the JSON data
for (var i = 0, length = json.length; i < length; i++)
{
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title,
// icon: iconimage
});
// Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})
//OnClick event
(marker, data);
}
} })();
I am trying to add a Google maps InfoWindow Dynamically to Wordpress, this is the code that is currently working with a custom marker I have tried several functions for infowindows but it seems to be breaking and not loading the map. not sure what I might be doing wrong.
this works I just need to add a infoWindow
<script type="text/javascript">
//<![CDATA[
function load() {
var styles =
[
{
"stylers": [
{ "lightness": 1 },
{ "saturation": -76 },
{ "hue": "#3bff00" }
]
}
];
var lat = <?php echo $lat; ?>;
var lng = <?php echo $lng; ?>;
// coordinates to latLng
var latlng = new google.maps.LatLng(lat, lng);
// map Options
var myOptions = {
zoom: 14,
scrollwheel: false,
center: latlng,
mapTypeId: 'Styled'
};
//draw a map
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: '/wp-content/themes/bills_theme/images/pin_bills.png',
});
}
// call the function
load();
//]]>
</script>
A simple infowindow would be (not tested):
//draw a map
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: '/wp-content/themes/bills_theme/images/pin_bills.png',
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "click", function(e) {
infowindow.setContent("Hello world");
infowindow.open(map,marker);
});
google.maps.event.trigger(marker, "click");
}
// call the function
Just add this code:
var contentString = 'put your content here.';
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow({
content: contentString,
position: latlng,
maxWidth: 200
});
infowindow.open(map);
});
More info about Info Window you can read HERE.
I currently have created markers but I want to be able focus/show the marker's infowindow on click of a separate list of those marker names. How do you accomplish this? I couldn't find anything online.
javascript:
<script type="text/javascript">
var infowindow;
var locations = { 0: { lat: 32.42, long: -99.68, name: 'Taylor Swift', info: '<b>Taylor Swift</b><br/><img src="http://www.8notes.com/images/artists/taylor_swift.jpg" width="50">' },
1: { lat: 35.42, long: -95.68, name: 'Lady Gaga', info: '<b>Lady Gaga</b><br/><img src="http://images2.fanpop.com/images/photos/7500000/L-G-lady-gaga-7557892-500-500.jpg" width="50">' },
2: { lat: 37.78, long: -122.32, name: 'Selena Gomez', info: '<b>Selena Gomez</b><br/><img src="http://videokeman.com/image/pics/SelenaGomezsongPics1YnhHMtsn4mUdCM.jpg" width="50">' }
}
var myLatlng = new google.maps.LatLng(locations[0].lat,locations[0].long);
var myOptions =
{
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_container"), myOptions);
var markerBounds = new google.maps.LatLngBounds();
$.each(locations, function(key, value)
{
var location = new google.maps.LatLng(value.lat,value.long);
var marker = new google.maps.Marker({
position: location,
map: map,
title:value.name
});
markerBounds.extend(location);
map.fitBounds(markerBounds);
attachSecretMessage(marker, value);
});
function attachSecretMessage(marker,value)
{
google.maps.event.addListener(marker, 'click', function()
{
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow(
{ content: value.info,
size: new google.maps.Size(50,50)
});
infowindow.open(map,marker);
});
}
</script>
html body:
<body>
<a id="showTaylorSwiftInfoWindow" href="#">Taylor Swift</a>
<a id="showLadyGagaInfoWindow" href="#">Lady Gaga</a>
<a id="showSelenaGomezInfoWindow" href="#">Selena Gomez</a>
</body>
You would need to hold all your Markers in an Array so you could search through that and find the appropriate Marker. Once you have that you can call the click event handler, or just make the infowindow and open it as you do in the event handler.
But the important part is that you keep your markers in an Array because that is the only way you will be able to reference them again after they have been created.