We Keep Coding

Google maps Javascript API v3 custom markers not shown on ionic app

I'm using google maps javascript API v3 for implementing a map with some markers in my Ionic 1 app.
I want to use a custom image for these markers. When I try the application on chrome in my pc the markers are shown without problems, but when I try it on iOS or Android device the markers don't appear.
Here is my function:
function setUserMarkers(locations) {
var image = {
url: '/images/user_pin.png',
// This marker is 30 pixels wide by 50 pixels high.
scaledSize: new google.maps.Size(30, 50),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (15, 30).
anchor: new google.maps.Point(15, 50)
};
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var site = locations[i];
var myLatLng = new google.maps.LatLng(site.address_latitude, site.address_longitude);
var contentString = '<p>' + site.account_site_type_description +'</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: site.account_site_type_description,
zIndex: site.id
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
marker.addListener('dblclick', function() {
navigateToMap(site.address_latitude, site.address_longitude);
});
if (locations.length === 1) {
map.setCenter(marker.getPosition());
} else {
bounds.extend(myLatLng);
map.fitBounds(bounds);
}
}
}
Could someone help me?

You are referring marker url from the root starting it with / and that will not work for Cordova. You should use some relative path for your image, like
url: 'images/user_pin.png'

Your file path references are automatically relative to the "www" folder.
So if you rely on custom icons in place of the regular balloon markers, make an "assets" folder inside of the "www" folder and reference those icons this way:
var image = 'assets/darkgreen_Marker.png';

Change Custom Marker Size Google Maps

I managed set a custom icon for the image marker (url of icon is in code), but I have no idea how to customize its size. I've looked around for help online, but due to my very limited coding knowledge, have not been able to add the code needed to make it work. Can someone send me the complete, finished code with the modification needed to customize width/height for the market icon?
Thank you!
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDL51DzuRotMkfR09g540u2dZHlKPMpR54'></script>
<div style='overflow:hidden;height:450px;width:100%;'>
<div id='gmap_canvas' style='height:450px;width:100%;'></div>
<style>
#gmap_canvas img {
max-width:none!important;
background:none!important
}
</style>
</div>
<script type='text/javascript'>
function init_map(){
var myOptions = {
scrollwheel: false,
draggable: false,
zoom:16,
center:new google.maps.LatLng(25.841211,-80.308539),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(25.841211,-80.308539),
icon: 'http://www.ssglobalsupply.com/images/location-contact.png'
});
infowindow = new google.maps.InfoWindow({
content:'6891 NW 74th St Medley, FL 33166<br>'
});
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map,marker);
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
</script>

The size arguments are in pixels. So, to double your example's marker size the fifth argument to the MarkerImage constructor would be:
new google.maps.Size(42,68)
Check the link for steampowered's answer to get more details
Here is the JSFIDDLE for your icon marker size 50px x 50px
var image = {
url: 'http://www.ssglobalsupply.com/images/location-contact.png',
// This marker is 50 pixels wide by 50 pixels high.
size: new google.maps.Size(50, 50),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 32)
};

how to stretch the icon in google map api v3

Here is my code...
The problem is, I don't know how to stretch the image of icon.
I just want to know if there's a way to stretch the image of icon? if there is, please tell me..thanks in advance
var image = {
url: 'images/arrive.png'
size: new google.maps.Size(40, 40)
};
var markerOptions = {
map: map,
position: new google.maps.LatLng(lati, longti),
icon: image};

Use Like
var icon = {
url: "../res/sit_marron.png", // url
size: new google.maps.Size(width, height), // size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(anchor_left, anchor_top) // anchor
};
position = new google.maps.LatLng(latitud,longitud)
marker = new google.maps.Marker({
position: position,
map: map,
icon: icon
});
Markers

Use scaledSize Property of Google Maps API.
The size of the entire image after scaling, if any. Use this property to stretch/shrink an image or a sprite.
You can see here about scaledSize .

Put this on your code,
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(anchor_left, anchor_top)

Google Map marker disappears after drag

