Change Google Map marker on Jquery click - javascript

I'm trying to change GoogleMap marker icon by clicking div and using jquery. But it doesn't seem to be working, marker icon doesn't change. I assigned a variable that contains image path, but the thing is that if jquery changes it, it stays inside jquery function and is not passed back to global value.
Here is my code:
JS part
$(document).ready(function() {
$('#hurricanes').click(function (e){
iconic=jQuery(this).attr('hurr.png');
initMap();
});
$('#earthquakes').click(function (e){
iconic=jQuery(this).attr('durr.png');
initMap();
});
});
var iconBase = 'img/';
var iconic;
function createMarker(latlng, name, address1, address2, postalCode) {
var marker = new google.maps.Marker({
map: map,
position: latlng,
title: name,
icon: iconBase + iconic
});
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -0.397,
lng: 10.644
},
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true
});
displayMarkers();
}
And HTML buttons:
<div id="hurricanes" class="choices">HURRICANES</div>
<div id="earthquakes" class="choices">EARTHQUAKES</div>

you should reinitialize the map using JavaScript after you changed the marker. Have a look in the API Reference for all the options: https://developers.google.com/maps/documentation/javascript/3.exp/reference
Although I am not quite sure what you are exactly going to do, you can also remove the markers in specific coordinates and then add the new ones with new marker icons.

I found the solution by reinitializing both functions:
$(document).ready(function() {
$('#hurricanes').click(function (e){
iconic='hurr.png';
createMarker();
initMap();
console.log(iconic);
});
$('#earthquakes').click(function (e){
iconic='durr.png';
createMarker();
initMap();
console.log(iconic);
});
});

Related

Implement google place search and save marker to database in google map

What I want to achieve:
I want to display a search box in google map. When a user search a location, result is displayed in map box. On the map, when a user RightClick, I want to store the marker in database.
Resource I tried to implement
storing marker to database:
https://www.sanwebe.com/2013/10/google-map-v3-editing-saving-marker-in-database
displaying search box in map
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
I tried to implement these two as one: here is my minimal code
var mapCenter = new google.maps.LatLng(27.7172, 85.3240);
var map;
google.maps.event.addDomListener(window, 'load', map_initialize);
function map_initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
center: mapCenter,
zoom: 13,
mapTypeId: 'roadmap'
});
google.maps.event.addListener(map, 'rightclick', function(event) {
create_marker(event.latLng);
});
}
function create_marker(MapPos) {
var marker = new google.maps.Marker({
position: MapPos,
map: map
});
}
#map {
height: 200px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
With this code when I right click on the map, nothing happens i.e. neither the marker shows nor any error.
The map variable needs to be accessible from your create_marker function, therefore you declared it outside of your other functions. But also inside the map_initialize function. Remove the var declaration from there and it will work.
I have edited your original question to include a MCVE which means that I removed 90% of your code to keep only what you were after: adding a marker on right click.
Please take that as a suggestion for how to write your next questions.
var mapCenter = new google.maps.LatLng(27.7172, 85.3240);
google.maps.event.addDomListener(window, 'load', map_initialize);
function map_initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: mapCenter,
zoom: 13,
mapTypeId: 'roadmap'
});
google.maps.event.addListener(map, 'rightclick', function(event) {
create_marker(event.latLng);
});
}
function create_marker(MapPos) {
var marker = new google.maps.Marker({
position: MapPos,
map: map
});
}
#map {
height: 200px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>

Google Maps refreshing everytime mouse is clicked

http://task4adamholt.appspot.com/?guestbook_name=Cars
For some reason every time the mouse is clicked, whether it be on the table or the actual map itself it refreshes all the maps for some reason.
Does anyone have any idea why, it's really strange. The .js file includes the following function
function getLoc(lon,lat,id) {
function initialize() {
var mapProp = {
center: new google.maps.LatLng(lat, lon),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(id), mapProp);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
title: 'Sent Here!'
});
}
google.maps.event.addDomListener(window, 'click', initialize);
document.getElementById(id).style.display = 'block';
}
This is the line that's causing the problem.
google.maps.event.addDomListener(window, 'click', initialize);
It listens for a click on the window, and runs the functions whenever a click happens, refreshing the map. I would definitely change the 'click' event to something else, like DOM ready.

