I'm asking because I've searched everywhere online and this is all I have been able to find. So far I've been able to make dashed lines on google maps with the following code.
app.config.dashSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4,
},
new google.maps.Polyline({
map:map,
path:polygon.getPath ? polygon.getPath() : polygon,
strokeColor: vue.Projects[projectID].ContractorColor,
strokeOpacity:0,
icons:[{
icon:app.config.dashSymbol,
offset:'0',
repeat:'20px'
}],
})
That all works fine, but is there a way that I can make a Polygon object with a dashed outline? I tried this, by it doesn't work
new google.maps.Polygon({
map:map,
paths:polygon.getPath ? polygon.getPath() : polygon,
fillColor: vue.Projects[projectID].ContractorColor,
strokeColor:vue.Projects[projectID].ContractorColor,
strokeOpacity:0,
icons:[{
icon:app.config.dashSymbol,
offset:'0',
repeat:'20px'
}]
})
I don't think you can. But you could overlay a Polyline on top of the Polygon.
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40, 9),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var path = [
new google.maps.LatLng(39, 4),
new google.maps.LatLng(34, 20),
new google.maps.LatLng(44, 20),
new google.maps.LatLng(39, 4)
];
var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1,
scale: 2
};
var polygon = new google.maps.Polygon({
strokeOpacity: 0,
strokeWeight: 0,
fillColor: '#00FF00',
fillOpacity: .6,
paths: path,
map: map
});
var polylineDotted = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'
}],
path: path,
map: map
});
}
initialize();
#map-canvas {
height: 180px;
}
<div id="map-canvas"></div>
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
Related
I am new to Google Maps and I need to receive an alert when the marker moves outside the circles, I have already created the map and added some circles to represent the areas in which the marker can stay, outside of them I need to show a alert announcing that this is not a coverage area.
My code is the following:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places&v=weekly" defer></script>
<script type="text/javascript">
const citymap = {
escalon: {
center: { lat: 13.701984532461921, lng: -89.23395010808454 },
},
};
const citymap1 = {
matriz: {
center: { lat: 13.699526, lng: -89.196691 },
},
};
const citymap2 = {
plaza: {
center: { lat: 13.699581, lng: -89.189770 },
},
};
const citymap3 = {
ahuachapan: {
center: { lat: 13.920266, lng: -89.847658 },
},
};
const citymap4 = {
sanMiguel: {
center: { lat: 13.484937, lng: -88.177339 },
},
};
const citymap5 = {
santaAna: {
center: { lat: 13.993704, lng: -89.556913 },
},
};
const citymap6 = {
sonsonate: {
center: { lat: 13.720177, lng: -89.727801 },
},
};
function initialize() {
// Creating map object
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 12,
center: new google.maps.LatLng(13.701277, -89.224468),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var vMarker = new google.maps.Marker({
position: new google.maps.LatLng(13.701277, -89.224468),
draggable: true
});
google.maps.event.addListener(vMarker, 'dragend', function (evt) {
$("#txtLat").val("https://www.google.es/maps/dir/" + evt.latLng.lat().toFixed(6) + ", " + evt.latLng.lng().toFixed(6));
map.panTo(evt.latLng);
});
for (const city in citymap) {
// Add the circle for this city to the map.
const vMarker = new google.maps.Marker({
position: new google.maps.LatLng(13.701277, -89.224468),
draggable: true
});
}
for (const city in citymap) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap[city].center,
radius: 8000,
});
}
for (const city in citymap1) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap1[city].center,
radius: 5000,
});
}
for (const city in citymap2) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap2[city].center,
radius: 5000,
});
}
for (const city in citymap3) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap3[city].center,
radius: 7000,
});
}
for (const city in citymap4) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap4[city].center,
radius: 7000,
});
}
for (const city in citymap5) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap5[city].center,
radius: 7000,
});
}
for (const city in citymap6) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap6[city].center,
radius: 7000,
});
}
// centers the map on markers coords
map.setCenter(vMarker.position);
// adds the marker on the map
vMarker.setMap(map);
}
</script>
</head>
<body onload="initialize();">
<div id='map_canvas' style='width: auto; height: 500px;'></div>
</body>
</html>
I have left you this example code in order to have a broader panorama of my problem, because precisely what I am trying to do is a type of home delivery and the areas in blue marked on the map are the areas in which If there is coverage of my home delivery, but if the marker is located outside of them, or if the client moves them outside of them, I need the alert to be displayed to warn that it cannot be, I appreciate all the support, greetings.
You can do this by getting the bounds getBounds() of the circle and check if the location of the marker is within those bounds like so:
function init() {
var
contentCenter = '<span class="infowin">Center Marker (draggable)</span>',
contentA = '<span class="infowin">Marker A (draggable)</span>',
contentB = '<span class="infowin">Marker B (draggable)</span>';
var
latLngCenter = new google.maps.LatLng(37.081476, -94.510574),
latLngCMarker = new google.maps.LatLng(37.0814, -94.5105),
latLngA = new google.maps.LatLng(37.2, -94.1),
latLngB = new google.maps.LatLng(38, -93),
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: latLngCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
}),
markerCenter = new google.maps.Marker({
position: latLngCMarker,
title: 'Location',
map: map,
draggable: true
}),
infoCenter = new google.maps.InfoWindow({
content: contentCenter
}),
markerA = new google.maps.Marker({
position: latLngA,
title: 'Location',
map: map,
draggable: true
}),
infoA = new google.maps.InfoWindow({
content: contentA
}),
markerB = new google.maps.Marker({
position: latLngB,
title: 'Location',
map: map,
draggable: true
}),
infoB = new google.maps.InfoWindow({
content: contentB
})
// exemplary setup:
// Assumes that your map is signed to the var "map"
// Also assumes that your marker is named "marker"
,
circle = new google.maps.Circle({
map: map,
clickable: false,
// metres
radius: 100000,
fillColor: '#fff',
fillOpacity: .6,
strokeColor: '#313131',
strokeOpacity: .4,
strokeWeight: .8
});
// attach circle to marker
circle.bindTo('center', markerCenter, 'position');
var
// get the Bounds of the circle
bounds = circle.getBounds()
// Note spans
,
noteA = jQuery('.bool#a'),
noteB = jQuery('.bool#b');
noteA.text(bounds.contains(latLngA));
noteB.text(bounds.contains(latLngB));
// get some latLng object and Question if it's contained in the circle:
google.maps.event.addListener(markerCenter, 'dragend', function() {
latLngCenter = new google.maps.LatLng(markerCenter.position.lat(), markerCenter.position.lng());
bounds = circle.getBounds();
noteA.text(bounds.contains(latLngA));
noteB.text(bounds.contains(latLngB));
});
google.maps.event.addListener(markerA, 'dragend', function() {
latLngA = new google.maps.LatLng(markerA.position.lat(), markerA.position.lng());
noteA.text(bounds.contains(latLngA));
});
google.maps.event.addListener(markerB, 'dragend', function() {
latLngB = new google.maps.LatLng(markerB.position.lat(), markerB.position.lng());
noteB.text(bounds.contains(latLngB));
});
google.maps.event.addListener(markerCenter, 'click', function() {
infoCenter.open(map, markerCenter);
});
google.maps.event.addListener(markerA, 'click', function() {
infoA.open(map, markerA);
});
google.maps.event.addListener(markerB, 'click', function() {
infoB.open(map, markerB);
});
google.maps.event.addListener(markerCenter, 'drag', function() {
infoCenter.close();
noteA.html("draggin…");
noteB.html("draggin…");
});
google.maps.event.addListener(markerA, 'drag', function() {
infoA.close();
noteA.html("draggin…");
});
google.maps.event.addListener(markerB, 'drag', function() {
infoB.close();
noteB.html("draggin…");
});
};
body {
margin: 0;
padding: 0
}
html,
body,
#map {
height: 100%;
font-family: Arial, sans-serif;
font-size: .9em;
color: #fff;
}
#note {
text-align: center;
padding: .3em; 10px;
background: #009ee0;
}
.bool {
font-style: italic;
color: #313131;
}
.info {
display: inline-block;
width: 40%;
text-align: center;
}
.infowin {
color: #313131;
}
#title,
.bool{
font-weight: bold;
}
<div id="note">
<span id="title">»Inside the circle?«</span>
<hr />
<span class="info">Marker <strong>A</strong>:
<span id="a" class="bool"></span>
</span> ←♦→
<span class="info">Marker <strong>B</strong>:
<span id="b" class="bool"></span>
</span>
</div>
<div id="map">test</div>
<script src="https://maps.googleapis.com/maps/api/js?callback=init&libraries=&v=weekly&key=YOUR_API_KEY" async></script>
I´m creating a map out of polygons to show the different districts of a city. Each polygon (district) should be clickable to another website (a sub-page with information about this area). I already added an add.listener and I can see that there is a link behind a polygon when I hover over the polygon but it is not clickable.
This is what I have so far for one polygon:
<body>
<h1>Headline</h1>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center:{lat:52.516754,lng:13.415202},
mapTypeId: 'terrain'
});
//Define the LatLng coordinates for the polygon's path DistrictOne
var DistrictOneCoords = [
{lat:52.528198300, lng:13.424935300},
{lat:52.527989500, lng:13.423905300},
{lat:52.525065200, lng:13.420386300},
{lat:52.522819700, lng:13.426480300},
{lat:52.521148500, lng:13.429141000},
{lat:52.519111700, lng:13.427596100},
{lat:52.528198300, lng:13.424935300}
];
// Construct the polygon.
var DistrictOne = new google.maps.Polygon({
paths: DistrictOneCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
DistrictOne.setMap(map);
}
// link
google.maps.event.addListener(DistrictOne, "click", function(event) { window.location.href = "https://www.berlin.de" });
</script>
As I already mentioned I'm not able to click the link.
With the posted code, I get a javascript error:
Uncaught ReferenceError: google is not defined
Your "click" listener is outside of the initMap function, so it is executing before the Google Maps Javascript API v3 has loaded.
Move if inside the initMap function:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center:{lat:52.516754,lng:13.415202},
mapTypeId: 'terrain'
});
//Define the LatLng coordinates for the polygon's path DistrictOne
var DistrictOneCoords = [
{lat:52.528198300, lng:13.424935300},
{lat:52.527989500, lng:13.423905300},
{lat:52.525065200, lng:13.420386300},
{lat:52.522819700, lng:13.426480300},
{lat:52.521148500, lng:13.429141000},
{lat:52.519111700, lng:13.427596100},
{lat:52.528198300, lng:13.424935300}
];
// Construct the polygon.
var DistrictOne = new google.maps.Polygon({
paths: DistrictOneCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
DistrictOne.setMap(map);
// link
google.maps.event.addListener(DistrictOne, "click", function(event) {
window.location.href = "https://www.berlin.de"
});
}
proof of concept fiddle
code snippet:
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 52.516754,
lng: 13.415202
},
mapTypeId: 'terrain'
});
//Define the LatLng coordinates for the polygon's path DistrictOne
var DistrictOneCoords = [{
lat: 52.528198300,
lng: 13.424935300
},
{
lat: 52.527989500,
lng: 13.423905300
},
{
lat: 52.525065200,
lng: 13.420386300
},
{
lat: 52.522819700,
lng: 13.426480300
},
{
lat: 52.519111700,
lng: 13.427596100
},
{
lat: 52.521148500,
lng: 13.429141000
},
{
lat: 52.528198300,
lng: 13.424935300
}
];
// Construct the polygon.
var DistrictOne = new google.maps.Polygon({
paths: DistrictOneCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
DistrictOne.setMap(map);
// link
google.maps.event.addListener(DistrictOne, "click", function(event) {
console.log('click, set window.location.href = "https://www.berlin.de"');
// uncomment the line below to make it redirect
// window.location.href = "https://www.berlin.de"
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
As per your given code. I am implemented polygon in my local.
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center:{lat:52.516754,lng:13.415202},
mapTypeId: 'terrain'
});
//Define the LatLng coordinates for the polygon's path DistrictOne
var DistrictOneCoords = [
{lat:52.528198300, lng:13.424935300},
{lat:52.527989500, lng:13.423905300},
{lat:52.525065200, lng:13.420386300},
{lat:52.522819700, lng:13.426480300},
{lat:52.521148500, lng:13.429141000},
{lat:52.519111700, lng:13.427596100},
{lat:52.528198300, lng:13.424935300}
];
// Construct the polygon.
var DistrictOne = new google.maps.Polygon({
paths: DistrictOneCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
DistrictOne.setMap(map);
addEventFunction(DistrictOne);
}
// link
function addEventFunction(DistrictOne) {
google.maps.event.addListener(DistrictOne, "click", function(event) { window.location.href = "https://www.berlin.de" });
}
initMap();
This question already has an answer here:
Google Maps Waypoints not showing whole path
(1 answer)
Closed 5 years ago.
I'm using the Google Map API. I want to show the dotted routes in map. If I add polylineDotted object to google.maps.DirectionsRenderer, it will miss some path on the map. Between point A and point B route is missing(please check my jsfiddle).
I had tried not using polylineDotted, it will be OK.
var polylineDotted = new google.maps.Polyline({
strokeColor: '#9966ff',
strokeOpacity: 0,
fillOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'
}],
});
Example code
My wish features must in could:
List item
Color #9966ff
Dotted routes
Multiple waypoints
polylineDotted should be a PolylineOptions object, not a Polyline.
This:
var polylineDotted = new google.maps.Polyline({
strokeColor: '#9966ff',
strokeOpacity: 0,
fillOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'
}],
})
should be:
var polylineDotted = {
strokeColor: '#9966ff',
strokeOpacity: 0,
fillOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'
}],
};
proof of concept fiddle
code snippet:
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var infoWindow = new google.maps.InfoWindow();
function initialize() {
var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1,
scale: 3
};
var polylineDotted = {
strokeColor: '#9966ff',
strokeOpacity: 0,
fillOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'
}],
};
var rendererOptions = {
map: map,
suppressMarkers: false,
polylineOptions: polylineDotted
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var center = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: center
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
directionsDisplay.setMap(map);
var start = "Lafayette Avenue 212, New York City";
var end = "Myrtle Avenue 11612, New York City";
var method = 'DRIVING';
var request = {
origin: start,
waypoints: [{
location: "Jackie Robinson Pkwy Brooklyn, New York City",
stopover: true
}],
destination: end,
travelMode: google.maps.DirectionsTravelMode[method]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var iwContent = response['routes'][0].legs[0].distance.text + '<br />' + response['routes'][0].legs[0].duration.text;
infoWindow.setContent(iwContent);
}
});
google.maps.event.addListener(polylineDotted, 'click', function(event) {
infoWindow.setPosition(event.latLng);
infoWindow.open(map, this);
});
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
}
initialize();
#map-canvas {
height: 400px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
I'm drawing multiple radius circles on my map with the following code:
function drawRadius(size){
var circle = new google.maps.Marker({
position: map.getCenter(),
zIndex: 1,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: size,
strokeOpacity: 0.65,
strokeWeight: 4,
fillColor: '#FEFCF3',
fillOpacity: 0.08,
strokeColor: '#efe8b2'
},
map: map
});
}
This method is called multiple times with different size parameters, it results in the the following image:
Unfortunately, I can't move the map anymore, because - as far as I can tell - the events are now fired on the circles and not on the map.
How can I fix this? I just want to be able to normally drag/move the map.
Thank you!
If you don't need to click on the circles (markers), set clickable: false on them, that prevents the markers from receiving mouse events.
From the documentation:
clickable boolean If true, the marker receives mouse and touch events. Default value is true.
function drawRadius(size){
var circle = new google.maps.Marker({
position: map.getCenter(),
zIndex: 1,
clickable: false,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: size,
strokeOpacity: 0.65,
strokeWeight: 4,
fillColor: '#FEFCF3',
fillOpacity: 0.08,
strokeColor: '#efe8b2'
},
map: map
});
}
proof of concept fiddle
code snippet:
var geocoder;
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var size = 100; size < 600; size += 100) {
drawRadius(size);
}
}
google.maps.event.addDomListener(window, "load", initialize);
function drawRadius(size) {
var circle = new google.maps.Marker({
position: map.getCenter(),
zIndex: 1,
clickable: false,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: size,
strokeOpacity: 0.65,
strokeWeight: 4,
fillColor: '#FEFCF3',
fillOpacity: 0.08,
strokeColor: '#000000'
},
map: map
});
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
I have a map that will contain a group of colored polygons. There are times I want to change the fill color of each poly from whatever it is to transparent. I have the following code:
polys[x].setOptions({
fillColor: "#FFFFFF",
fillOpacity: .01, //This changes throughout the program
strokeColor: '#000000',
});
How can I set the fillColor to transparent? Is there a specific hex value?
The google.maps.PolygonOptions.fillColor is just that, a color, there is no "transparent" color, that is an Opacity value (0.0 is fully transparent, 1.0 if fully opaque).
fillColor | string | The fill color. All CSS3 colors are supported except for extended named colors.
fillOpacity | number | The fill opacity between 0.0 and 1.0
Update: 0.0 seems to work now for transparent Polygons (jsfiddle)
if (window.attachEvent) {
window.attachEvent('onload', initMap);
} else if (window.addEventListener) {
window.addEventListener('load', initMap, false);
} else {
document.addEventListener('load', initMap, false);
}
function initMap() {
var latlng = new google.maps.LatLng(51.5001524, -0.1262362);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Westminster, London, UK'
});
var boundCoords = [
new google.maps.LatLng(51.3493528, -0.378358),
new google.maps.LatLng(51.7040647, 0.1502295),
new google.maps.LatLng(51.5001524, -0.1262362)
];
var boundCoords2 = [
new google.maps.LatLng(51.3493528, -0.378358),
new google.maps.LatLng(51.7040647, 0.1502295),
new google.maps.LatLng(51.6001524, -0.1262362)
];
var poly = new google.maps.Polygon({
paths: boundCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
poly.setMap(map);
console.log(poly);
var poly2 = new google.maps.Polygon({
paths: boundCoords2,
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.0
});
poly2.setMap(map);
console.log(poly);
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>