When I move a marker to top of my map and out of view (see image below), it gets a high opacity which makes the marker close to invisible.
This bug only happens in Safari and I really have no clue what might be causing this.
If you look close at the second image you can see the marker.
var myMarker = new Array();
$(function () {
latitude = 59.3294;
longitude = 18.0686;
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 4,
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
}
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var id = 1;
var image = {
url: 'http://i.imgur.com/4yjea7s.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(33, 42),
// The origin for this image is 0,0.
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(16, 42)
};
myMarker[id] = new google.maps.Marker({
position: new google.maps.LatLng(57.721035,12.939819),
map: map,
animation: google.maps.Animation.DROP,
draggable: false,
icon: image
});
google.maps.event.addListener(myMarker[id], 'click', function() {
var image = {
url: 'http://i.imgur.com/1eHR1c3.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(108, 141),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(54, 0)
};
myMarker[id].setDraggable(true);
myMarker[id].setIcon(image);
});
});
jsfiddle:
http://jsfiddle.net/S5T9b/1/
http://jsfiddle.net/S5T9b/1/embedded/result/
Steps to reproduce the error:
Click on a marker on the map
Drag the marker to the far top of the map div and drop it.
The marker should now be almost invisible but if you look closely it's still there.
And you can still click on it again and move it - It then becomes visible again.
Is it a programming issue by me or is this a google maps bug in Safari?

I am pretty sure this is a Google maps bug. However I got it to work by using this solution:
You have to both specify a zIndex and add
optimized: false
to every marker constructor, eg.
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: resultIcon,
optimized: false,
zIndex: 5
})
Copied from :
https://stackoverflow.com/a/12061606/1679809

Works fine for me in Safari using Windows 7. It is possible that this is just a tiny bug, since from your code I can't see anything that would cause the code to work fine on all browsers except Safari.
I'm not sure if these guys have the exact same problem as you, but it might be worth checking the links out anyway:
http://www.google.com/support/forum/p/maps/thread?tid=56c196bd9ad37c24&hl=en
http://www.google.com/support/forum/p/maps/thread?tid=26db8fd040386548&hl=en
Why are Google Map markers showing up on Firefox by not on Chrome, Safari and Internet Explorer

Google map marker sprite image position

How can we position the sprite image as Google map marker. For eg: In css we are positioning the image like
background: url('../images/bodycss/pointer.png') 28px -32px;
Now how can I include the above code to the below google api-v3 function ?
function setMarkers(map, markers) {
var google_image = new google.maps.MarkerImage("http://example.com/images/bodycss/pointer.png");
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
zIndex: sites[3],
html: sites[4],
icon: google_image
});
google.maps.event.addListener(marker, "mouseover", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}

To create a MarkerImage from a sprite image, you need to specify the origin and size of the section of the image you want to use to create the icon.
var icon = new google.maps.MarkerImage("http://domain/path/sprite.png", new google.maps.Size(12, 20), new google.maps.Point(100, 34));
You can have a look at this Blog post that describes it well
Update- See this working Fiddle- DEMO(sprite url is dead)
I have used this image- http://www.ipreferjim.com/site/wp-content/uploads/2012/10/markers.png?9d7bd4(sprite url is dead) and adjusted the size and point values for the icon.

Before the MarkerImage class became deprecated (which means it's still supported, but should be replaced) in favour of the Icon object, you might have written something like this for a simple image:
var qthIconHouse20 = new google.maps.MarkerImage( 'grafx/house_icon_20.png',
new google.maps.Size(20, 20),
new google.maps.Point(0, 0),
new google.maps.Point(10, 10) );
Now, using the Icon object, you would write this:
var qthIconHouse20 = {
url: 'grafx/house_icon_20.png',
size: new google.maps.Size(20, 20),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(10, 10),
scaledSize: new google.maps.Size(20, 20)
};
Note the extra scaledSize parameter: for simple images, this is the size of the original image - which in this particular case is the same as the size parameter.
For sprites, where you have several images contained in a single image file, you might use something like this:
var qthIconBlueSpot16 = {
url: 'grafx/qth_icon_spots_16.png',
size: new google.maps.Size(16, 16),
origin: new google.maps.Point(0, 32),
anchor: new google.maps.Point(8, 8),
scaledSize: new google.maps.Size(16, 48)
};
Note that, in this example, the origin has been specified as (0, 32) in a sprite containing multiple 16*16 pixel images: so here, we're selecting the third image in the sprite. Within that portion of the image, we set the anchor to (8, 8) - i.e. in the middle of the selected portion of the image to be displayed. Finally, the scaledSize here refers to the size of the entire sprite image.

You can use the anchor property of a MarkerImage which, as documented here overrides the default position:
The position at which to anchor an image in correspondance to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.
p.s. MarkerImage is deprecated, and you should consider using icon instead.