Javascript and the Google Maps API - javascript

I'm in a spot of bother and my hairline is on the chopping block. When I integrated the maps API on this site, ritaknoetze.com, everything worked perfectly.
However, copying that exact code for a different demo website, scarabpaper, the map doesn't show up at all? Could someone show me the ropes on what I'm doing wrong?
Here's the code I got from Google itself that I modified for my WordPress theme/installation:
JavaScript:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-34.009839, 22.78101);
var myOptions = {
zoom: 9,
center: myLatlng,
navigationControl: true,
mapTypeControl: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = '<?php bloginfo('template_url')?>/assets/googlemaps_marker.png';
var myLatLng = new google.maps.LatLng(-34.009839, 22.78101);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
</script>
My HTML where the javascript goes:
<div class="contact_container">
<div id="map_canvas"></div>
<div class="clearfloat"></div>
</div>
My CSS for the affected divs
#map_canvas {
width: 880px;
height: 300px;
margin-left: 10px;
margin-bottom: 30px;
margin-top: 10px;
float: left;
border: 1px solid #dedcdc;}
.contact_container { /*container for ALL the contact info*/
background-color: #fff;
border: 1px solid #dedcdc;
width: 900px;
margin-top: 30px;
padding: 20px;
padding-bottom: 0;}
Any Help would be greatly appreciated...

You're never calling the initialize() method. It works if you call that method, even using a console.

Related

How to add a Geocoding Service (For MapBox)

I'm working on a map with mapbox, also it has a list of locations per countries, states and cities, and when I am clicking one of them, their location should be shown.
So I´m adding the geocoder L.mapbox.geocoder of mapbox but the coordinates of some places are not precise enough e.g. US or France.
How can I solve this?
I also thought to use google's geocoding service Google Geocoder.
How could I do this ?
Example code
I hope you can help me.
If you are going to use mapbox, there is no guarantee for accurate data over the whole world, because mapbox streets is based on a volunteered database called OpenStreetMap: "Data for Mapbox Streets comes primarily from OpenStreetMap, with Natural Earth and our own tweaks used for some parts" [source]. So if you have to be more accurate the google Geocoder should be the API of your choice. The pricing depends on the requests per day.
Here is an google Geocoding example:
<!DOCTYPE html>
<html>
<head>
<title>Geocoding service</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="floating-panel">
<input id="address" type="textbox" value="Sydney, NSW">
<input id="submit" type="button" value="Geocode">
</div>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644}
});
var geocoder = new google.maps.Geocoder();
document.getElementById('submit').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
}
function geocodeAddress(geocoder, resultsMap) {
var address = document.getElementById('address').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
resultsMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap"
async defer></script>
</body>
</html>

Custom Google Map API V3 PEGMAN Button

I made custom zoom controls and want to add Pegman control with the same style as well. Is it possible?
Custom zoom controls are added as follows (from this questions answer):
<!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: 60%; width:60%; margin:20px auto; border:1px solid; padding-left:100px; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR-MAP_API-ID&sensor=false&region=AU">
</script>
<script type="text/javascript">
function HomeControl(controlDiv, map) {
google.maps.event.addDomListener(zoomout, 'click', function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 0){
map.setZoom(currentZoomLevel - 1);}
});
google.maps.event.addDomListener(zoomin, 'click', function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 21){
map.setZoom(currentZoomLevel + 1);}
});
}
var map;
var markersArray = [];
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(-33.90224, 151.20215);
var mapOptions = {
zoom: 15,
center: myLatlng,
Marker: true,
panControl: false,
zoomControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="zoomout" style="border:1px solid; width:150px; heoght:50px; cursor:pointer; margin-bottom:20px;">ZOOM ME OUT</div>
<div id="zoomin" style="border:1px solid; width:150px; heoght:50px;cursor:pointer;">ZOOM ME IN</div>
</body>
</html>
Is it possible to add one more div element in the body with custom Pegman button, but it need to work exactly as it is working in default button (drag and drop yellow man to the map, Pegman is moving on hover etc) only the square button behind him will be another style.
When you only want to style the button, not the pegman, it's quite easy.
The button has the class gm-svpc , simply add your style.
function initialize() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 14,
center: new google.maps.LatLng(52.5498783, 13.425209099999961),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
streetViewControl: true
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
.gm-svpc {
background: tomato !important;
border: 2px solid firebrick;
border-radius: 20px !important;
}
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

Draggable Icons on a Google Map V3 - Set to Draggable=True, but can not drag it

I have everything working on this Google map V3 on how I would like it except for one last thing. Right now, If you load up the map, the map is able to search for a place and drag an icon from outside the map into the Google map. However, once the icon is inside the map, I am not able to drag it. I've search endlessly on where I went wrong on my code.
Below are a few examples of many that I read on:
Link1,
Link2, Link3, Link4 (Link 4 is what i need but could not connect the code after further inspection)
I feel I am very close but I believe I am just not declaring the right variables or not connecting them right. Below is the code and here is a FIddle that can give you a picture of my problem. (Try dragging the icon once and then dragging it again inside the map)
<!DOCTYPE html>
<html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html {
height: 100%;
}
body {
height: 97%;
}
#map-canvas {
width: 70%;
height: 100%;
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -30%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#shelf {
position: absolute;
margin-right: 5px;
top: 25px;
left: 70%;
height: 98%;
width: 30%;
float: right;
}
#draggable {z-index:1000000000;}
#draggable2 {z-index:1000000000;}
#draggable3 {z-index:1000000000;}
.ecostation {
margin-left: auto;
margin-right: auto;
border: 1.0px solid #F0F0F0;
border-radius: 5.0px 5.0px 5.0px 5.0px;
width: 85%;
text-align: center;
}
#wrapper {
display: table-row;
border: 1.0px solid rgb(204,204,204);
border-radius: 5.0px 5.0px 5.0px 5.0px;
}
#wrapper div {
display: table-cell;
border-radius: 10.0px 10.0px 10.0px 10.0px;
width: 12.5%;
}
#wrapper div img {
display: block;
padding: 5.0px;
margin: 5.0px auto;
text-align: center;
}
#wrapper div h5, #wrapper div p {
text-align: center;
font-size: 11px;
margin-top: -10px;
font-weight: 800;
}
.title {
margin-left: 7%;
color: #F0F0F0;
font-weight: 600;
}
#target {
width: 345px;
}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#draggable").draggable({helper: 'clone',
stop: function(e) {
var point=new google.maps.Point(e.pageX,e.pageY);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
var icon = $(this).attr('src');
placeMarker(ll, icon);
}
});
$("#draggable2").draggable({helper: 'clone',
stop: function(e) {
var point=new google.maps.Point(e.pageX,e.pageY);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
var icon = $(this).attr('src');
placeMarker(ll, icon);
}
});
});
</script>
<script>
// This example adds a search box to a map, using the
// Google Places autocomplete feature. People can enter geographical searches.
// The search box will return a pick list containing
// a mix of places and predicted search terms.
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
map.fitBounds(defaultBounds);
// Create the search box and link it to the UI element.
var input = document.getElementById('target');
var searchBox = new google.maps.places.SearchBox(input);
// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each plce, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// [END region_getplaces]
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable:true,
icon: icon
});
}
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="panel">
<input id="target" type="text" placeholder="Search Box">
</div>
<div id='shelf'>
<div class="ecostation">
<div id="wrapper">
<div>
<img src="https://cdn1.iconfinder.com/data/icons/mobile-development-icons/30/Map_marker.png" id="draggable" title="Estation Trash/Compost" alt="Estation Trash and Compost"/>
<p>Trash/Compost</p>
</div>
<div>
<img src="https://cdn1.iconfinder.com/data/icons/large-tab-bar-icons/30/Start_flag.png" id="draggable2" title="Estation Trash" alt="Estation Trash"/>
<p>Trash</p>
</div>
<div>
<img src="http://i1288.photobucket.com/albums/b489/Wallace_Adams/bth_facebook-icon-30x30_zpsb49e1af3.jpg" id="draggable3" title="Estation Recycling" alt="Estation Recycling"/>
<p>Recycle</p>
</div>
</div>
</div>
</div>
</html>
end of code
If you guys can let me know that would be great! Also, i noticed that marker is declared twice. Is that one of the problems? I tried declaring something else but had no luck.
I also came accross this code but not sure if it is helpful in this situation
var overlay;
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
Possibly thinking it has to do something with this piece of code below?
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable:true,
icon: icon
});
}
But then again, couldn't figure what was wrong with, am I connecting the variables correctly?
Help would be greatly appreciated, I am very close to finishing what I want to accomplish on this map
Check to make sure you are not using svg images for the icon. They seem to work on FireFox and Chrome, but not IE

