google maps api v3 double image for icon - javascript

var icon = {
url: pointer.png,
size: new google.maps.Size(48,48),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(24,24)
};
var marker = new google.maps.Marker({
position: pos,
map: map,
icon: icon
});
Is it possible to add second image to the marker? I'd like to have double marker for same point, 1 overlaid on top of the other.
I want to have little flag of country next to marker.
Possible?

Prior to the API v3.14, you hack this with a icon and a shadow image file together on the same marker.
Here's how I would solve it with v3.14+
function initialize() {
google.maps.visualRefresh = true;
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(0, 0),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0, 0),
map: map
});
// CREDIT: https://developers.google.com/maps/documentation/javascript/markers
marker.flag = new google.maps.Marker({
icon: {
url: 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png',
anchor: new google.maps.Point(32, 32)
}
});
marker.flag.bindTo('position', marker);
marker.flag.bindTo('map', marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
See: http://jsfiddle.net/stevejansen/J5swt/

Related

two markers in ionic native geolocation using cordova geolocation

I have a scenario where I need to show the source and destination with two markers and a blue line that indicates directions. I am using cordava plugin geolocation and trying to get the current location like below
$cordovaGeolocation.getCurrentPosition(options).then(function(position){
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
google.maps.event.addListenerOnce($scope.map, 'idle', function(){
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
I also have destination lat and long but I dnt understand how to place them in the code to show two markers and where to show blue connecting line
as
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
takes only an object
Any help would be appreciated.
What i did-
addMarker(position, icon, content) {
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
icon: icon,
position: new google.maps.LatLng(position[0], position[1])
});
}
And then
array.projectsLocation.forEach(element => {
this.addMarker([element.latitude, element.longitude], element.map_pin_url, element.description);
});
I was using custom icons so you can ignore that.
Check documentation.

Draggable pin not updating coordinates in Google Maps API

I have this code that allows users to insert pins in Google Maps, by clicking on the map. Now I'm trying to make this pin draggable, so I just added draggable:true, in the initialization of the markers. But this is not updating the field with the coordinates. It only works if the user clicks in another place. What am I missing?
// global "map" variable
var map = null;
var marker = null;
// popup window for pin, if in use
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150,50)
});
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
google.maps.event.trigger(marker, 'click');
return marker;
}
function initialize() {
// the location of the initial pin
var myLatlng = new google.maps.LatLng(-19.919131, -43.938637);
// create the map
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// establish the initial marker/pin
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Property Location",
draggable:true,
icon: {
url: 'https://4.bp.blogspot.com/-nHydF9OdHLw/V8OxZbpJW6I/AAAAAAAAADM/G_QLEm7aScUOc3XwZmc5X8DmMHp7FK3RwCLcB/s1600/BikeSpot-Pin-Logo.png',
// base image is 60x60 px
size: new google.maps.Size(64, 96),
// we want to render # 30x30 logical px (#2x dppx or 'Retina')
scaledSize: new google.maps.Size(32, 48),
// the most top-left point of your marker in the sprite
// (based on scaledSize, not original)
origin: new google.maps.Point(0, 0),
// the "pointer"/anchor coordinates of the marker (again based on scaledSize)
anchor: new google.maps.Point(16, 48)
}
});
// establish the initial div form fields
formlat = myLatlng.lat();
formlng = myLatlng.lng();
document.getElementById("LatLng-Input").value = myLatlng.toUrlValue();
// close popup window
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// removing old markers/pins
google.maps.event.addListener(map, 'click', function(event) {
//call function to create marker
if (marker) {
marker.setMap(null);
marker = null;
}
// Information for popup window if you so chose to have one
/*
marker = createMarker(event.latLng, "name", "<b>Location</b><br>"+event.latLng);
*/
var image = 'https://4.bp.blogspot.com/-nHydF9OdHLw/V8OxZbpJW6I/AAAAAAAAADM/G_QLEm7aScUOc3XwZmc5X8DmMHp7FK3RwCLcB/s1600/BikeSpot-Pin-Logo.png';
var myLatLng = event.latLng ;
/*
var marker = new google.maps.Marker({
by removing the 'var' subsquent pin placement removes the old pin icon
*/
marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title:"Bicicletario",
icon: {
url: 'https://4.bp.blogspot.com/-nHydF9OdHLw/V8OxZbpJW6I/AAAAAAAAADM/G_QLEm7aScUOc3XwZmc5X8DmMHp7FK3RwCLcB/s1600/BikeSpot-Pin-Logo.png',
// base image is 60x60 px
size: new google.maps.Size(64, 96),
// we want to render # 30x30 logical px (#2x dppx or 'Retina')
scaledSize: new google.maps.Size(32, 48),
// the most top-left point of your marker in the sprite
// (based on scaledSize, not original)
origin: new google.maps.Point(0, 0),
// the "pointer"/anchor coordinates of the marker (again based on scaledSize)
anchor: new google.maps.Point(16, 48)
}
});
// populate the form fields with lat & lng
formlat = event.latLng.lat();
formlng = event.latLng.lng();
document.getElementById("LatLng-Input").value = formlat +", "+formlng
});
}
});
}
The HTML with the input I'm receiving the coordinates is:
<div id='map_canvas'/>
<input id='LatLng-Input' size='20' type='text'/>
It's not updating the coordinates because you don't tell it to do so. You have to add a dragend-handler and update your element, where you display the coordinates when the drag of the marker is finished:
marker.addListener('dragend', function(event){
document.getElementById("LatLng-Input").value = event.latLng.lat() + ", " + event.latLng.lng();
});
If you would have an infowindow you would have to update the content of the infowindow:
marker.addListener('dragend', function(event){
infoWindow.setContent(event.latLng.lat() + ", " + event.latLng.lng());
});
If you want to update the coordinates also while dragging, add another handler with 'drag' instead of 'dragend'.

