Develop Reference

Add marker on geojson data layer in google maps

I have loaded geojson layer to google maps using the following code
map.data.loadGeoJson(
'http://localhost/pssp/assets/geojson/Empanel_Area_2019.geojson');
map.data.setStyle({
fillColor: 'red',
strokeColor: 'red',
strokeWeight: 1
});
)
When I try to add a marker on the data layer on the click event it will get added outside the data layer but not inside. how can I add a marker in side the polygons in the data layer.
I used the following code to add a marker on click event
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}

Add a click listener to the DataLayer as well.
map.data.addListener('click', function(event) {
placeMarker(event.latLng);
});
proof of concept fiddle
code snippet:
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#info-box {
background-color: white;
border: 1px solid black;
bottom: 30px;
height: 20px;
padding: 10px;
position: absolute;
left: 30px;
}
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -28,
lng: 137
}
});
// Load GeoJSON.
map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
// Add some style.
map.data.setStyle(function(feature) {
return /** #type {google.maps.Data.StyleOptions} */ ({
fillColor: feature.getProperty('color'),
strokeWeight: 1
});
});
google.maps.event.addListener(map, 'click', function(event) {
console.log("on map:" + event.latLng.toUrlValue(6));
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}
// Set click event for each feature.
map.data.addListener('click', function(event) {
console.log("on polygon:" + event.latLng.toUrlValue(6));
placeMarker(event.latLng);
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

How do I re position the google map infowindow

How do I re position the infowindow in a google map?
I would like the window to open under the marker with the little indent facing up towards to the marker.
Here is my code I thought the pixeloffset would be the option to change but not sure. When I adjust the y to 70 it shows up below the marker but how do I change the indent to flip around?
$infowindow = new google.maps.InfoWindow({
content: "Drag the map to re-center location",
pixelOffset: new google.maps.Size(0, 70), // want the window to open underneathe with the indent facing up
});

The behavior you are looking for is not (currently) supported by the native google.maps.InfoWindow. You can create a feature request in the issue tracker for the Google Maps JavaScript API v3.
For something that would work now, InfoBox might do what you are looking for, see the example in the documentation
code snippet:
function initialize() {
var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);
var myMapOptions = {
zoom: 15,
center: secheltLoc,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
var marker = new google.maps.Marker({
map: theMap,
draggable: true,
position: new google.maps.LatLng(49.47216, -123.76307),
visible: true
});
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: white; padding: 5px; text-align: center;";
boxText.innerHTML = "Drag the map to re-center location";
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
google.maps.event.addListener(marker, "click", function(e) {
ib.open(theMap, this);
});
var ib = new InfoBox(myOptions);
ib.open(theMap, marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
}
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map_canvas" style="width: 100%; height: 400px"></div>
<p>
This example shows the "traditional" use of an InfoBox as a replacement for an InfoWindow.

Google Maps API Marker Not Working

I am trying to simply get a marker to display. I'm using Google's examples as a guide because this is the first time I am using Google Maps API. I can't find any syntax problems with the code below. Why is it not loading the marker?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100%; z-index: 0;}
#gmnoprint {width: auto;}
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Map of Floor Plan</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function CustomMapType() {
}
CustomMapType.prototype.tileSize = new google.maps.Size(256,256);
CustomMapType.prototype.maxZoom = 4;
CustomMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('DIV');
var baseURL = 'C:/Temp';
baseURL += zoom + '_' + coord.x + '_' + coord.y + '.png';
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.backgroundColor = '#1B2D33';
div.style.backgroundImage = 'url(' + baseURL + ')';
return div;
};
CustomMapType.prototype.name = "Custom";
CustomMapType.prototype.alt = "Tile Coordinate Map Type";
var map;
var CustomMapType = new CustomMapType();
function initialize() {
var myLatlng = new google.maps.LatLng(65, -56);
var mapOptions = {
minZoom: 0,
maxZoom: 4,
isPng: true,
mapTypeControl: false,
streetViewControl: false,
center: new google.maps.LatLng(65.07,-56.08),
zoom: 3,
mapTypeControlOptions: {
mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World'
});
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
map.mapTypes.set('custom',CustomMapType);
map.setMapTypeId('custom');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="background: #1B2D33;"></div>
</body>
</html>

Your map is not initialized at time when marker is created:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World'
});
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
So, you have to create map first and then use it:
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World'
});
or call setMap on the marker after initializing the map:
var marker = new google.maps.Marker({
position: myLatlng,
title: 'Hello World'
});
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
marker.setMap(map);