Populating google map with markers JSON

I am trying to populate a google map with markers. The information for each marker is contained in this array:
[{"id":"1","name":"toler","lng":"110.33929824829102","lat":"-7.779369982234709","created_at":"2014-02-21 16:19:28","updated_at":"2014-02-21 16:19:28"},{"id":"2","name":"hallo :)","lng":"110.36865234375","lat":"-7.797738383377609","created_at":"2014-02-21 16:19:49","updated_at":"2014-02-21 16:19:49"}]
However, my map does not show the markers. I am using this code in my javascript:
getLocations();
function getLocations() {
alert('hello');
$.ajax({
type: "GET",
url: "http://localhost:8888/public/test",
dataType: "jsonp",
success: function(json){
$.each(json, function(i, entry){
PlotMarker(json[i].lat, json[i].long);
});
},
error: function(err){
console.log(err);
}
});
}
function PlotMarker(lat, long){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
map: map,
draggable: false,
animation: google.maps.Animation.DROP
});
markerLocations.push(marker);
}
Is there any way to fix this issue? Calling this url
http://localhost:8888/public/test
returns the JSON shown above.
Any help would be greatly appreciated.
Thanks.
EDIT:
function initialize() {
var markers = [];
var latLng = new google.maps.LatLng(-7.8,110.3666667);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
Declare your map variable outside of the initialize function. It's the only way that other functions will be able to see it:
var map;
function initialize() {
var markers = [];
var latLng = new google.maps.LatLng(-7.8,110.3666667);
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
Try changing:
PlotMarker(entry.location.lat, entry.location.lng);
to:
PlotMarker(entry.lat, entry.lng);
Try changing this:
PlotMarker(entry.location.lat, entry.location.lng);
To:
PlotMarker(json[i].lat, json[i].lng);
I think it's because of the outer []'s.
The main problem is that getLocations() is called before initialize() is started. You have to comment out getLocations(); and move it to the end of initialize() function.
That is not enough: map definition has to be moved outside of initialize() function and should not be redefined inside initialize() function.
markerLocations, used in PlotMarker(), is not defined. Should be defined as global like map
var map;
var markerLocations = [];
function initialize() {
...
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
...
getLocations();
}
PlotMarker() has to be called like:
PlotMarker(entry.lat, entry.lng);
Are you ever calling your initialize function? Call it right when the page loads.
google.maps.addDomListener(window, 'load', initialize);
as shown here.
What is the sequence of those functions? Which do you call first, and next?
I have encountered this kind of problem and what happens is, the map has not finished loading all the tiles so the markers could not be placed on those and so they do not appear. But when you check in the console, the marker objects are there.
This is how I solved it:
google.maps.event.addListener(map, 'tilesloaded', function() {
plotMarkers();
google.maps.event.clearListeners(map, 'tilesloaded');
});
It assures the map tiles are completely loaded before plotting the markers. In this case, the markers will surely be visible.

dragend event listener not firing in Google Maps API v3?

It won't even log to the console. I'm not sure what's going on here:
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(-41.2, 173.3),
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}
var homeMarker = new google.maps.Marker();
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListener(map, "click", function(event) {
// If the marker already exists, set it's position to null
if (homeMarker) {
homeMarker.setPosition(null);
}
// Instantiate the marker again
homeMarker = new google.maps.Marker({
position: event.latLng,
map: map,
title: 'Your Home Location',
draggable: true
});
// Set the input fields to the latitude and longitude
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
$('input#homeLat').val(latitude.toFixed(6));
$('input#homeLong').val(longitude.toFixed(6));
});
// What is wrong here?
google.maps.event.addListener(homeMarker, "dragend", function(event) {
console.log('foo');
});
Basically, what is meant to happen is that I want to fetch the coordinates from the new position of the marker, which can be changed via a click on the map and a drag of the marker itself. I've got the former working, but my eventListener for dragend doesn't seem to be firing at all. Any ideas?
Alert while dragging, same code works for me.
getPosition() helps to get the current marker position
Try this,
google.maps.event.addListener(homeMarker, "dragend", function(event) {
alert('map dragged');
homeMarker.getPosition();
});

Loading Google Maps inside bootstrap tabs, fix is showing blank

UPDATE
I've tried implementing wf's solution, but the error still persists. You can take a look at a live example here -->
http://www.opohills.com/taipei-rentals/apollo_a.php
Scroll down and click the "Locations" tab
I'm trying to load google maps inside bootstrap tabs. I'm encountering the same problem discussed here, and extensively at SA --
https://github.com/twitter/bootstrap/issues/2330
The fix is to add a callback when the tab is clicked, to load the map than. I'm trying to implement this, with no success. The error still persists ( when only 1/8th of the map shows on the top left hand corner. ) When I open up inspect element, the map fills up and works fine (I'm guessing because inspect element is rereading the javascript)
Below is my javascript, and since this is my first real forray into it, I'm sure I'm doing something wrong --
<script type="text/javascript">
var map,
marker = new google.maps.Marker({
position: new google.maps.LatLng(25.041483, 121.553984),
draggable: true,
title: 'Opo Apartment' }),
infoWindow = new google.maps.InfoWindow({content: 'Apollo Apartment'});
$('#location').on('show', function(e) {
if( map == undefined) {
map = new google.maps.Map(
document.getElementById('map-canvas'),
{ zoom: 14,
center: new google.maps.LatLng(25.041483, 121.553984),
mapTypeId: google.maps.MapTypeId.ROADMAP })
}
marker.setMap(map);
infoWindow.open(map, marker);
})
</script>​
What are your thoughts on this?
I made a fix around it, but keeping it in a different div, away from the tabs, and displaying it when a certain tab is clicked. You can go to the same site to see the code
$(document).ready(function(){
var map,
marker = new google.maps.Marker({
position: new google.maps.LatLng(25.041483, 121.553984),
draggable: true,
title: 'Opo Apartment' }),
infoWindow = new google.maps.InfoWindow({content: 'Apollo Apartment'});
$('#location').on('show', function(e) {
if( map == undefined) {
map = new google.maps.Map(
document.getElementById('map-canvas'),
{ zoom: 14,
center: new google.maps.LatLng(25.041483, 121.553984),
mapTypeId: google.maps.MapTypeId.ROADMAP })
}
document.getElementById("largemap").style.display="block";
google.maps.event.trigger(map, 'resize');
marker.setMap(map);
infoWindow.open(map, marker);
})
$('.tabclick').on('show', function(e) {
document.getElementById("largemap").style.display="none";
})
})
Did you try like this?
$('#location').on('show', function(e) {
if( map == undefined) {
map = new google.maps.Map(
document.getElementById('map-canvas'),
{ zoom: 14,
center: new google.maps.LatLng(25.041483, 121.553984),
mapTypeId: google.maps.MapTypeId.ROADMAP })
}
marker.setMap(map);
infoWindow.open(map, marker);
google.maps.event.addListenerOnce(map, "bounds_changed", function() {
google.maps.event.trigger(map, "resize");
});
})
Thanks to alexxB in https://github.com/twbs/bootstrap/issues/2330
I use Cake, Bootstrap 3.0 an Jquery 1.11. First check that jquery functions trigers with any function to discard javascript problems then add this.
$('a[href="#my_id_tab_map"]').on('shown.bs.tab', function(e)
{
google.maps.event.trigger(map, 'resize');
});

Categories