gmap loaded after document ready

i use this function for generate my gmap when the user click on button
function getGMap(id_map,lat,lng) {
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(id_map),
mapOptions);
marker = new google.maps.Marker({
map:map,
//animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(lat, lng),
icon: "../imgmdg/icons/map_pin.png"
});
}
$(".toggleMap").click(function(){
var id_map=$(this).attr('data-idmap');
var lat=$(this).attr('data-lat');
var lng=$(this).attr('data-lng');
var status=$(this).attr('data-status');
if(status=="0") {
console.log(id_map);
console.log(lat);
console.log(lng);
$("#"+id_map).html('');
getGMap(id_map,lat,lng);
$(this).attr('data-status','1');
}
});
trigger: (class toggleMap in the second 'li')
<ul class="nav nav-tabs tabsFixBorder">
<li class="active">Menù</li>
<li>Profilo</li>
</ul>
and in my page there are some div like this:
<div id="map_1" class="gmap_container"></div>
<div id="map_2" class="gmap_container"></div>
<div id="map_3" class="gmap_container"></div>
this is my css:
html{
font-family: Arial, Helvetica, Verdana;
font-size: 12px;
color: #2d2929;
height: 100%;
}
body {
height: 100%;
min-height: 100%;
position: relative;
background-image: url('../imgmdg/pattern/pattern.jpg');
}
.gmap_container{
display: block;
/*tried with height:100% as well*/
height:200px;
width:100%;
background-color: #fff !important;
margin: 0px;
padding-bottom:10px;
}
it work only for the first click I do
after one click the map have some problem
(it load only a part of the map)
this is the screenshot of the problem: http://postimg.org/image/7apl01wn7/
thanks all in advice
Finally i have found the solution for my problem:
at the end i've used the bootstrap tab as a container for my map.
the trick is load the map after the tab is loaded (for example i used the bootstrap event 'shown')
$('a[data-toggle="tab"]').on('shown', function (e) {
getGMap(id_map,lat,lng);
});
hope this help

