I want to insert google maps into my wordpress site.
Because I want circles on my map I can't use plugins which insert the map for me.
So I want to use the code from this site Maps JavaScript API which should work I think.
I copied the code and inserted it on my page into an editor which can show js and html.
I also get a browser key, replaced the code at the specified place and confirmed my domain.
src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&signed_in=true&callback=initMap">
But nothing show up at the page. No error, no maps, no empty space.
Now I thought that the reason could be that I don't add any version.
(If no version is added usually automatically the experimental version is used)
But nevertheless I tried it with v=3 which should be the release version.
src="https://maps.googleapis.com/maps/api/js?v=3key=MY_KEY&signed_in=true&callback=initMap">
And now I get the errors NoApiKeys, InvalidVersion and MissingKeyMapError.
But why ? The version should be valid and my key as well.
I made many different tutorials and stuff like that but nothing works.
Did anyone knows what to change to get this work?
Here is the whole code, but it is the same like that on the google page.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// First, create an object containing LatLng and population for each city.
var citymap = {
chicago: {
center: {lat: 41.878, lng: -87.629},
population: 2714856
},
newyork: {
center: {lat: 40.714, lng: -74.005},
population: 8405837
},
losangeles: {
center: {lat: 34.052, lng: -118.243},
population: 3857799
},
vancouver: {
center: {lat: 49.25, lng: -123.1},
population: 603502
}
};
function initMap() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 37.090, lng: -95.712},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3key=MY_KEY&signed_in=true&callback=initMap">
</script>
I would be happy if everyone who "dislikes" this will write a short comment why.
I tried to ask good questions and if something is missing or wrong I will change it.
i would debug probably by first listing only simple map thus skipping all this code below
// Construct the circle for each value in citymap.
it will help me to pinpoint which code is creating issue and then will take on from there.
Related
First of all, I know Google has documentation on how to complete all of these features, but even when I add the exact coding, the map no longer shows up, or it simply does not work.
I'm completely new to development, but the project I'm trying to complete is a Game of Thrones map, where other users may visit and add a marker, name the marker ( not a simple one-character label, more like an actual name, several characters long ), and delete their marker. If someone else adds a marker, I'd like to be able to see it. And vice versa, I want everyone's markers on the map to be visible.
So far, as a first step, all I'm trying to complete right now is creating markers and making them draggable. The map shows up fine, until I add the value "draggable:true" to the markers options. even though that's what the google documentation suggests.
Here's the google documentation: https://developers.google.com/maps/documentation/javascript/markers
And here's the page i'm trying to get the project to work on:http://jamie-jabbours-fabulous-project.webflow.io/
and here's the exact code i'm using:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
draggable: true
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB55_iwgWvg1_NjoIEqqXgeQOeDBrq8p5o&callback=initMap">
</script>
</body>
</html>
I'm sure there is something very simple I'm doing wrong, but I can't see it.
Just add a comma..after map and before draggable
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
draggable: true
});
}
Watch out for syntax bugs next time :)
I wanted to ask if it would be possible/realistic to have a google map and then use a mouse over to show google street view in a seperate box?
eg: I have a google map of a Long/Lat created using standard syntax:
var mymap = new google.maps.Map(document.getElementById('divContainer'), {
zoom: 17,
center: new google.maps.LatLng(-37, 144),
mapTypeId: google.maps.MapTypeId.ROADMAP,
fullscreenControl: true,
streetViewControl: false
});
Then with the map a use could run the mouse over the map and see the street view if a box/div that either followed the mouse around of sat to the side etc.
This is a interesting use case. I think possible to do it.
You can do it with StreetViewPanorama class - as a first argument you pass an HTML element that will be the container for the street view and the second one is the options(StreetViewPanoramaOptions object)
Then we need to capture the mousemove event when the mouse is over the map, get the LatLngBounds of the cursor and update StreetViewPanorama position with setPosition() method. If you want to somehow rotate the point-of-view while updating the position you can use setPov() method(see StreetViewPanorama class).
You can have another code that will take care to move the small street view window(pano), but this I leave to you :)
Let's have a look on the following example:
function initialize() {
var fenway = {
lat: 42.345573,
lng: -71.098326
};
var map = new google.maps.Map(document.getElementById('map'), {
center: fenway,
zoom: 14
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
google.maps.event.addListener(map, 'mousemove', function(e) {
panorama.setPosition(e.latLng);
});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map,
#pano {
float: left;
height: 100%;
width: 45%;
}
.as-console-wrapper{
display:none !important;
}
<script async defer src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize">
</script>
<div id="map"></div>
<div id="pano"></div>
Let me know if this works for you. This is just an idea to help you implement your specific use case and probably not the exactly right solution, but I hope you have a starting point now :)
I have written a code for displaying markers on the screen. And I have a text within the marker. The text is a 5 digit number which doesnot fit the marker. How can make the number to be within the marker?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Map API V3: Add Marker</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
body { margin: 20; padding: 20 }
#map_canvas{
width: 1024px;
height: 740px;
}
</style>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(47.576897,-122.419184),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var locations = [
[47.648197,-122.282784,11500,"0"]
];
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var shape = {
coord: [10, 10, 10, 20, 18, 20, 18 , 10],
type: 'poly'
};
for (i = 0; i < locations.length; i++) {
var myLatlng = new google.maps.LatLng(locations[i][0], locations[i][1]);
pinIcon = new google.maps.MarkerImage(
'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+locations[i][2]+'|808000|0000FF',
null,
null,
new google.maps.Point(140, 210),
new google.maps.Size(40, 60)
);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon:pinIcon,
shape:shape,
title: locations[i][3]
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
I want to print "11500" (locations[i][2]) inside my marker but when trying to do so it goes outside the marker.
The main issue is simply that you're using the wrong icon from the charts api. The pin type is of course not going to meet your needs for displaying the text; and you can't scale it after requesting it (as you seem to be trying in your code) since you'll be scaling the icon along with the text.
So two things to change:
MarkerIcon is deprecated, luckily it's easy to switch to Icon.
Use a different marker type that's designed for displaying text. Bubbles, probably.
Here is the relevant chunk of code that I just tested:
var myLatlng = new google.maps.LatLng(locations[i][0], locations[i][1]);
var pinIcon = {
url: 'http://chart.apis.google.com/chart?chst=d_bubble_text_small&chld=bb|'+locations[i][2]+'|C6EF8C|000000'
};
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: pinIcon,
title: locations[i][3]
});
I removed the shape attribute, because it's no longer valid with the new icon anyway. There is some image shifting during zoom, you can play with the attributes to fix that if you wish. And finally, there's different styles at that link to customize with.
Note: If this is to be used for a long time, know that the charts api is also deprecated, I think it's up until 2015.
I'm attempting to integrate heatmap.js with Google maps to do some visualization work. I referred to this:
http://www.patrick-wied.at/static/heatmapjs/example-heatmap-googlemaps.html
As such, my code in my local sample looks nearly identical:
<!DOCTYPE html>
<html lang="en">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<div id="heatmapArea" style="width:1024px;padding:0;height:768px;cursor:pointer;position:relative;"></div>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/heatmap.js"></script>
<script type="text/javascript" src="js/heatmap-gmaps.js"></script>
<script type="text/javascript">
window.onload = function(){
// standard gmaps initialization
var myLatlng = new google.maps.LatLng(48.3333, 16.35);
// define map properties
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: false,
scrollwheel: true,
draggable: true,
navigationControl: true,
mapTypeControl: false,
scaleControl: true,
disableDoubleClickZoom: false
};
// we'll use the heatmapArea
var map = new google.maps.Map($("#heatmapArea")[0], myOptions);
// let's create a heatmap-overlay
// with heatmap config properties
var heatmap = new HeatmapOverlay(map, {
"radius":20,
"visible":true,
"opacity":60
});
// here is our dataset
// important: a datapoint now contains lat, lng and count property!
var testData={
max: 46,
data: [{lat: 33.5363, lng:-117.044, count: 1},{lat: 33.5608, lng:-117.24, count: 1},{lat: 38, lng:-97, count: 1},{lat: 38.9358, lng:-77.1621, count: 1}]
};
// now we can set the data
google.maps.event.addListenerOnce(map, "idle", function(){
// this is important, because if you set the data set too early, the latlng/pixel projection doesn't work
heatmap.setDataSet(testData);
});
};
</script>
</html>
I'm getting the google map rendering in my div as I expect, but the heatmap itself isn't rendering on the lat-long data points provided by testData.
No errors in the browser console....
Someone see that I'm doing something foolish here?
Update
As heatmap.js v1 has now been retired I have also included an example based on the current version, v2, here:
http://jsfiddle.net/Fresh/pz4usuLe/
This is based on the Google Maps example found on the heatmap website.
Original Answer
I looked at this and it is definitely confusing. I took your code and got it to work here:
http://jsfiddle.net/Fresh/nRQbd/
(Note that the original example above no longer works as v1 has been retired, to see this working with v2 see this http://jsfiddle.net/Fresh/pz4usuLe/)
Note how I modified the datapoints within testData to get a result drawn on the map:
var testData = {
max: 3,
data: [{
lat: 48.3333,
lng: 16.35,
count: 100
}, {
lat: 51.465558,
lng: 0.010986,
count: 100
}, {
lat: 33.5363,
lng: -5.044,
count: 100
}]
};
I also increased the count value for each of these points; a point value of 1 is not visible, but increasing it's value (e.g. to 100) increases the intensity of the colour of the rendered point (thereby making it visible!).
The problem appears to occur when points are drawn outside of the visible map boundary. I deduced this by debugging:
heatmap.setDataSet(testData);
(uncomment "debugger;" in the fiddle to debug the code in the web console)
The code within heatmap-gmaps.js which is causing the datapoints to not be rendered is here:
while(dlen--){
latlng = new google.maps.LatLng(d[dlen].lat, d[dlen].lng);
if(!currentBounds.contains(latlng)) {
continue;
}
me.latlngs.push({latlng: latlng, c: d[dlen].count});
point = me.pixelTransform(projection.fromLatLngToDivPixel(latlng));
mapdata.data.push({x: point.x, y: point.y, count: d[dlen].count});
}
It appears that none of the datapoints in your example are contained within the current bounds of the rendered map area. Hence "!currentBounds.contains(latlng)" is always true, causing no points to be added to the mapdata object.
This assumption seems to be true because the first point in your dataSet (i.e. lat: 33.5363, lng:-117.044) is in fact in San Diego (use this to confirm http://itouchmap.com/latlong.html), which is not visible on the rendered map.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
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'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I am trying to understand the javascript portion of this code under the script tag. What exactly is it doing, since the code is not commented out under the Google API.
The documentation has it all laid out pretty well: Google Maps Javascript API Documentation
var map;
Defines a variable named map.
function initialize() {..}
Defines function named intialize
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Sets up options for the map (zoom: how far the map is zoomed in on it's point. center: center of the map defined by latitude and longitude values passed. mapTypeID: the type of map you want the maps API to appear as (ROADMAP, SATELLITE, TERRAIN, HYBRID)
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
This is setting various options for the map; the zoom level of the map, the initial coordinates of the map and the type of map to use (you can use roadmap, satellite or hybrid)
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
This creates the map object and adds it to your page.
google.maps.event.addDomListener(window, 'load', initialize);
This attaches an event listener to the window so that when it loads up the initialise function will run thereby creating the map.