Display world map with no repeats

I'm currently using the Google Maps API for the first time.
Essentially I wish to have the map zoomed out so that the whole world is displayed with no overlap (e.g. bits of a certain country are not repeated on either side of the map).
The closest I have found to my requirements is this SO question:
Google Maps API V3: Show the whole world
However, the top answer on this question does not provide the full code required.
I have used the starter example from Google as the base for my HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuP_BOi6lD7L6ZY7JTXRdhY1YEj_gcEP0&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 1
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
However, in the example provided in the question above a number of additional variables have been specified. My question is, where do I plug in the code from the question above to ensure that my world map is displayed correctly?

If you don't want any repeats, you need to control the minimum zoom allowed and the width of your map to be less than or equal to one width of of the base tiles at the minimum zoom level allowed on your map.
At zoom zero, one width of the world is a single 256 x 256 pixel tile, each zoom level increases that by a factor of 2.
This will show one width of the map at zoom level 1 (512x512 map-canvas), you can change the height, but the width will need to be 256 at zoom 0, 512 at zoom 1, 1024 at zoom 2, etc:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 512px; width:512px;}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 1,
minZoom: 1
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
code snippet:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 1,
minZoom: 1
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map-canvas {
height: 512px;
width: 512px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

Here's a function worldViewFit I like to use:
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 1,
minZoom: 1
};
map = new google.maps.Map(document.getElementById('officeMap'), mapOptions);
google.maps.event.addListenerOnce(map, 'idle', function() {
//Map is ready
worldViewFit(map);
});
}
function worldViewFit(mapObj) {
var worldBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(70.4043,-143.5291), //Top-left
new google.maps.LatLng(-46.11251, 163.4288) //Bottom-right
);
mapObj.fitBounds(worldBounds, 0);
var actualBounds = mapObj.getBounds();
if(actualBounds.getSouthWest().lng() == -180 && actualBounds.getNorthEast().lng() == 180) {
mapObj.setZoom(mapObj.getZoom()+1);
}
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#officeMap {
height: 512px;
width: 512px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="officeMap"></div>

This is the JavaScript I found:
/**
* All locations map scripts
*/
jQuery(function($){
$(document).ready(function(){
loadmap();
});
function loadmap()
{
var locations = wpsl_locator_all.locations;
var mapstyles = wpsl_locator.mapstyles;
var mappin = ( wpsl_locator.mappin ) ? wpsl_locator.mappin : '';
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap',
mapTypeControl: false,
zoom: 8,
styles: mapstyles,
panControl : false
}
if ( wpsl_locator.custom_map_options === '1' ) mapOptions = wpsl_locator.map_options;
var infoWindow = new google.maps.InfoWindow(), marker, i;
var map = new google.maps.Map( document.getElementById('alllocationsmap'), mapOptions );
// Loop through array of markers & place each one on the map
for( i = 0; i < locations.length; i++ ) {
var position = new google.maps.LatLng(locations[i].latitude, locations[i].longitude);
bounds.extend(position);
var marker = new google.maps.Marker({
position: position,
map: map,
title: locations[i].title,
icon: mappin
});
// Info window for each marker
google.maps.event.addListener(marker, 'click', (function(marker, i){
return function() {
infoWindow.setContent(locations[i].infowindow);
infoWindow.open(map, marker);
wpsl_all_locations_marker_clicked(marker, infoWindow)
}
})(marker, i));
// Center the Map
map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function() {
if ( locations.length < 2 ) {
map.setZoom(13);
}
google.maps.event.removeListener(listener);
});
}
// Fit the map bounds to all the pins
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
google.maps.event.removeListener(boundsListener);
});
wpsl_all_locations_rendered(map);
} // loadmap()
});