How to set center point of marker icon as the target position? [duplicate]

I've created a simple map with custom PNG markers. Is it possible to offset the attached PNG image? There does not seem to be any mention of an 'offset' in the Google Map API v3 documentation.
As of v3.10, the MarkerImage class has been deprecated, the Icon anonymous object should be used instead. From the documentation
Until version 3.10 of the Google Maps JavaScript API, complex icons were defined as MarkerImage objects. The Icon object literal was added in version 3.10, and replaces MarkerImage from version 3.11 onwards.
For example:
var marker = new google.maps.Marker({
map:map,
position: map.getCenter(),
icon: {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
}
});
example fiddle
code snippet"
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
icon: {
url: "http://i.stack.imgur.com/PYAIJ.png",
size: new google.maps.Size(36, 36),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(18, 18),
scaledSize: new google.maps.Size(25, 25)
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
width: 100%;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
The anchor option on the MarkerImage class lets offset the marker image from the middle center position on the marker's lat/lng:
'anchor' overrides the position of the
anchor point from its default bottom
middle position
I was looking for just this option and found a sample here:
http://econym.org.uk/gmap/custom.htm
Setting iconAnchor (on the marker data actually) worked for me.
var Icon = new GIcon();
Icon.image = "mymarker.png";
Icon.iconSize = new GSize(20, 34);
Icon.shadow = "myshadow.png";
Icon.shadowSize = new GSize(36, 34);
Icon.iconAnchor = new GPoint(5, 34);
Icon.infoWindowAnchor = new GPoint(5, 2);
Icon.transparent = "mytran.png";
For v3, this is how I accomplished it:
var image = new google.maps.MarkerImage("images/car1.png",
new google.maps.Size(60, 60),
new google.maps.Point(0,0),
new google.maps.Point(30, 30)
);
//ADD MARKER AT EACH POINT
var marker = new google.maps.Marker();
marker.setPosition(new_point);
marker.setIcon(image);
marker.setZIndex(0);
marker.setMap(map);

Google Map API seems to not load

I have a problem with a google map on my website not loading but there is still something in the container except a white background, indeed I can see the terms at the bottom right and the satellite button at the top right.
There is the code, I hope you will be able to spot what is wrong :
function initialize() {
var myLatLng = new google.maps.LatLng(49.724305, 4.716567);
var mapOptions = {
center: myLatLng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var image = {
url: '/media/A.png',
size: new google.maps.Size(56, 67),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(32, 67),
scaledSize: new google.maps.Size(56, 67)
};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize());
In you code mapCanvas seems to be unassigned. After adding something like var mapCanvas = document.getElementById('map'); the map loads as intended.
JSFiddle
Got it working.
I've added googleapis link "https://maps.googleapis.com/maps/api/js?sensor=false">.
And I've changed var map = new google.maps.Map(mapCanvas, mapOptions); to var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
And i have removed empty parentheses in the maps event listener.
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 600px;
height: 600px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var myLatLng = new google.maps.LatLng(49.724305, 4.716567);
var mapOptions = {
center: myLatLng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var image = {
url: '/media/A.png',
size: new google.maps.Size(56, 67),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(32, 67),
scaledSize: new google.maps.Size(56, 67)
};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>

Multiple Google Maps infowindow

Current I have a google maps that will display some markers on the map from my DB... I would like to add a infowindow when the users click on the marker.
I got it to work, but the problem is that it only display on the last marker that was loaded, why is that?
Here is the code to generate the marker and the infowindow.
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 3,
center: new google.maps.LatLng(41.850033, -87.6500523),
disableDefaultUI: true,
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, offices);
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var offices = [<cfoutput>#officeList#</cfoutput>];
function setMarkers(map, locations) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = new google.maps.MarkerImage('images/pin.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(14, 26),
// The origin for this image is 0,0.
new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 32));
for (var i = 0; i < locations.length; i++) {
var office = locations[i];
var myLatLng = new google.maps.LatLng(office[1], office[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: office[0],
zIndex: office[3]
});
var contentString = "Hello!!!";
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
}
</script>
I've also stumbled across this problem.
Here's how I fixed it:
I used a function to bind a marker to an infowindow.
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: office[0],
zIndex: office[3]
});
var contentString = "Hello!!!";
var infowindow = new google.maps.InfoWindow;
bindInfoW(marker, contentString, infowindow);
}
function bindInfoW(marker, contentString, infowindow)
{
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
}
http://www.codefx.biz/2011/01/google-maps-api-v3-multiple-infowindows
this way also works!

Categories

Resources