Fusion Table layer InfoWindow showing all vertices in geometry field

this is my first post here so I apologize if I make a newbie faux pas.
I've got a Google Fusion Table layer that I have on top of a map. I created it by importing a KML file. Everything works great, but last week I realized that the InfoWindow is now displaying all of the vertices of the relevant polygon in the geometry field.
The strange thing is that these vertices do not display in the actual Fusion Table but only on the layer on top of the map. I suspect something might be going on with the JavaScript code, which I am very new to, or perhaps the new API for the Fusion Tables.
I removed the body section to get around some formatting issues on this page, but here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Georgia Areas</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%; weight: 100% }
#search-panel {
position: absolute;
` top: 10px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#address {
width: 345px;
}
#instruction {
position: fixed;
float: right;
bottom: 10px;
right: 20px;
width: 375px;
z-index: 4;
background-color: #fff;
padding: 7px;
border: 1px solid #999;
font-family:"Arial";
}
p.small {font-size: small}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyARy6zbLmjvq3uaPjI--s45afA0LA-ynnA&sensor=false">
</script>
<script type="text/javascript">
var infoWindow = new google.maps.InfoWindow();
var input = document.getElementById('address');
var geocoder;
var gaCentroid;
var gaBounds;
var myMap;
function myclick(num) {
google.maps.event.trigger(markers[num], "click");
}
function initialize() {
geocoder = new google.maps.Geocoder();
gaCentroid = new google.maps.LatLng(32.900000, -83.22671);
gaBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(30.34,-85.652),
new google.maps.LatLng(35.01,-80.85)
);
var mapOptions = {
center: gaCentroid,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
myMap = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var lyr = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1Bgo94POIxKwQOOltuFbaAW6CpjQqPvYLVSqXuLk'
},
styles: [{
polygonOptions: {
fillColor: '0xDEEBF7',
fillOpacity: 0.1
}
}]
});
lyr.setMap(myMap);
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode({'address':address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
myMap.setCenter(results[0].geometry.location);
myMap.fitBounds(results[0].geometry.viewport)
var marker = new google.maps.Marker({
map: myMap,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function reCenter() {
var currentCenter = myMap.getCenter();
google.maps.event.trigger(myMap, 'resize');
myMap.setCenter(currentCenter);
}
</script>
</head>
</html>
Can anyone shed some light on this?
Thanks,
Ryan
You can configure the content shown in the infowindow.
See this page in the Fusion Tables Help
You must define the templateId to have the same content for the infoWindow.
Add this to the options passed to the layer:
templateId:2
I ended up changing the code to reference another Fusion Tables Layer. All I changed was the ID. This seems to work with the new layer, but I still do not know what happened to display the geometry in the InfoWindow.
If it happens again, I will most likley attempt Dr.Molle's suggestion.

Categories