google map disappears when marker clicked

I have an infobox on a clickable polylines and polygons.
When I click any of them an invisible marker is created and the infoxbox pops up for it.
The problem is that when the infoxbox appears the map dissapears.
I don't get any javascript errors.
This is my code:
(I have commented out all infoxbox features apart of the content text)
google.maps.event.addListener(mapObject, 'click', function(event) {
var invisibleMarker = new google.maps.Marker({
position: new google.maps.LatLng(event.latLng),
map: map
});
var boxText = document.createElement("div");
boxText.style.cssText = "background: none; padding: 0;";
boxText.innerHTML = '<div style="margin: 0 0 20px 0;padding: 18px;background: white url(/media/images/map-marker-info-bg.gif) repeat-x top left;">' + content[0] + '</div>';
var myOptions = {
content: boxText
/*,latlng: event.latLng
,alignBottom: true
,pixelOffset: new google.maps.Size(-470, -20)
,boxStyle: {
background: "transparent url('/media/images/map-marker-info-arrow.png') no-repeat bottom right"
,opacity: 1
,width: "470px"
}
,closeBoxMargin: "18px 18px 2px 2px"
,closeBoxURL: "/media/images/map-marker-info-close.gif"
,infoBoxClearance: new google.maps.Size(5, 5)
,enableEventPropagation: false*/
};
var ib = new InfoBox(myOptions);
ib.open(map, invisibleMarker);
});
Can anybody help me resolve this issue?
Thank you

There are a couple of problems:
1) google.maps.event.addListener(mapObject, 'click', function(event)
You haven't provided your map creation code, but the variable mapObject should be a map object... That doesn't fit with any of your other references to the map object map.
2) new google.maps.LatLng(event.latLng)
You don't need to parse the event.LatLng value, it will already be a latitude/longitude value.
Here is a working example, with the corrections noted above. The InfoBox will output undefined because content[0] is undefined, but that can be any valid text you want.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
var map;
function test()
{
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
var invisibleMarker = new google.maps.Marker({
position: event.latLng,
map: map
});
var boxText = document.createElement("div");
boxText.style.cssText = "background: none; padding: 0;";
boxText.innerHTML = '<div style="margin: 0 0 20px 0;padding: 18px;background: white url(/media/images/map-marker-info-bg.gif) repeat-x top left;">' + content[0] + '</div>';
var myOptions = {
content: boxText
/*,latlng: event.latLng
,alignBottom: true
,pixelOffset: new google.maps.Size(-470, -20)
,boxStyle: {
background: "transparent url('/media/images/map-marker-info-arrow.png') no-repeat bottom right"
,opacity: 1
,width: "470px"
}
,closeBoxMargin: "18px 18px 2px 2px"
,closeBoxURL: "/media/images/map-marker-info-close.gif"
,infoBoxClearance: new google.maps.Size(5, 5)
,enableEventPropagation: false*/
};
var ib = new InfoBox(myOptions);
ib.open(map, invisibleMarker);
});
}
</script>
</head>
<body onload="test();">
<div id="map_canvas"></div>
</body>
</html>

I want to use similar styled InfoBox for my polylines but need to pass clicked position I think. In original simple code it was
infowindow.setContent(content[0]);
infowindow.position = event.latLng;
infowindow.open(map);
and it worked
I have no idea how to do it for InfoBox. I tried to use in InfoBox options:
latlng: event.latLng
and then:
var ib = new InfoBox(myOptions);
ib.setPosition(event.latLng);
ib.open(map, mapObject);
but I'm getting:
Error: anchor.getPosition is not a function
Source File: http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js