We Keep Coding

Initiate google map from middleware in NodeJS

I am working on marking a Google Map dynamically, I can initiate the map in a layout.hbs
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key={{google_browser_key}}"></script>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(55.6810038, 12.6033823),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
zoomControl: false
});
</script>
But I don't wish to broadcast my API key to the world, is it possible to setup a callback to the app.js, where you connect each document with the maps.googleapis.com?
I tried to use the router, but I am missing document or window variables:
app.use(function (req, res, next) {
res.locals.title = req.Globalize.formatMessage('strings/title');
res.locals.google_browser_key = "";
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(55.6810038, 12.6033823),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
zoomControl: false
});
next();
});

google maps initialize can't see map variable when adding marker

I have the following initialization for a google map:
function initialize()
{
var mapOptions = {
zoom: 15,
center: myLatLng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
scaleControl: true,
scrollwheel: true,
disableDoubleClickZoom: true,
};
var map = new google.maps.Map(document.getElementById("googleMap"),
mapOptions);
}
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
google.maps.event.addDomListener(window, "load", initialize);
};
When trying to add the marker, I get the error:
Uncaught ReferenceError: map is not defined
How can I see this map or add a marker properly to the map?

seems you don't have a proper myLatLng position for your marker try adding one eg: myLatLng = new google.maps.LatLng(45.00, 10.00);
function initialize()
{
var mapOptions = {
zoom: 15,
center: myLatLng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
scaleControl: true,
scrollwheel: true,
disableDoubleClickZoom: true,
};
var map = new google.maps.Map(document.getElementById("googleMap"),
mapOptions);
}
var myLatLng = new google.maps.LatLng(45.00, 10.00);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
google.maps.event.addDomListener(window, "load", initialize);
};

how to display and ignore kml layer in google maps

I have a google maps where I can click on the map and markers appear:
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID,
draggableCursor: 'crosshair',
draggable: true,
panControl: true,
zoomControl: true,
scaleControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Wherever I click, a function gets called to do some work (add markers).
I've been asked to add a kml layer:
var url = window.location.protocol + "//" + window.location.host + "/data/polygon.cfm?TYPE=GEOID&VALUE=" + getUrlVars()["GEOID"] + "&LC=641400FF&LW=3&FC=14F11C2E&F=1&FO=1";
var kmlLayer = new google.maps.KmlLayer(url, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
now, once the kml layer is added, the "crosshair" is gone, and I can't click on the map anymore. Is there a setting in the kmlLayer that I can set that "ignores" the layer while still displaying it?
Thanks.

Change your KML initialization code from:
var kmlLayer = new google.maps.KmlLayer(url, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
to
var ctaLayer = new google.maps.KmlLayer(
{
url: url,
suppressInfoWindows: true,
map:map,
zindex: 0,
clickable : false
});
Here is a fiddle: http://jsfiddle.net/loanburger/jnrnmog4/ You can click the map and the marker which is over the KML
The key being the clickable = false property on the KML Layer option

google.Maps.Circle repeats in every clone part of google map on small zoom option

Does anyone know the way to prevent the repeating property of circle in every clone part of google map.
In google.Maps API I found the similar option of marker it's: optimized property set to false.
The parts of my code:
this.map = new google.maps.Map(this.el, {
zoom: 4,
center: new google.maps.LatLng(33.2169, -97.1336),
disableDefaultUI: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
mapTypeControl: true,
mapTypeControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
});
this.circle = new google.maps.Circle({
center: new google.maps.LatLng(33.2169, -97.1336),
radius: 1609344,
strokeWeight: 1,
strokeColor: "#e64646",
draggable: true,
editable: true,
visible: false,
map: this.map
});

Can't see drawing polygon in Google maps v3 till move the map center

I have following Demo where I try to draw Polygon by using Google maps v3.
But when I try to draw Polygon its invisible till I change map center.
Do I need repaint it somehow?
Here is the code:
var map2;
function linesmap(){
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(51.425, -0.955),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// map2 = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var options = {
zoom: 14,
center: new google.maps.LatLng(51.425, -0.955),
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
scrollwheel: true,
draggable: true,
rotateControl: false,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
zoomControl: true,
disableDoubleClickZoom: false
};
map2 = new google.maps.Map(document.getElementById("map_canvas"), options);
buildDrawManager();
}
var buildDrawManager = function(){
console.log('buildDrawManager');
// Creates a drawing manager attached to the map that allows the user to draw
// markers, lines, and shapes.
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: null,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON
]
},
polygonOptions: {
fillColor: '#1E90FF',
strokeWeight: 0,
fillOpacity: 0.3,
editable: true
},
map: map2
});
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) { });
}
[EDIT]
It happens on Chrome version 32.0.1700.76

#fessy Your fix doesn't seem to be working for me. I was able to get it working by touching the zoom level. You don't event notice it happen.
document.getElementById("map_canvas").onclick = function(){
if(drawingManager.getDrawingMode() !== google.maps.drawing.OverlayType.HAND){
map2.setZoom(map2.getZoom() + 1);
map2.setZoom(map2.getZoom() - 1);
}
};
http://plnkr.co/edit/TP8TIjvdRHHOyg6NKQWc?p=preview

Thanks to #geocodezip that posted workaround to solve this issue.
Here is a fix:
Changed version
https://maps.googleapis.com/maps/api/js?sensor=false&v=3&libraries=geometry,visualization,drawing
to exp.:
https://maps.googleapis.com/maps/api/js?sensor=false&v=3.exp&libraries=geometry,visualization,drawing
and Plunker with fix