Develop Reference

Google Maps v3: plot different sets of markers

I am trying to plot on a google map a set of fixed markers and a marker for the user position. For these two sets of markers I would like to use a different image for the marker, however something weird is happening: when loading the page, the "fixed" markers get plotted properly but then immediately one disappears (the last one in the array) and then the user position shows up. In addition, the first fixed location gets the user location marker image, and the user positioning marker gets the image of the fixed markers. Ideally, the locations in the array will be plotted entirely (all 4) and with red_dot.png image on the marker, and the user positioning with the bluedot_retina.png on the marker.
It's really strange and I am struggling figuring out what is the root cause. Appreciate any help with this issue. thanks!
<script>
var locations = [
['location a', 37.60756088, -122.42793323],
['location b', 37.759736, -122.426957],
['location c', 37.752950, -122.438458],
['location d', 37.763128, -122.457942]
];
var map;
var i;
var marker;
var google_lat = 37.757996;
var google_long = -122.404479;
var myLatlng = new google.maps.LatLng(google_lat, google_long);
//google.maps.visualRefresh = true;
function initialize() {
var mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var image_dot = new google.maps.MarkerImage(
'images/red_dot.png',
null, // size
null, // origin
new google.maps.Point( 8, 8 ), // anchor (move to center of marker)
new google.maps.Size( 8, 8 ) // scaled size (required for Retina display icon)
);
marker = new google.maps.Marker({
flat: true,
position: myLatlng,
icon: image,
optimized: false,
map: map,
visible: true,
title: 'I might be here'
});
setMarkers(map, locations);
} //initialize();
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng1 = new google.maps.LatLng(beach[1], beach[2]);
marker = new google.maps.Marker({
position: myLatLng1,
icon: image_dot,
map: map
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
var Tdata;
var image = new google.maps.MarkerImage(
'images/bluedot_retina.png',
null, // size
null, // origin
new google.maps.Point( 8, 8 ), // anchor (move to center of marker)
new google.maps.Size( 17, 17 ) // scaled size (required for Retina display icon)
);
var userMarker = new google.maps.Marker({icon: image});
//var userMarker = new google.maps.Marker({icon: 'images/bluedot_retina.png'});
$.ajax({
method : "GET",
url: "get_location.php",
success : function(data){
Tdata=JSON.parse(data);
// console.log(data.lat);
console.log(Tdata.lat);
myFunction();
}
});
function myFunction(){
var interval = setInterval(function() {
$.get("get_location.php", function(Tdata) {
var JsonObject= JSON.parse(Tdata);
google_lat = JsonObject.lat;
google_long = JsonObject.long;
console.log(google_lat, google_long);
// $('#data').html('google_lat, google_long');
myLatlng = new google.maps.LatLng(google_lat, google_long);
//marker.setPosition(myLatlng);
userMarker.setPosition(myLatlng);
userMarker.setMap(map);
//map.setCenter(myLatlng);
});
}, 1000);
}
</script>

marker is a global variable. You are using it for both all of your locations and your user's position marker. Don't do that, assign unique (or local) names to the two classes of markers.
var Tdata;
var userMarker = new google.maps.Marker({icon: URL/to/custom/icon/for/user});
$.ajax({
method : "GET",
url: "get_location.php",
success : function(data){
Tdata=JSON.parse(data);
// console.log(data.lat);
console.log(Tdata.lat);
myFunction();
}
});
function myFunction(){
var interval = setInterval(function() {
$.get("get_location.php", function(Tdata) {
var JsonObject= JSON.parse(Tdata);
google_lat = JsonObject.lat;
google_long = JsonObject.long;
console.log(google_lat, google_long);
// $('#data').html('google_lat, google_long');
myLatlng = new google.maps.LatLng(google_lat, google_long);
userMarker.setPosition(myLatlng);
userMarker.setMap(map);
map.setCenter(myLatlng);
});
}, 1000);
}

How to define custom size on Google Map when using closures in event listeners

I' am using Google Map to plot the marker and a small popup box that will appear when someone clicks on the market. Image is attached. By Default, Google has set fixed width of the Popup and I wanted to change its size. I was not able to anything on Documentation.
Below are my codes
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(-14.306407, -170.695018),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var voyagePlanCoordinates = [
new google.maps.LatLng(),
];
var voyagePath<?php echo $voyage_id; ?> = new google.maps.Polyline({
path: voyagePlanCoordinates,
geodesic: true,
strokeColor: "",
strokeOpacity: 1.0,
strokeWeight: 5
});
voyagePath.setMap(map);
setMarkers(map, voyages);
}
var voyages = [];
function setMarkers(map, locations) {
var image = {
url: '/wp-content/themes/theme/resources/images/marker.png',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 32)
};
for (var i = 0; i < locations.length; i++) {
var voyage = locations[i];
var myLatLng = new google.maps.LatLng(voyage[1], voyage[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: voyage[0],
zIndex: voyage[3]
});
voyage_msg(marker, i);
}
}
function voyage_msg(marker, num){
var message = [];
var infowindow = new google.maps.InfoWindow({
content: message[num]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(marker.get('map'), marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Please Help!

You don't need any extra code or api call to set the width of the popover. All you need is basic CSS
.map-closures{
width: 200px;
}
That should do the trick.

open multiple infowindow from external click javascript

Hi i am using google map to show my search locations, below the map it lists the search result. wen the user clicks the below result the google map show the infowindow .
function setMarkers(map, locations)
{
var infoWindow = new google.maps.InfoWindow({});
var markers = new Array();
var image = new google.maps.MarkerImage('images/pin_red.png',
new google.maps.Size(32,39),
new google.maps.Point(0,0),
new google.maps.Point(18, 30));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var alph = 65;
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var title = beach[0].split('~~');
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+String.fromCharCode(alph)+'|FF0000|000000',
shape: shape,
title: title[0]+'<br>'+title[1],
zIndex: beach[3]
});
$('#mappoint-'+String.fromCharCode(alph)).bind('click', function() {
google.maps.event.trigger(marker, 'mouseover')
});
google.maps.event.addListener(marker, 'mouseover', function() {
infoWindow.setContent(this.title);
infoWindow.open(map, this);
});
alph = parseInt(alph)+1;
}
}
This is the function i am using, it show the last created infowindow while clicking any result, anyone have any idea ?
$('#mappoint-'+String.fromCharCode(alph)).bind('click', function() {
google.maps.event.trigger(marker, 'mouseover')
});
This section having the problem, this binds only for last created marker .

GoogleMaps InfoWindow not appearing when Marker is clicked

I have three arrays : myLats, (latitudes) myLngs (longitudes) and myLocs (address strings)
e.g. myLats[0] = 53.3534751, ,myLngs[0] = -2.5682085, myLocs[0] = Longwood Rd Appleton Warrington. So the elements of each array all correspond to each other numerically.
When constructing the map in my initialize() function, I loop through these to place multiple markers at the correct coordinates, and i'm also trying to have each marker having an infowindow appear when clicked, yet when i click a marker an infowindow simply does not appear. Any help with this would be greatly appreciated.
Code:
function initialize() {
var myOptions = {
center: new google.maps.LatLng(54.00366, -2.547855),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker, infowindow, i;
for (i = 0; i <= myLats.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(myLats[i], myLngs[i]),
map: map,
clickable: true,
icon: '". url::base() ."resources/icons/accident.png',
});
infowindow = new google.maps.InfoWindow({
content: myLocs[i],
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
}

That's a common problem when dealing with more than one marker. You aren't in fact creating a new window for each marker but must redefining the single window for each marker.
You'll find the problem and solution on page 88 onwards of Google Map API V3
If you are new to Google Maps API, I would recommend reading that book, it gave me a great start and I avoided a lot of the "common" mistakes.
Hope this helps.
Jim

I made a few changes, like adding the markers inside a function, adding 'var', and changing i <= myLats.length to i < myLats.length. It was a combination of these changes that made it work.
var myLats = [ 54.20366, 54.42366, 54.64366];
var myLngs = [ -2.54788, -2.66788, -2.78788];
var myLocs = [ "Loc a" , "Loc b" , "Loc c"];
function initialize()
{
var myOptions =
{
center: new google.maps.LatLng(54.00366,-2.547855),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
var marker, infowindow, i;
for (i=0; i < myLats.length; i++)
{
addMarker(i);
}
function addMarker(i) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(myLats[i],myLngs[i]),
map: map,
clickable: true,
//icon: '". url::base() ."resources/icons/accident.png',
});
var infowindow = new google.maps.InfoWindow({
content: myLocs[i]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
}
However, I'm guessing you want a solution that keeps only one infowindow open, I had this figured out first:
var myLats = [ 54.20366, 54.42366, 54.64366];
var myLngs = [ -2.54788, -2.66788, -2.78788];
var myLocs = [ "Loc a" , "Loc b" , "Loc c"];
var map, marker, infowindow, i;
function initialize()
{
var myOptions =
{
center: new google.maps.LatLng(54.00366,-2.547855),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
infowindow = new google.maps.InfoWindow({ });
for (i = 0; i < myLats.length; i++) {
addMarker(i);
}
}
function addMarker(i) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(myLats[i],myLngs[i]),
map: map,
clickable: true
//icon: '". url::base() ."resources/icons/accident.png'
});
google.maps.event.addListener(marker, 'click', function(event) {
infowindow.setContent(myLocs[i]);
infowindow.open(map,marker);
});
}

Google Maps v3 Terrain View By Default

I'm trying to make my google maps embed default to terrain view. Attached is my code that loads everything correctly except the map options where I set the default view to terrain. I have it set up to only limit the choices to only terrain but when you initially load the page it is on the default hybrid view.
var map, marker, latLngToPixel;
var middle_earth_MORADOR = new google.maps.LatLng(38, 0);
function initialize() {
var mapOptions = {
zoom: 2,
center: middle_earth_MORADOR,
backgroundColor: "#000",
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.TERRAIN]
},
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var locations = [
// PHP LOOP FOR FEATURED PROJECTS
];
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var styledMapOptions = {
map: map,
name: "map"
}
var build = new google.maps.StyledMapType(styledMapOptions);
map.mapTypes.set('map', build);
map.setMapTypeId('map');
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: 'http://staging.******.com/css/images/pin.png',
map: map,
});
marker.setAnimation(google.maps.Animation.DROP);
setTimeout(function(){ marker.setAnimation(null); }, 1750);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
window.location = "http://staging.******.com/projects/" + locations[i][4];
}
})(marker, i));
}
}

I think you can disable the default UI of map by setting the property disableDefaultUI to true, and then set in the options the TERRAIN as the mapTypeId as how I did it below:
function loadMap() {
var myLatlng = new google.maps.LatLng(lat,lan);
var myOptions = {
zoom: 3,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
//code
}

const map = new window.google.maps.Map(document.getElementById('Map'), {
mapTypeId: 'terrain'
});